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 `APPSYNC_JS` TypeScript meningkatkan AWS AppSync pengembangan dengan menyediakan 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 mengonfigurasi 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 kustom dan eksternal dalam resolver dan kode fungsi Anda, selama mereka memenuhi persyaratan. `APPSYNC_JS` 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 kustom dan eksternal selama mereka memenuhi persyaratan. `APPSYNC_JS` Hal ini memungkinkan untuk menggunakan kembali kode yang ada dalam aplikasi Anda. Untuk menggunakan pustaka yang ditentukan oleh beberapa file, Anda harus menggunakan alat bundling, seperti [esbuild](https://esbuild.github.io/), untuk menggabungkan kode Anda dalam satu file yang kemudian dapat disimpan ke AWS AppSync resolver atau fungsi Anda. Saat menggabungkan kode Anda, ingatlah hal berikut: + `APPSYNC_JS`hanya mendukung ECMAScript modul (ESM). + `@aws-appsync/*`modul diintegrasikan ke dalam `APPSYNC_JS` dan tidak boleh dibundel dengan kode Anda. + Lingkungan `APPSYNC_JS` runtime mirip dengan NodeJS dalam kode itu tidak berjalan di lingkungan browser. + Anda dapat menyertakan peta sumber opsional. Namun, jangan sertakan konten sumber. Untuk mempelajari lebih lanjut tentang peta sumber, lihat [Menggunakan peta sumber](#source-maps). Misalnya, untuk menggabungkan kode resolver Anda yang terletak di`src/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 [TypeScript](https://www.typescriptlang.org/)adalah bahasa pemrograman yang dikembangkan oleh Microsoft yang menawarkan semua fitur bersama dengan sistem TypeScript pengetikan. JavaScript Anda dapat menggunakan TypeScript untuk menulis kode type-safe dan menangkap kesalahan dan bug pada waktu pembuatan sebelum menyimpan kode Anda. AWS AppSync`@aws-appsync/utils`Paket ini sepenuhnya diketik. `APPSYNC_JS`Runtime 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. AWS AppSync Anda dapat menggunakannya 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](https://www.typescriptlang.org/download)menginstal di proyek Anda. Kemudian, konfigurasikan pengaturan TypeScript transkompilasi Anda agar berfungsi dengan `APPSYNC_JS` runtime yang digunakan. [TSConfig](https://www.typescriptlang.org/tsconfig) 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, mengingat proyek dengan AWS AppSync kode Anda berada di`src/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](https://docs.amplify.aws/cli/) untuk menghasilkan tipe untuk skema Anda. Dari direktori tempat `schema.graphql` file Anda berada, jalankan perintah berikut dan tinjau petunjuk untuk mengonfigurasi 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) { ctx.args.description = ctx.args.description ?? 'created on ' + util.time.nowISO8601() return ddb.put({ 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 memanfaatkan. `Todo` 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({ title: { beginsWith: 'hello' }, description: { contains: 'created' }, }) extensions.setSubscriptionFilter(filter) return null } ``` ## Linting bundel Anda Anda dapat secara otomatis lint bundel Anda dengan mengimpor plugin. `esbuild-plugin-eslint` Anda kemudian dapat mengaktifkannya dengan memberikan `plugins` nilai yang memungkinkan kemampuan eslint. Di bawah ini adalah cuplikan yang menggunakan esbuild JavaScript API 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 memberikan peta sumber inline (`sourcemap`) dengan JavaScript kode Anda. Peta sumber berguna ketika Anda bundel JavaScript atau TypeScript kode dan ingin melihat referensi ke file sumber input Anda di log dan pesan JavaScript kesalahan runtime Anda. Anda `sourcemap` harus muncul di akhir kode Anda. Ini didefinisikan oleh satu baris komentar yang mengikuti format berikut: ``` //# sourceMappingURL=data:application/json;base64, ``` 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 sebaris di akhir setiap build tetapi tidak boleh menyertakan konten sumber. Sebagai konvensi, kami sarankan untuk tidak menyertakan konten sumber dalam Anda`sourcemap`. Anda dapat menonaktifkan ini di esbuild dengan menyetel `sources-content` ke`false`. 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 inline. Saat resolver Anda berjalan, entri berikut akan muncul di log: CloudWatch ![\[CloudWatch log entries showing resolver code execution with inline source map information.\]](http://docs.aws.amazon.com/id_id/appsync/latest/devguide/images/cloudwatch-sourcemap.jpeg) Melihat entri di CloudWatch log, Anda akan melihat bahwa fungsionalitas dari dua file telah dibundel bersama dan berjalan secara bersamaan. Nama file asli dari setiap file juga tercermin dengan jelas dalam log.