使用 TypeScript 建立可測試的 CloudFront 函數-js教程-PHP中文網

Building Testable CloudFront Functions with TypeScript

AWS CloudFront Functions 是一個強大的工具，用於在邊緣運行輕量級 JavaScript 程式碼，讓您可以操作請求和回應。

但是，AWS 要求這些函數用 Vanilla JavaScript 編寫，這對於喜歡 TypeScript 類型安全性和現代語法的開發人員來說可能會受到限制。

在本文中，我將引導您完成在 TypeScript 中編寫 CloudFront 函數、匯入其他檔案並有效測試它們的解決方案。

挑戰

CloudFront Functions 必須使用 ES5 JavaScript 來撰寫，缺乏 TypeScript 的現代功能和型別安全性。對於想要利用 TypeScript 的優勢同時仍部署到 CloudFront 的開發人員來說，這項要求提出了挑戰。

解決方案

解決方案涉及使用 TypeScript 編寫 CloudFront 函數，然後將其轉換為 ES5 JavaScript。這種方法可讓您在開發和測試過程中保持 TypeScript 的優勢，同時仍符合 AWS 的部署要求。

關鍵零件

TypeScript 編譯器選項：

設定 TypeScript 編譯器以 ES5 為目標並刪除模組語法，因為 CloudFront 的 JavaScript 環境不支援所有 CommonJS 執行時期模組。
自訂轉換器：使用自訂 TypeScript 轉換器刪除匯出關鍵字和 __esModule 屬性，確保輸出與 CloudFront 相容。
建置腳本：建立一個建置腳本以將 TypeScript 檔案轉換為 JavaScript，套用自訂轉換器。
測試：使用 Jest 等測試框架為 TypeScript 程式碼編寫單元測試，確保部署前邏輯正確。

執行

以下是如何為 CloudFront Functions 設定 TypeScript 專案的簡化範例：

TypeScript 配置 (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"]
}

登入後複製

客製化變壓器

建立自訂轉換器以刪除匯出關鍵字：

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);
  };
};

登入後複製

建置腳本

用於轉譯 TypeScript 檔案的腳本：

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)));

登入後複製

用法

在部署之前建立您的 CloudFront Typescript 函數：
ts-node 腳本/build-cloudfront.ts
定義函數建構輸出的路徑：

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,
})

登入後複製

使用 Jest 進行測試

設定 Jest 來測試您的 TypeScript 程式碼：

{
  "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"]
}

登入後複製