2022年JavaScript开发工具比较 - bullsh


JS 工具的格局总是在以如此快的速度变化，2022 年也不例外。将从最低级别的工具开始，然后从那里逐步升级到更高级别的工具。

编译器
编译器负责将您的输入代码转换为某种目标输出格式。下面是专注于支持将现代 JavaScript 和 TypeScript 转换为特定版本的 ECMAscript 的编译器，这些版本与浏览器和最新版本的 Node.js 兼容。

  • tsc：官方 TypeScript 编译器，速度慢，但很成熟
  • esbuild：快速 JS/TS 编译器，速度快
  • swc：快速 JS/TS 编译器，速度快
  • babel：JS 编译器（带插件的 TS），速度慢，很成熟

编译器领域正经历着从tsc和babel这样用高级解释语言编写的编译器到swc和esbuild这样用更快的编译语言编写的编译器的巨大转变。
这种转变导致了10-100倍的编译速度提升。

如果你正在更新你的开发工具栈或在2022年开始一个新项目，那么你会考虑在引擎盖下使用这些下一代编译器之一。
它们可能不如官方的typescript编译器和babel成熟，但拥有100倍的编译速度所带来的好处是不可低估的。

请注意，swc和esbuild都不进行类型检查。它们只是尽可能快速有效地将代码转译成所需的输出格式。
目前，如果你正在使用TypeScript，你几乎总是需要将官方的TypeScript编译器作为你的工具链的一部分，以保证你能从TypeScript的静态类型检查中获得最大收益。
值得一提的是，swc的作者kdy1dev正在努力将tsc移植到Go，以便在许多情况下消除对tsc的需求，因为它往往是大多数工具链的瓶颈。

SWC vs esbuild
swc和esbuild都是优秀的、快速的、开源的JS/TS编译器。它们的性能不相上下，而且都被一些世界上最大的公司定期用于生产。
你对这两个编译器的选择很可能是由建立在这些编译器之上的高级工具决定的，而不是直接选择它们。

使用swc的著名项目：


使用esbuild的著名项目：

在软件工程中，诸如 "A技术比B技术好 "这样的方便说法很少有价值。相反，你应该试着始终牢记上下文。在这种情况下，有很多情况下，你最好使用官方的TypeScript编译器或babel。

Bundlers
捆绑器Bundlers负责将你所有的输入源文件捆绑在一起，使其成为一种易于消费的输出格式。捆绑器的两个最常见的用例是捆绑库和捆绑网络应用的资源。

  • Webpack：行业标准捆绑器
  • Rollup：针对Bundler 库包
  • Parcel：Web 的零配置构建工具

像webpack和rollup这样的捆绑器是现代JS工具链的利器。它们都具有极强的扩展性，维护良好的插件涵盖了大多数主要的使用情况。例如，使用上述任何一种流行的编译器，用webpack或rollup转译TS代码，都是比较简单的。
另一方面，Parcel提供了一个主要是零配置的捆绑方法。它专注于简单性，而不是可扩展性，并使用esbuild作为引擎盖下的编译器。
请注意，swc和esbuild也都提供了基本的捆绑功能，尽管与这些替代方案相比，它们的功能还不够全面，不足以被列入这个列表。
对于这些捆绑器的更详细的比较，请查看tooling.report。

库工具
这些工具旨在帮助图书馆作者捆绑和发布现代NPM包。

  • tsup：由esbuild提供支持的快速 TypeScript 库捆绑器
  • tsdx：用于 TS 包开发的零配置 CLI
  • microbundle：微型模块的零配置捆绑器

如果你在2022年开发一个新的库，你很可能想使用这些更高级别的工具之一来帮助简化你的工作流程。
  • 如果你有一个TS包并想利用esbuild提供的极快的构建时间，那么tsup是一个很好的选择。
  • 如果你有一个TS包并需要一些额外的功能，那么tsdx是一个很好的选择。
  • 如果你有一个TS或JS包，那么microbundle是一个不错的选择。

我个人倾向于对所有新的TS包使用tsup，主要是因为一旦你体验过100倍的构建速度，就很难再考虑换回其他东西。
注意，这些工具目前都不支持利用复合项目引用的TS单体。就目前而言，我对这种情况的建议是使用tsc进行类型检查和生成.d.ts类型（emitDeclarationOnly: true），使用tsup编译每个子包中的代码。对于这种方法的一个开源例子，请查看 react-notion-x monorepo。

Web应用开发
这些更高层次的工具和框架旨在帮助开发人员构建现代网络应用，而不必担心所有的细节问题。

似乎在swc和esbuild之上构建的项目数量大致相当。同样的观察也适用于webpack和rollup。
如果你在2022年使用React开发一个新的Web应用，那么我强烈建议你使用Next.js。它拥有最好的支持，最活跃的社区，并与世界领先的现代Web应用部署平台Vercel紧密结合。
如果你使用Vue开发一个新的网络应用，那么Nuxt.js和Vite都是不错的选择。
如果你想要更轻便的东西，那就试试Parcel吧。