Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Bundling, TypeScript, dan peta sumber untuk runtime APP SYNC_JS

TypeScript meningkatkan AWS AppSync pengembangan dengan memberikan keamanan tipe dan deteksi kesalahan dini. Anda dapat menulis TypeScript kode secara lokal dan mentranspilasinya JavaScript sebelum menggunakannya dengan runtime. APPSYNC_JS Prosesnya dimulai dengan menginstal TypeScript dan mengkonfigurasi tsconfig.json untuk lingkungan. APPSYNC_JS Anda kemudian dapat menggunakan alat bundling seperti esbuild untuk mengkompilasi dan menggabungkan kode. Amplify CLI akan menghasilkan tipe dari skema GraphQL, memungkinkan Anda untuk menggunakan tipe ini dalam kode resolver.

Anda dapat memanfaatkan pustaka khusus dan eksternal dalam resolver dan kode fungsi Anda, selama mereka memenuhi APPSYNC_JS persyaratan. Alat bundling menggabungkan kode menjadi satu file untuk digunakan. AWS AppSync Peta sumber dapat disertakan untuk membantu debugging.

Memanfaatkan pustaka dan menggabungkan kode Anda

Dalam resolver dan kode fungsi Anda, Anda dapat memanfaatkan pustaka khusus dan eksternal selama mereka memenuhi APPSYNC_JS persyaratan. Ini memungkinkan untuk menggunakan kembali kode yang ada di aplikasi Anda. Untuk memanfaatkan pustaka yang ditentukan oleh beberapa file, Anda harus menggunakan alat bundling, seperti esbuild, untuk menggabungkan kode Anda dalam satu file yang kemudian dapat disimpan ke AWS AppSync resolver atau fungsi Anda.

Saat menggabungkan kode Anda, ingatlah hal-hal berikut:

Misalnya, untuk menggabungkan kode resolver yang terletak disrc/appsync/getPost.resolver.js, Anda dapat menggunakan perintah esbuild CLI berikut:

$ esbuild --bundle \
--sourcemap=inline \
--sources-content=false \
--target=esnext \
--platform=node \
--format=esm \
--external:@aws-appsync/utils \
--outdir=out/appsync \
 src/appsync/getPost.resolver.js

Membangun kode Anda dan bekerja dengan TypeScript

TypeScriptadalah bahasa pemrograman yang dikembangkan oleh Microsoft yang menawarkan semua fitur bersama dengan sistem TypeScript pengetikan. JavaScript Anda dapat menggunakannya TypeScript untuk menulis kode yang aman tipe dan menangkap kesalahan dan bug pada waktu pembuatan sebelum menyimpan kode Anda ke AWS AppSync. @aws-appsync/utilsPaket sepenuhnya diketik.

APPSYNC_JSRuntime tidak mendukung TypeScript secara langsung. Anda harus terlebih dahulu mentranspile TypeScript kode Anda ke JavaScript kode yang didukung APPSYNC_JS runtime sebelum menyimpan kode Anda ke. AWS AppSync Anda dapat menggunakan TypeScript untuk menulis kode Anda di lingkungan pengembangan terintegrasi lokal (IDE), tetapi perhatikan bahwa Anda tidak dapat membuat TypeScript kode di AWS AppSync konsol.

Untuk memulai, pastikan Anda telah TypeScript menginstal di proyek Anda. Kemudian, konfigurasikan pengaturan TypeScript transkompilasi Anda untuk bekerja dengan APPSYNC_JS runtime menggunakan TS Config. Berikut adalah contoh tsconfig.json file dasar yang dapat Anda gunakan:

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
   "noEmit": true,
   "moduleResolution": "node",
  }
}

Anda kemudian dapat menggunakan alat bundling seperti esbuild untuk mengkompilasi dan menggabungkan kode Anda. Misalnya, dengan proyek dengan AWS AppSync kode Anda terletak disrc/appsync, Anda dapat menggunakan perintah berikut untuk mengkompilasi dan menggabungkan kode Anda:

$ esbuild --bundle \
--sourcemap=inline \
--sources-content=false \
--target=esnext \
--platform=node \
--format=esm \
--external:@aws-appsync/utils \
--outdir=out/appsync \
 src/appsync/**/*.ts

Menggunakan Amplify codegen

Anda dapat menggunakan Amplify CLI untuk menghasilkan tipe untuk skema Anda. Dari direktori tempat schema.graphql file Anda berada, jalankan perintah berikut dan tinjau petunjuk untuk mengkonfigurasi codegen Anda:

$  npx @aws-amplify/cli codegen add

Untuk membuat ulang codegen Anda dalam keadaan tertentu (misalnya, ketika skema Anda diperbarui), jalankan perintah berikut:

$ npx @aws-amplify/cli codegen

Anda kemudian dapat menggunakan tipe yang dihasilkan dalam kode resolver Anda. Misalnya, diberikan skema berikut:

type Todo {
  id: ID!
  title: String!
  description: String
}

type Mutation {
  createTodo(title: String!, description: String): Todo
}

type Query {
  listTodos: Todo
}

Anda dapat menggunakan tipe yang dihasilkan dalam AWS AppSync fungsi contoh berikut:

import { Context, util } from '@aws-appsync/utils'
import * as ddb from '@aws-appsync/utils/dynamodb'
import { CreateTodoMutationVariables, Todo } from './API' // codegen

