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](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-hal berikut:
+ `APPSYNC_JS`hanya mendukung modul ECMAScript (ESM).
+ `@aws-appsync/*`modul diintegrasikan ke dalam `APPSYNC_JS` dan tidak boleh dibundel dengan kode Anda.
+ Lingkungan `APPSYNC_JS` runtime mirip dengan NodeJS karena kode 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 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 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/utils`Paket 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 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 ](https://www.typescriptlang.org/download) menginstal di proyek Anda. Kemudian, konfigurasikan pengaturan TypeScript transkompilasi Anda untuk bekerja dengan `APPSYNC_JS` runtime menggunakan [ TS ](https://www.typescriptlang.org/tsconfig) 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 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 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) {
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
}
```
## 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,
```
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 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 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.