使用 TypeScript 构建可测试的 CloudFront 函数

AWS CloudFront Functions 是一个强大的工具，用于在边缘运行轻量级 JavaScript 代码，允许您操作请求和响应。

但是，AWS 要求这些函数用 Vanilla JavaScript 编写，这对于喜欢 TypeScript 类型安全和现代语法的开发人员来说可能会受到限制。

在本文中，我将引导您完成在 TypeScript 中编写 CloudFront 函数、导入其他文件并有效测试它们的解决方案。

挑战

CloudFront Functions 必须使用 ES5 JavaScript 编写，缺乏 TypeScript 的现代功能和类型安全性。对于想要利用 TypeScript 的优势同时仍部署到 CloudFront 的开发人员来说，这一要求提出了挑战。

解决方案

解决方案涉及使用 TypeScript 编写 CloudFront 函数，然后将其转换为 ES5 JavaScript。这种方法允许您在开发和测试过程中保持 TypeScript 的优势，同时仍然满足 AWS 的部署要求。

关键部件

TypeScript 编译器选项：

1. 配置 TypeScript 编译器以 ES5 为目标并删除模块语法，因为 CloudFront 的 JavaScript 环境不支持所有 CommonJS 运行时模块。
2. 自定义转换器：使用自定义 TypeScript 转换器删除导出关键字和 __esModule 属性，确保输出与 CloudFront 兼容。
3. 构建脚本：创建一个构建脚本以将 TypeScript 文件转换为 JavaScript，应用自定义转换器。
4. 测试：使用 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)));

用法

1. 在部署之前构建您的 CloudFront Typescript 函数：
   ts-node 脚本/build-cloudfront.ts

2. 定义函数构建输出的路径：
   

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

结论

通过利用 TypeScript 和自定义转换器，您可以编写、测试和部署具有现代 JavaScript 功能和类型安全优势的 CloudFront Functions。这种方法不仅可以增强您的开发体验，还可以确保您的代码健壮且可维护。

完整的工作代码示例您可以在我的 GitHub 上找到

致谢

特别感谢 typescript-remove-exports 包的作者，它启发了此解决方案中使用的自定义转换器方法。他们的工作为调整 TypeScript 代码以满足 CloudFront 的要求奠定了基础。

以上是使用 TypeScript 构建可测试的 CloudFront 函数的详细内容。更多信息请关注PHP中文网其他相关文章！