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

使用 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 编译器选项:

配置 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 = (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 代码:

module.exports = {  testEnvironment: 'node',  transform: {    '^.+.tsx?$': 'ts-jest',  },  testMatch: ['**/__tests__/**/*.ts'],};

结论

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

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

致谢

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

以上就是使用 TypeScript 构建可测试的 CloudFront 函数的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1498920.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:53:27
下一篇 2025年12月19日 20:53:38

相关推荐

  • Playwright:用于高效测试的实用程序中的 GraphQL 请求

    使用 playwright 等端到端测试框架时,模拟 graphql 请求可以显着提高测试可靠性和速度。受到 jay freestone 优秀博客文章 stubbing graphql requests in playwright 的启发,我决定构建一个可重用的实用函数,允许灵活的 graphql …

    2025年12月19日
    000
  • NodeJS模块【简单说明】

    什么是模块? 假设您的 nodejs 项目中有一个 index.js 文件,您在其中使用了五个函数。但是,其中两个函数也可能在其他文件中使用。因此,您在项目中创建了三个文件,而不是一个文件: index.jsdependency1.jsdependency2.js 这里,每个javascript文件…

    2025年12月19日
    000
  • 现代低代码测试平台

    通过智能元素识别进行可视化记录和回放现代工具现在使用人工智能比传统选择器更可靠地识别元素。例如:蟒蛇 # traditional explicit selector approachbutton = driver.find_element(by.xpath, “//button[@id=’submi…

    2025年12月19日
    000
  • 智能登录系统

    使用 html、css、bootstrap 和 javascript 构建简单的登录系统 作为前端开发人员开始我的旅程既充满挑战又充满收获。我的第一个项目是创建一个基本的登录系统。虽然概念简单,但它使我能够应用前端开发的基本概念,并学习如何使用浏览器本地存储来存储用户数据。 这是我处理这个项目的方法…

    2025年12月19日
    000
  • JavaScript中如何正确处理Promise对象返回的字符串?

    如何处理 javascript 中从字符串获取的 “[object promise]” 结果 在 javascript 中,有时你会获得一个包含字符串的 promise 对象,但当你在控制台中显示它时,它显示为 “[object promise]”。这可能是因为你尝试直接返回 promise,而不是…

    2025年12月19日
    000
  • JavaScript异步函数:如何正确获取字符串返回值?

    如何从异步函数中正确取回字符串值? 在 javascript 中,使用 async 函数进行异步操作时,返回的值通常是一个 promise 对象。当 promise 对象被解析时,它会包含所请求数据。然而,直接返回 promise 对象会导致 [object promise] 的错误,因为试图将它当…

    2025年12月19日
    000
  • Vue中如何使用vue-jsonwebtoken库处理JWT?

    vue 中如何使用 jwt 在 vue 中使用 json web 令牌 (jwt) 需要一个特殊的库,因为原生 javascript 并不支持此功能。推荐使用 vue-jsonwebtoken 库,它专为在 vue 应用程序中使用 jwt 而设计。 安装 npm install vue-jsonwe…

    2025年12月19日
    000
  • JavaScript异步操作返回Promise对象而不是字符串怎么办

    解决“获得字符串但 return 值为 [object promise]”的问题 在 javascript 中,遇到 suchproblem 是因为异步处理导致的。当使用 await 关键字获取异步请求的结果时,javascript 实际上返回的是一个 promise 对象,而不是实际值。 在提供的…

    2025年12月19日
    000
  • 如何检测浏览器中的代码语言

    存储库:https://github.com/ray-d-song/guesslang-js 演示:https://ray-d-song.github.io/guesslang-js/ 最近在做一个叫EchoRSS的项目,有一个非常想要的功能,就是拦截订阅中的外部链接(阅读全文、引用等)并直接显示在…

    2025年12月19日
    000
  • 如何在非Vue项目中用vue-quill-editor粘贴纯文本?

    如何在非vue项目中使用vue-quill-editor实现粘贴纯文本功能? 问题介绍: 在非vue构建的纯javascript项目中,需要在vue-quill-editor中实现以下功能: 粘贴文本时,将富文本转换为纯文本并插入到光标位置替换光标选中的内容粘贴后光标位置移动到文本末尾忽略当前文本样…

    2025年12月19日
    000
  • 具有图片库和滚动功能的交互式单页网站

    具有图片库和滚动功能的交互式单页网站 标题:具有图片库和滚动功能的交互式单页网站https://vladivostok2000.netlify.app/ 此 Web 应用程序是一个动态、响应式、单页网站,具有现代图像库,具有模式功能、平滑滚动和“滚动到顶部”按钮,可增强用户体验。该网站采用移动优先的…

    好文分享 2025年12月19日
    000
  • 如何在非Vue项目中使用vue-quill-editor实现纯文本粘贴功能?

    在非vue项目中使用vue-quill-editor实现粘贴纯文本功能 非vue项目中引入vue-quill-editor时,粘贴富文本转换为纯文本并插入光标所在位置的需求,可以按照以下步骤解决: 首先,修改载入库的顺序,确保quill.js加载顺序在vue-quill-editor.js之前。 然…

    2025年12月19日
    000
  • 我对 use() 钩子的思考——深入探讨 React 的最新实验功能

    react 19 已经发布了,它带来了许多新功能,例如服务器组件、指令(使用客户端和使用服务器)、新钩子(例如 useoptimistic()、useformstatus() 和实验性 use()) hook,这就是我今天要讲的内容。 什么是 use() 挂钩? use() 钩子是一项新功能,可让您…

    2025年12月19日
    000
  • Web 开发趋势:构建可扩展的 Web 应用程序

    在当今的数字世界中,web 应用程序比以往任何时候都更加重要。无论您经营的是小型企业还是大型企业,拥有一个可扩展的 web 应用程序可以决定您的成功或失败。但到底什么是可扩展性,如何实现它呢?在这篇博客中,我们将探讨 web 开发中可扩展性的概念、为什么它很重要,以及如何使用简单有效的策略构建可扩展…

    2025年12月19日
    000
  • Vue项目TypeError: Cannot read properties of undefined (reading ‘Vue’) 报错如何排查?

    vue 项目遭遇 typeerror:务必排查代码中的动态调用 无法找到原因的报错可能会令人抓狂,特别是当编译结果是正常的。如果您遇到过这样的报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (readi…

    2025年12月19日
    000
  • 在多个注册表之间同步 NPM 包

    照片由 nicolas radzimski 在 unsplash 上拍摄 问题 我们的团队依靠内部 gitlab npm 注册表来管理包。这非常适合内部分发,但在某些情况下需要与外部协作者共享包。将包从内部注册表同步到外部注册表成为一项新的挑战。 我开始寻找解决方案,但像往常一样,遇到了一系列障碍,…

    2025年12月19日
    000
  • Nodejs 中的 Stripe 订阅集成 [终极指南]

    让 stripe 订阅与后端服务配合使用可能会很棘手,并且常常会导致开发人员所谓的可怕的“大脑分裂”——同步管理 stripe 的逻辑和您自己的后端数据。 在 vratix,我们在构建开源 stripe 订阅 api 模块时正面解决了这个问题。以下是我们如何在 node.js 中处理 stripe …

    2025年12月19日
    000
  • 我的 React 之旅:第 4 天

    今天的主题是深入研究对象和数组,这是 javascript 中的两种基本数据结构。了解他们的方法以及如何解构它们为简化代码开辟了新的可能性。以下是我所学到的总结: 对象对象是相关属性和方法的集合,使我们能够对数据进行有意义的分组。 示例对象: let user = { name: ‘segun’, …

    2025年12月19日
    000
  • React 组件中带有“as”属性的动态 HTML 标签

    假设您正在使用 react 构建一个可重用的 组件。该部分组件呈现一个 html 标记,因为您对其进行了硬编码。 但是,在某些情况下,您可能想使用其他标签,例如 html 标签。 这是一个典型的场景,当您希望 html 更加语义化并且 seo 友好时。 解决方案是让消费者决定应该使用哪个 html …

    2025年12月19日
    000
  • 如何在非Vue项目中使用vue-quill-editor实现纯文本粘贴?

    在非vue项目中使用vue-quill-editor实现粘贴纯文本功能 在一个非vue项目中,我们需要使用vue-quill-editor,并实现粘贴纯文本功能。具体要求如下: 粘贴富文本时,将其转换为纯文本。插入文本后,光标应移至插入文本后方。文本样式不受当前光标位置样式影响。 解决方案 可以使用…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信