TypeScript 构建过程

未匹配的标注

本框架的目标之一是为 TypeScript 提供一流的支持。这不仅仅是您在编写代码时可以享受的静态类型和 IntelliSense。

我们还确保您在开发中或应用到生产环境期间无需安装任何额外的构建工具来编译您的代码。

注:本指南假设您对 TypeScript 和构建工具生态系统有所了解。

常见的打包方式

以下是开发用 TypeScript 编写的 Node.js 应用程序的一些常用方法。

使用 tsc

将 TypeScript 代码编译为 JavaScript 的最简单方法是使用官方的 tsc 命令行。

  • 在开发过程中,您可以使用 tsc --watch 命令在观察模式下编译代码。
  • 接下来,您可以获取 nodemon 来查看编译输出( JavaScript 代码)并在每次更改时重新启动 HTTP 服务器。此时,您已经有两个观察者在运行。
  • 此外,您可能必须编写 自定义脚本以复制静态文件templates 到构建文件夹,以便您的运行时 JavaScript 代码可以找到并引用它。

使用 ts-node

ts-node 确实改善了开发体验,因为它在内存中编译代码并且不会将其输出到磁盘上。因此,您可以结合 ts-nodenodemon 并以一等公民的身份运行您的 TypeScript 代码。

但是,对于较大的应用程序,ts-node 可能会变慢,因为它必须在每次文件更改时重新编译整个项目。相比之下,tsc只重新构建更改的文件。

请注意,ts-node 是一个仅用于开发的工具。因此,您仍然必须使用 tsc 将代码编译为 JavaScript,并编写自定义脚本来复制用于生产环境的静态文件。


使用 Webpack

在尝试了上述方法之后,您可能会决定尝试一下 Webpack。 Webpack 是一个构建工具,可以提供很多东西。但是,它也有其自身的缺点。

  • 首先,使用 Webpack 捆绑后端代码是一种矫枉过正的做法。您可能不需要其中创建的 90% 的 Webpack 功能来满足前端生态系统要求。
  • 您可能需要重复 webpack.config.jstsconfig.json 文件中的一些配置,这些文件需要注意或忽略。
  • 此外,我们甚至不确定您是否可以让 Webpack 不打包 整个后端到一个文件中.

AdonisJS 方案

我们不是过于复杂的构建工具和尖端编译器的忠实拥护者。拥有平静的开发体验比公开配置去进行细枝末节的调整更有价值。

我们起步于以下目标:

  • 坚持使用 TypeScript 的官方编译器,不要使用任何其他工具,如 esbuildswc 。它们是不错的选择,但它们不支持某些 TypeScript 功能(例如 Transformers API)。
  • 现有的 tsconfig.json 文件应管理所有配置。
  • 如果代码在开发环境中可以运行,那么它也应该在可以生产环境中运行。意思是,不要使用两种完全不同的开发和生产工具,然后教人们如何调整他们的代码。
  • 添加对将静态文件复制到最终构建结果文件夹的轻量级支持。通常,这些将是 Edge 模板。
  • 确保 REPL 也可以作为一等公民运行 TypeScript 代码。除 ts-node 外,上述所有方法都无法直接编译和评估 TypeScript 代码。

内存开发编译器

与 ts-node 类似,我们创建了 @adonisjs/require-ts 模块。它使用 TypeScript 编译器 API,这意味着所有 TypeScript 功能都可以工作,并且您的 tsconfig.json 文件是唯一的依据来源。

但是, @adonisjs/require-ts 在以下方面与 ts-node 略有不同。

  • 我们在开发过程中不执行任何类型检查,并希望您同样依赖您的代码编辑器。
  • 我们将 编译输出 存储在缓存文件夹中。所以下次你的服务器重启时,我们不会重新编译未更改的文件。这确实大幅度提升了速度。
  • 对于在某些时候必须删除缓存的文件,@adonisjs/require-ts 模块公开了 AdonisJS 文件的观察者 帮助方法 用于清除最近更改文件的缓存。
  • 清除缓存仅对要求磁盘空间至关重要。它不会影响程序的行为。

每次运行 node ace serve --watch 时,我们都会启动 HTTP 服务器以及内存中的编译器,并观察文件系统的文件更改。

独立生产环境构建

您可以通过运行 node ace build --production 命令来构建用于生产环境的代码。它执行以下操作:

  • 清理现有的 build 目录(如果有)。
  • 使用 Webpack Encore 构建您的前端资源(仅在已安装的情况下)。
  • 使用 TypeScript 编译器 API 将 TypeScript 代码编译为 JavaScript 并将其写入 build 文件夹中。 这里我们将执行类型检查并报告 TypeScript 错误
  • 将所有静态文件复制到 build 文件夹。静态文件在 .adonisrc.json 文件中的 metaFiles 数组内注册。
  • package.jsonpackage-lock.json/yarn.lock 复制到 build 文件夹。
  • 生成 ace-manifest.json 文件。它包含了您的项目正在使用的所有命令的索引。
  • 以上。

为什么我们称它为独立构建?

在运行 build 命令后,输出文件夹将包含在生产环境中部署应用程序所需的一切。

您可以在没有 TypeScript 源代码的情况下复制 build 文件夹,并且您的应用程序可以正常工作。

创建一个独立的 build 文件夹确实有助于减少您在生产服务器上部署的代码的大小。当您将应用程序打包为 Docker 映像时,这通常很有用。然而,为了保持应用的轻量,没有必要在你的 Docker 镜像中同时拥有源代码和构建输出。


注意事项

  • 构建后,输出文件夹将成为 JavaScript 应用程序的根目录。
  • 您必须经常 cdbuild 文件夹,然后再运行您的应用程序。
    cd build
    node server.js
  • 您必须在 build 文件夹中安装仅用于生产环境的依赖项。

    cd build
    npm ci --production
  • 我们不会将 .env 文件复制到输出文件夹。因为环境变量是不可转移的,所以必须为生产环境单独定义环境变量。

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/adonisjs/5.x/fu...

译文地址:https://learnku.com/docs/adonisjs/5.x/fu...

上一篇 下一篇
贡献者:2
讨论数量: 0
发起讨论 查看所有版本


暂无话题~