Membina Fungsi CloudFront yang Boleh Diuji dengan TypeScript

Fungsi CloudFront AWS ialah alat yang berkuasa untuk menjalankan kod JavaScript ringan di tepi, membolehkan anda memanipulasi permintaan dan respons.

Walau bagaimanapun, AWS memerlukan fungsi ini ditulis dalam JavaScript Vanila, yang boleh mengehadkan pembangun yang lebih suka keselamatan jenis TypeScript dan sintaks moden.

Dalam artikel ini, saya akan membimbing anda melalui penyelesaian untuk menulis CloudFront Functions dalam TypeScript, mengimport fail tambahan dan mengujinya dengan berkesan.

Cabaran

Fungsi CloudFront mesti ditulis dalam JavaScript ES5, yang tidak mempunyai ciri moden dan keselamatan jenis TypeScript. Keperluan ini menimbulkan cabaran bagi pembangun yang ingin memanfaatkan manfaat TypeScript semasa masih menggunakan CloudFront.

Penyelesaian

Penyelesaian melibatkan penggunaan TypeScript untuk menulis Fungsi CloudFront anda dan kemudian memindahkannya ke JavaScript ES5. Pendekatan ini membolehkan anda mengekalkan faedah TypeScript semasa pembangunan dan ujian, sambil tetap memenuhi keperluan AWS untuk penggunaan.

Komponen Utama

Pilihan Pengkompil TypeScript:

1. Konfigurasikan pengkompil TypeScript untuk menyasarkan ES5 dan mengalih keluar sintaks modul, kerana persekitaran JavaScript CloudFront tidak menyokong semua modul masa jalan CommonJS.
2. Pengubah Tersuai: Gunakan pengubah TypeScript tersuai untuk mengalih keluar kata kunci eksport dan sifat __esModule, memastikan output serasi dengan CloudFront.
3. Skrip Binaan: Buat skrip binaan untuk mentranspile fail TypeScript kepada JavaScript, menggunakan pengubah tersuai.
4. Pengujian: Tulis ujian unit untuk kod TypeScript anda menggunakan rangka kerja ujian seperti Jest, memastikan logik anda kukuh sebelum digunakan.

Perlaksanaan

Di bawah ialah contoh ringkas tentang cara anda boleh menyediakan projek TypeScript anda untuk CloudFront Functions:

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

Pengubah Tersuai

Buat pengubah tersuai untuk mengalih keluar kata kunci eksport:

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

Bina Skrip

Skrip untuk mentranspile fail 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)));

Penggunaan

1. Bina fungsi CloudFront TypeScript anda sebelum digunakan:
   skrip ts-node/build-cloudfront.ts

2. Tentukan laluan ke output binaan fungsi anda:
   

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

Menguji dengan Jest

Sediakan Jest untuk menguji kod TypeScript anda:

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

Kesimpulan

Dengan memanfaatkan TypeScript dan transformer tersuai, anda boleh menulis, menguji dan menggunakan CloudFront Functions dengan ciri JavaScript moden dan faedah keselamatan menaip. Pendekatan ini bukan sahaja meningkatkan pengalaman pembangunan anda tetapi juga memastikan kod anda teguh dan boleh diselenggara.

Contoh kod kerja penuh yang boleh anda temui di GitHub saya

Ucapan terima kasih

Terima kasih khas kepada pengarang pakej typescript-remove-exports, yang memberi inspirasi kepada pendekatan pengubah tersuai yang digunakan dalam penyelesaian ini. Kerja mereka menyediakan asas untuk menyesuaikan kod TypeScript untuk memenuhi keperluan CloudFront.

Atas ialah kandungan terperinci Membina Fungsi CloudFront yang Boleh Diuji dengan TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!