共计 3357 个字符，预计需要花费 9 分钟才能阅读完成。
原文：https://transitivebullsh.it/javascript-dev-tools-in-2022
在 2022 年，每一位 JS / TS 开发者都应该晓得的最重要的开发工具的分类，包含最相干的衡量，以及一些集体倡议。
在软件工程的世界中，对所应用的工具有一个明确的理解十分重要。
然而 JS 工具总是在疾速的变动着，2022 年也不例外。
因而，我想把你在 2022 年应该晓得的最重要的工具合成开来，它们最相干的衡量是什么，并提供一些集体倡议。
咱们将从最低级别的工具开始，而后从那里逐渐降级到更高级别的工具。让咱们开始💪。
开发工具
编译器
编译器负责将输出代码转换为某种指标输入格局。出于咱们的目标，咱们关注的是那些反对将古代 JavaScript 和 TypeScript 转换成特定版本的 ECMAscript 的编译器，这些 ECMAscript 兼容浏览器和最新版本的 Node.js。
| 名称 | 形容 | 星数 | 语言 | 速度 | 成熟度 | 许可 |
|---|---|---|---|---|---|---|
| tsc | TS 官网编译器 | 79,300 | TS | slow | 十分成熟 | Apache 2.0 |
| esbuild | 疾速 JS/TS 编译器 | 31,200 | Go | fast | 能够 | MIT |
| swc | 疾速 JS/TS 编译器 | 21,300 | Rust | fast | 能够 | Apache 2.0 |
| babel | JS 编译器（TS 插件） | 40,700 | JS | slow | 十分成熟 | MIT |
对于这个畛域最重要的一点是，它正在经验一个微小的转变，从用高级解释语言编写的编译器 tsc 和 babel，到用更快的编译语言编写的编译器 swc 和 esbuild。
这种转变导致编译工夫缩短了 10-100 倍，如下图所示：
如果你正在更新你的开发工具技术栈，或者在 2022 年开始一个新我的项目，那么你会想要思考在底层应用这些下一代编译器之一。它们可能不像 TypeScript 官网编译器 tsc 和 babel 那样成熟，但构建速度快 100 倍的益处是不能低估的。
请留神，swc和 esbuild 都不进行类型查看。他们只是尽可能疾速和无效地将代码转换成所需的输入格局。目前，如果你正在应用 TypeScript，你简直总是须要将官网的TypeScript 编译器作为你的工具链的一部分，以保障你能最大限度地利用 TypeScript 的动态类型查看。值得一提的是，swc的作者 kdy1dev 正致力于将 tsc 移植到 Go 中，以打消在许多状况下对 tsc 的需要，因为 tsc 的编译速度往往是大多数工具链中的瓶颈。
SWC vs esbuild
swc和 esbuild 都是十分优良的、十分快的开源 JS / TS 编译器。它们的性能相当(参考性能比拟)，并被一些世界上最大的公司常常用于生产环境。
在这两个编译器之间做出抉择，更多地取决于构建在这些编译器之上的高级工具，而不是间接在它们之间做出抉择。
应用 swc 值得注意的我的项目：
- Vercel and Next.js
- Deno’s linter, formatter, and docs
- Parcel
应用 esbuild 值得注意的我的项目：
- Vite
- Nuxt.js
tsup
在软件工程中，诸如“技术 A 比技术 B 更好”这样的简略叙述很少有太大的价值。相同，应该依据我的项目状况来决定应用哪个工具。在很多状况下，你最好应用官网的 TypeScript 编译器或 babel。
要成为一名更好的软件工程师，通常须要彻底了解这些类型的决策所波及的衡量，并依据我的项目、团队和业务需要的特定束缚来均衡这些衡量。
打包器(Bundlers)
打包器负责将所有的输出源文件打包成易于应用的输入格局。打包程序最常见的两个用例是为 web 利用打包资源和打包成库文件。
| 名称 | 形容 | 星数 | 优化了 | 许可 |
|---|---|---|---|---|
| Webpack | 行业标准打包器 | 60,100 | web 利用、库 | MIT |
| Rollup | 针对库打包器 | 21,400 | 库 | MIT |
| Parcel | 零配置 web 构建工具 | 41,000 | web 利用、库 | MIT |
像 webpack 和 rollup 这样的打包工具是古代 JS 工具链的“瑞士军刀”。它们都具备极强的可扩展性，具备保护良好的插件，笼罩了大多数次要用例。例如，应用下面列出的任何一个风行的编译器，通过 webpack 或 rollup 转译 TS 代码，都是绝对简略的。
另一方面，Parcel 提供了一种简直为零配置的打包办法。它关注的是简略性而不是可扩展性，并在底层应用 esbuild 作为编译器。
请留神，swc 和 esbuild 也都提供了根本的打包性能，与这些打包器相比，它们的性能还不够全，不能包含在这个列表中。
要理解这些打包器的更具体的比拟，请查看 tooling.report。
开发库
这些工具旨在帮忙库作者打包和公布古代的 NPM 包。
| 名称 | 形容 | 星数 | 编译器 | 打包器 | 许可 |
|---|---|---|---|---|---|
| tsup | 由 esbuild 反对的疾速 TS 库打包器 | 1,800 | esbuild | rollup | MIT |
| tsdx | 用于 TS 包开发的零配置 CLI | 9,500 | babel | rollup | MIT |
| microbundle | 用于渺小模块的零配置打包器 | 6,800 | babel | rollup | MIT |
| Vite | 下一代前端工具(库模式) | 40,000 | esbuild | rollup | MIT |
| preconstruct | 在 monorepos 中轻松开发和构建代码 | 720 | babel | rollup | MIT |
| unbuild | 对立的 javascript 构建零碎 | 440 | esbuild | rollup | MIT |
如果你在 2022 年开发一个新的库，你可能会想应用这些更高级的工具来简化你的工作流程。
- 如果你有一个 TS 包，并且想利用 esbuild 提供的极快的构建速度，那么 tsupp 是一个很好的抉择。
- 如果您有一个 TS 包，并且须要一些额定的性能，那么 tsdx 是一个很好的抉择。
- 如果你有一个 TS 或 JS 包，那么 microbundle 也是一个不错的抉择。
- Vite次要是一个构建前端 web 应用程序的工具，但它也是一个牢靠的全方位抉择，还包含对输入库的反对。
我集体偏向于对所有新的 TS 包应用tsup，次要是因为一旦你体验了 100 倍的疾速构建，就很难再思考切换回其余版本了。
更多资讯
这些工具中的大多数目前没有为利用 composite project references 的 TS monorepos 提供很好的反对。目前，我对这种状况的倡议是应用 tsc 进行类型检查和生成 .d.ts 类型（应用 emitDeclarationOnly: true）和 tsup 来编译每个子包中的代码。无关此办法的示例，请查看 react-notion-x monorepo 我的项目（我的 OSS 我的项目之一）。
公布古代 NPM 包是一个奥妙的话题，远远超出了本文的范畴。无关 ESM、commonjs、导出等的更多信息，请参阅：
- 要反对 Node.js ESM 须要什么？
- 公布和应用 ESM 包
Web app 开发
这些高级工具和框架旨在帮忙开发人员构建古代 web 应用程序，而无需放心所有细节。
| 名称 | 形容 | 星数 | 编译器 | 打包器 | 框架 |
|---|---|---|---|---|---|
| Next.js | 用于生产的 React 框架 | 84,000 | swc | webpack | react |
| Nuxt.js | 直观的 Vue 框架 | 39,000 | esbuild | rollup | vue |
| Parcel | 零配置 web 构建工具 | 41,000 | swc | custom | react vue |
| Vite | 下一代前端工具 | 40,000 | esbuild | rollup | react vue svelte |
| Snowpack | ESM 驱动的前端构建工具 | 20,000 | esbuild | custom | react vue svelte |
| Create React App | 通过命令设置古代 Web 应用程序 | 94,000 | babel | webpack | react |
| SvelteKit | 构建 Svelte 应用程序的最快办法 | 7,700 | esbuild | rollup | svelte |
应用 swc 和esbuild构建的我的项目数量大致相同。webpack和 rollup 的状况也是如此。
如果你打算在 2022 年应用 React 开发一个新的网页利用，那么我强烈推荐应用Next.js。它领有最好的反对，最沉闷的社区，并与世界领先的古代 web 利用部署平台 Vercel 严密集成。
如果你正在应用 Vue 开发一个新的 web 应用程序，那么 nuxt.js 和 Vite 都是很好的抉择。
如果你想要更轻的货色，那就试一试 Parcel。🤗
总结
在过来的 10 年里，古代 web 开发曾经有了显著的倒退。明天的开发人员很侥幸，可能领有如此宽泛的令人惊叹的、保护良好的工具可供选择。
心愿这篇文章可能帮忙您剖析以后 JS/TS 开发工具畛域中最重要的方面，并帮忙您做出更理智的决策。
