Erstellen testbarer CloudFront-Funktionen mit TypeScript

AWS CloudFront Functions sind ein leistungsstarkes Tool zum Ausführen von leichtgewichtigem JavaScript-Code am Edge, mit dem Sie Anfragen und Antworten bearbeiten können.

AWS erfordert jedoch, dass diese Funktionen in Vanilla-JavaScript geschrieben sind, was für Entwickler, die die Typsicherheit und moderne Syntax von TypeScript bevorzugen, einschränkend sein kann.

In diesem Artikel führe ich Sie durch eine Lösung, um CloudFront-Funktionen in TypeScript zu schreiben, zusätzliche Dateien zu importieren und sie effektiv zu testen.

Herausforderung

CloudFront-Funktionen müssen in ES5-JavaScript geschrieben werden, dem die modernen Funktionen und die Typsicherheit von TypeScript fehlen. Diese Anforderung stellt eine Herausforderung für Entwickler dar, die die Vorteile von TypeScript nutzen und gleichzeitig auf CloudFront bereitstellen möchten.

Lösung

Die Lösung besteht darin, TypeScript zum Schreiben Ihrer CloudFront-Funktionen zu verwenden und diese dann in ES5-JavaScript zu transpilieren. Mit diesem Ansatz können Sie die Vorteile von TypeScript während der Entwicklung und beim Testen beibehalten und gleichzeitig die AWS-Anforderungen für die Bereitstellung erfüllen.

Schlüsselkomponenten

TypeScript-Compiler-Optionen:

1. Konfigurieren Sie den TypeScript-Compiler für ES5 und entfernen Sie die Modulsyntax, da die JavaScript-Umgebung von CloudFront nicht alle CommonJS-Laufzeitmodule unterstützt.
2. Benutzerdefinierte Transformer: Verwenden Sie benutzerdefinierte TypeScript-Transformatoren, um Exportschlüsselwörter und __esModule-Eigenschaften zu entfernen und sicherzustellen, dass die Ausgabe mit CloudFront kompatibel ist.
3. Build-Skript: Erstellen Sie ein Build-Skript, um TypeScript-Dateien in JavaScript zu transpilieren und dabei die benutzerdefinierten Transformatoren anzuwenden.
4. Testen: Schreiben Sie Unit-Tests für Ihren TypeScript-Code mit einem Test-Framework wie Jest und stellen Sie vor der Bereitstellung sicher, dass Ihre Logik solide ist.

Durchführung

Unten finden Sie ein vereinfachtes Beispiel dafür, wie Sie Ihr TypeScript-Projekt für CloudFront Functions einrichten können:

TypeScript-Konfiguration (tsconfig.json)

{
  "compilerOptions": {
    "target": "es5", // MUST BE ES5 for CloudFront Function support  https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/functions-javascript-runtime-features.html#writing-functions-javascript-features-core
    "module": "commonjs", // Beware CloudFront JS environment doesn't contain all commonjs runtime modules    
    "lib": ["es5"],
    "strict": true,
    "removeComments": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Benutzerdefinierter Transformator

Erstellen Sie einen benutzerdefinierten Transformer, um Exportschlüsselwörter zu entfernen:

import * as ts from 'typescript';

export const removeExportTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => {
  return (sourceFile) => {
    const visitor: ts.Visitor = (node) => {
      if (ts.isModifier(node) && node.kind === ts.SyntaxKind.ExportKeyword) {
        return undefined;
      }
      return ts.visitEachChild(node, visitor, context);
    };
    return ts.visitNode(sourceFile, visitor);
  };
};

Skript erstellen

Ein Skript zum Transpilieren von TypeScript-Dateien:

import * as ts from 'typescript';
import * as fs from 'fs';
import * as path from 'path';
import { removeExportTransformer } from './removeExportTransformer';

const compilerOptions: ts.CompilerOptions = {
  module: ts.ModuleKind.None,
  target: ts.ScriptTarget.ES5,
  strict: true,
  removeComments: true,
  lib: ['es5'],
};

function transpileFile(filePath: string) {
  const source = fs.readFileSync(filePath, 'utf-8');
  const result = ts.transpileModule(source, {
    compilerOptions,
    transformers: { before: [removeExportTransformer] },
  });
  const outputFilePath = filePath.replace('.ts', '.js');
  fs.writeFileSync(outputFilePath, result.outputText);
}

const files = fs.readdirSync('./src').filter(file => file.endsWith('.ts'));
files.forEach(file => transpileFile(path.join('./src', file)));

Verwendung

1. Erstellen Sie Ihre CloudFront Typescript-Funktion vor der Bereitstellung:
   ts-node scripts/build-cloudfront.ts

2. Definieren Sie den Pfad zu Ihrer Funktions-Build-Ausgabe:
   

const function= new aws_cloudfront.Function(stack, 'CloudfrontFunctionId', {
  functionName: 'cloudfront_function',
  code: aws_cloudfront.FunctionCode.fromFile({
    filePath: `dist/cloudfrontFunction.js`,
  }),
  runtime: aws_cloudfront.FunctionRuntime.JS_2_0,
})

Testen mit Jest

Richten Sie Jest ein, um Ihren TypeScript-Code zu testen:

{
  "compilerOptions": {
    "target": "es5", // MUST BE ES5 for CloudFront Function support  https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/functions-javascript-runtime-features.html#writing-functions-javascript-features-core
    "module": "commonjs", // Beware CloudFront JS environment doesn't contain all commonjs runtime modules    
    "lib": ["es5"],
    "strict": true,
    "removeComments": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Abschluss

Durch die Nutzung von TypeScript und benutzerdefinierten Transformatoren können Sie CloudFront-Funktionen mit modernen JavaScript-Funktionen und Vorteilen der Typsicherheit schreiben, testen und bereitstellen. Dieser Ansatz verbessert nicht nur Ihre Entwicklungserfahrung, sondern stellt auch sicher, dass Ihr Code robust und wartbar ist.

Vollständiges Beispiel für einen funktionierenden Code finden Sie auf meinem GitHub

Danksagungen

Besonderer Dank geht an die Autoren des Pakets typescript-remove-exports, das den in dieser Lösung verwendeten Ansatz für benutzerdefinierte Transformatoren inspiriert hat. Ihre Arbeit bildete die Grundlage für die Anpassung des TypeScript-Codes an die Anforderungen von CloudFront.

Das obige ist der detaillierte Inhalt vonErstellen testbarer CloudFront-Funktionen mit TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!