原文：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 开发工具畛域中最重要的方面，并帮忙您做出更理智的决策。
发表回复