关于前端:2022年的JavaScript开发工具

原文：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倍的疾速构建，就很难再思考切换回其余版本了。

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

开发工具

编译器

SWC vs esbuild

打包器(Bundlers)

开发库

更多资讯

Web app 开发

总结