export function request(ctx: Context<CreateTodoMutationVariables>) {
	ctx.args.description = ctx.args.description ?? 'created on ' + util.time.nowISO8601()
	return ddb.put<Todo>({ key: { id: util.autoId() }, item: ctx.args })
}

export function response(ctx) {
	return ctx.result as Todo
}

Menggunakan obat generik di TypeScript

Anda dapat menggunakan obat generik dengan beberapa jenis yang disediakan. Misalnya, cuplikan di bawah ini adalah Todo tipe:

export type Todo = {
  __typename: "Todo",
  id: string,
  title: string,
  description?: string | null,
};

Anda dapat menulis resolver untuk langganan yang memanfaatkanTodo. Di IDE Anda, definisi ketik dan petunjuk pelengkapan otomatis akan memandu Anda menggunakan utilitas toSubscriptionFilter transformasi dengan benar:

import { util, Context, extensions } from '@aws-appsync/utils'
import { Todo } from './API'

export function request(ctx: Context) {
  return {}
}

export function response(ctx: Context) {
  const filter = util.transform.toSubscriptionFilter<Todo>({
    title: { beginsWith: 'hello' },
    description: { contains: 'created' },
  })
  extensions.setSubscriptionFilter(filter)
  return null
}

Melapisi bundel Anda

Anda dapat secara otomatis membersihkan bundel Anda dengan mengimpor esbuild-plugin-eslint plugin. Anda kemudian dapat mengaktifkannya dengan memberikan plugins nilai yang memungkinkan kemampuan eslint. Di bawah ini adalah cuplikan yang menggunakan JavaScript API esbuild dalam file bernama: build.mjs

/* eslint-disable */
import { build } from 'esbuild'
import eslint from 'esbuild-plugin-eslint'
import glob from 'glob'
const files = await glob('src/**/*.ts')

await build({
  format: 'esm',
  target: 'esnext',
  platform: 'node',
  external: ['@aws-appsync/utils'],
  outdir: 'dist/',
  entryPoints: files,
  bundle: true,
  plugins: [eslint({ useEslintrc: true })],
})

Menggunakan peta sumber

Anda dapat menyediakan peta sumber sebaris (sourcemap) dengan JavaScript kode Anda. Peta sumber berguna ketika Anda menggabungkan JavaScript atau membuat TypeScript kode dan ingin melihat referensi ke file sumber masukan Anda di log dan pesan JavaScript kesalahan runtime.

Anda sourcemap harus muncul di akhir kode Anda. Ini ditentukan oleh satu baris komentar yang mengikuti format berikut:

//# sourceMappingURL=data:application/json;base64,<base64 encoded string>

Inilah contohnya:

//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsibGliLmpzIiwgImNvZGUuanMiXSwKICAibWFwcGluZ3MiOiAiO0FBQU8sU0FBUyxRQUFRO0FBQ3RCLFNBQU87QUFDVDs7O0FDRE8sU0FBUyxRQUFRLEtBQUs7QUFDM0IsU0FBTyxNQUFNO0FBQ2Y7IiwKICAibmFtZXMiOiBbXQp9Cg==

Peta sumber dapat dibuat dengan esbuild. Contoh di bawah ini menunjukkan cara menggunakan ESBUILD JavaScript API untuk menyertakan peta sumber sebaris saat kode dibuat dan dibundel:

/* eslint-disable */
import { build } from 'esbuild'
import eslint from 'esbuild-plugin-eslint'
import glob from 'glob'
const files = await glob('src/**/*.ts')

await build({
  sourcemap: 'inline',
  sourcesContent: false,
  
  format: 'esm',
  target: 'esnext',
  platform: 'node',
  external: ['@aws-appsync/utils'],
  outdir: 'dist/',
  entryPoints: files,
  bundle: true,
  plugins: [eslint({ useEslintrc: true })],
})

Secara khusus, sourcesContent opsi sourcemap dan menentukan bahwa peta sumber harus ditambahkan sejalan di akhir setiap build tetapi tidak boleh menyertakan konten sumber. Sebagai konvensi, kami sarankan untuk tidak menyertakan konten sumber di Andasourcemap. Anda dapat menonaktifkan ini di esbuild dengan menyetel sources-content kefalse.

Untuk mengilustrasikan cara kerja peta sumber, tinjau contoh berikut di mana kode resolver mereferensikan fungsi pembantu dari pustaka pembantu. Kode berisi pernyataan log dalam kode resolver dan di pustaka pembantu:

. /src/default.resolver.ts (resolver Anda)

import { Context } from '@aws-appsync/utils'
import { hello, logit } from './helper'

export function request(ctx: Context) {
  console.log('start >')
  logit('hello world', 42, true)
  console.log('< end')
  return 'test'
}

export function response(ctx: Context): boolean {
  hello()
  return ctx.prev.result
}

. src/helper.ts (file pembantu)

export const logit = (...rest: any[]) => {
  // a special logger
  console.log('[logger]', ...rest.map((r) => `<${r}>`))
}

export const hello = () => {
  // This just returns a simple sentence, but it could do more.
  console.log('i just say hello..')
}

Saat Anda membangun dan menggabungkan file resolver, kode resolver Anda akan menyertakan peta sumber sebaris. Saat resolver Anda berjalan, entri berikut muncul di CloudWatch log:

Melihat entri di CloudWatch log, Anda akan melihat bahwa fungsionalitas kedua file telah dibundel bersama dan berjalan secara bersamaan. Nama file asli dari setiap file juga jelas tercermin dalam log.