Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Bündelung und Quellzuordnungen für die APPSYNC_JS-Laufzeit TypeScript

TypeScript verbessert die AWS AppSync Entwicklung durch Typsicherheit und frühzeitige Fehlererkennung. Sie können TypeScript Code lokal schreiben und in ihn transpilieren, JavaScript bevor Sie ihn mit der APPSYNC_JS Runtime verwenden. Der Prozess beginnt mit der Installation TypeScript und Konfiguration von tsconfig.json für die Umgebung. APPSYNC_JS Anschließend können Sie Bundling-Tools wie esbuild verwenden, um den Code zu kompilieren und zu bündeln. Die Amplify CLI generiert Typen aus dem GraphQL-Schema, sodass Sie diese Typen im Resolver-Code verwenden können.

Sie können benutzerdefinierte und externe Bibliotheken in Ihrem Resolver- und Funktionscode nutzen, sofern diese den Anforderungen entsprechen. APPSYNC_JS Bundling-Tools kombinieren Code in einer einzigen Datei zur Verwendung in. AWS AppSync Quellzuordnungen können zur Unterstützung des Debuggens hinzugefügt werden.

Nutzung von Bibliotheken und Bündelung Ihres Codes

In Ihrem Resolver und Funktionscode können Sie sowohl benutzerdefinierte als auch externe Bibliotheken nutzen, sofern diese den Anforderungen entsprechen. APPSYNC_JS Dadurch ist es möglich, vorhandenen Code in Ihrer Anwendung wiederzuverwenden. Um Bibliotheken zu verwenden, die durch mehrere Dateien definiert sind, müssen Sie ein Bündelungstool wie esbuild verwenden, um Ihren Code in einer einzigen Datei zu kombinieren, die dann auf Ihrem AWS AppSync Resolver oder Ihrer Funktion gespeichert werden kann.

Beachten Sie beim Bündeln Ihres Codes Folgendes:

Um beispielsweise Ihren Resolver-Code unter zu bündelnsrc/appsync/getPost.resolver.js, können Sie den folgenden esbuild-CLI-Befehl verwenden:

$ 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

Erstellen Sie Ihren Code und arbeiten Sie mit TypeScript

TypeScriptist eine von Microsoft entwickelte Programmiersprache, die neben dem TypeScript Tippsystem alle Funktionen bietet. JavaScript Sie können TypeScript es verwenden, um typsicheren Code zu schreiben und Fehler und Bugs bei der Erstellung abzufangen, bevor Sie Ihren Code speichern. AWS AppSync Das @aws-appsync/utils Paket ist vollständig typisiert.

Die APPSYNC_JS Laufzeit wird nicht TypeScript direkt unterstützt. Sie müssen Ihren TypeScript Code zuerst in Code transpilieren, den die APPSYNC_JS Runtime unterstützt, bevor Sie Ihren Code speichern. JavaScript AWS AppSync Sie können TypeScript es verwenden, um Ihren Code in Ihrer lokalen integrierten Entwicklungsumgebung (IDE) zu schreiben. Beachten Sie jedoch, dass Sie in der AWS AppSync Konsole keinen TypeScript Code erstellen können.

Stellen Sie zunächst sicher, dass Sie das TypeScript Programm in Ihrem Projekt installiert haben. Konfigurieren Sie dann mithilfe von TypeScript https://www.typescriptlang.org/tsconfig TSConfig Ihre Transkompilierungseinstellungen so, dass sie mit der APPSYNC_JS Laufzeit funktionieren. Hier ist ein Beispiel für eine tsconfig.json Basisdatei, die Sie verwenden können:

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

Sie können dann ein Bündelungstool wie esbuild verwenden, um Ihren Code zu kompilieren und zu bündeln. Bei einem Projekt, bei dem sich Ihr AWS AppSync Code unter befindet, können Sie beispielsweise den folgenden Befehl verwendensrc/appsync, um Ihren Code zu kompilieren und zu bündeln:

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

Verwenden von Amplify Codegen

