嗨，大家好！这里是道长王jj~ 🎩🧙♂️
JavaScript 生态系统一直在不断创新，最近的一位游戏规则改变者是 esbuild，这是一个极速的 JavaScript 和 TypeScript 打包器。与传统的 TypeScript 编译器（如 tsc）不同，esbuild 提供了极快的编译速度和简单的配置。本文将深入探讨如何使用 esbuild 处理 TypeScript 编译，并强调其提供的丰富参数。
为什么选择 esbuild 而不是 tsc？
- 性能：esbuild 利用 Go 语言的性能优势，相比其他打包器和编译器，提供了惊人的快速打包时间。
- 简单性：esbuild 的配置相对简单，可以轻松地集成到现有项目中。
- 灵活性：esbuild 提供多种选项，如输出不同格式、设置平台目标等。
配置 esbuild 用于 TypeScript
首先，安装esbuild：
npm install esbuild --save-dev
下面是推荐的在 NPM 脚本中配置 esbuild 的示例：
{
"scripts": {
"build": "esbuild `find src \\( -name '*.ts' \\)` --platform=node --target=esnext --outdir=build --format=cjs",
"build:watch": "npm run build -- --watch",
"start": "node build | npx pino-pretty",
"start:watch": "node --watch -r dotenv/config build | npx pino-pretty",
"dev": "concurrently \"npm:build:watch\" \"npm:start:watch\""
}
}
解释一下 esbuild 的参数：
- 输入文件：
find src \\( -name '*.ts' \\)部分会定位src目录下所有 TypeScript 文件，并将它们提供给 esbuild。 - platform：
--platform=node标志确保生成的代码与 Node.js 环境兼容。其他可能的值包括browser，用于特定于浏览器的输出。 - target：使用
--target=esnext，我们指示 esbuild 输出最新版本的 ECMAScript。这在想要利用最新语言功能时非常有用。其他值可以是es6、es2016等，具体取决于您的需求。 - outdir：
--outdir=build选项指定我们编译文件的输出目录。您可以将build替换为您选择的任何目录名称。 - format：
--format=cjs命令指示要使用的模块系统。我们在这里选择了 CommonJS（cjs），但 esbuild 还支持esm（ES 模块）、iife等。 - watch：通过添加
--watch，esbuild 可以监听文件更改并在需要时重新编译。这在开发过程中非常有用，无需手动触发重新编译。 - Concurrently：虽然不是 esbuild 的参数，但对我们的设置至关重要。
concurrently可以同时运行多个命令。在我们的脚本中，它允许我们同时监视和构建，然后运行我们的应用程序。
为什么选择 esbuild
- 使用 esbuild 可以显著降低编译时间。
- 将打包和编译合并为一个工具，简化了我们的流程。
- esbuild 的参数使开发人员能够根据需求细粒度地控制构建过程。
通过选择 esbuild 作为首选的 TypeScript 编译器，可以加速开发周期，简化构建流程。参数数组允许根据具体需求进行细致的构建配置。如果您尚未尝试过，现在可能是从传统的 tsc 切换的好时机。
🎉 你觉得怎么样？这篇文章可以给你带来帮助吗？当你处于这个阶段时，你发现什么对你帮助最大？如果你有任何疑问或者想进一步讨论相关话题，请随时发表评论分享您的想法，让其他人从中受益。🚀✨