Sie können die Amplify CLI verwenden, um die Typen für Ihr Schema zu generieren. Führen Sie in dem Verzeichnis, in dem sich Ihre schema.graphql Datei befindet, den folgenden Befehl aus und überprüfen Sie die Eingabeaufforderungen, um Ihren Codegen zu konfigurieren:

$  npx @aws-amplify/cli codegen add

Um Ihren Codegen unter bestimmten Umständen (z. B. wenn Ihr Schema aktualisiert wird) neu zu generieren, führen Sie den folgenden Befehl aus:

$ npx @aws-amplify/cli codegen

Sie können dann die generierten Typen in Ihrem Resolver-Code verwenden. Zum Beispiel angesichts des folgenden Schemas:

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

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

type Query {
  listTodos: Todo
}

Sie könnten die generierten Typen in der folgenden AWS AppSync Beispielfunktion verwenden:

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
}

Verwendung von Generika in TypeScript

Sie können Generika mit mehreren der bereitgestellten Typen verwenden. Das folgende Snippet ist beispielsweise ein Typ: Todo

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

Sie können einen Resolver für ein Abonnement schreiben, das Folgendes nutzt. Todo In Ihrer IDE helfen Ihnen Typdefinitionen und Hinweise zur automatischen Vervollständigung dabei, das toSubscriptionFilter Transformationsprogramm richtig zu verwenden:

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
}

Deine Bündel sind vollgestopft

Du kannst deine Bundles automatisch linten, indem du das Plugin importierst. esbuild-plugin-eslint Sie können es dann aktivieren, indem Sie einen plugins Wert angeben, der die Eslint-Funktionen aktiviert. Unten finden Sie einen Ausschnitt, der die JavaScript Esbuild-API in einer Datei mit dem Namen verwendet: 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 })],
})

Verwenden von Quellkarten

Sie können Ihrem JavaScript Code eine Inline-Quellkarte (sourcemap) beifügen. Quellzuordnungen sind nützlich, wenn Sie Pakete JavaScript oder TypeScript Code erstellen und Verweise auf Ihre Eingabequelldateien in Ihren Protokollen und JavaScript Laufzeitfehlermeldungen sehen möchten.

Ihre sourcemap müssen am Ende Ihres Codes erscheinen. Es wird durch eine einzelne Kommentarzeile definiert, die dem folgenden Format folgt:

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

Hier ein Beispiel:

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

Quellzuordnungen können mit esbuild erstellt werden. Das folgende Beispiel zeigt Ihnen, wie Sie die JavaScript esbuild-API verwenden, um eine Inline-Quellkarte einzubeziehen, wenn Code erstellt und gebündelt wird:

/* 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 })],
})

Insbesondere geben die sourcesContent Optionen sourcemap und an, dass eine Quellkarte am Ende jedes Builds in einer Zeile hinzugefügt werden soll, aber den Quellinhalt nicht enthalten sollte. Als Konvention empfehlen wir, Quellinhalte nicht in Ihre Liste aufzunehmensourcemap. Sie können dies in esbuild deaktivieren, indem Sie sources-content auf false setzen.

Um zu veranschaulichen, wie Quellzuordnungen funktionieren, sehen Sie sich das folgende Beispiel an, in dem ein Resolver-Code auf Hilfsfunktionen aus einer Hilfsbibliothek verweist. Der Code enthält Protokollanweisungen im Resolvercode und in der Hilfsbibliothek:

. /src/default.resolver.ts (dein Resolver)

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 (eine Hilfsdatei)

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..')
}

Wenn Sie die Resolver-Datei erstellen und bündeln, enthält Ihr Resolver-Code eine Inline-Quellzuordnung. Wenn Ihr Resolver ausgeführt wird, erscheinen die folgenden Einträge in den Protokollen: CloudWatch

Wenn Sie sich die Einträge im CloudWatch Protokoll ansehen, werden Sie feststellen, dass die Funktionen der beiden Dateien gebündelt wurden und gleichzeitig ausgeführt werden. Der ursprüngliche Dateiname jeder Datei spiegelt sich auch deutlich in den Protokollen wider.