西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus丨外贸独立站
JS 工具的世界变化如此之快。
本文将从“编译器”、“打包器”、“包管理器”、“第三方库开发”、“Web应用开发”等方面，自下而上盘点2022年JavaScript开发工具的生态系统。
翻译员
编译器负责将输入代码转换为某种目标输出格式。
本文仅关注 JS 和 TS 编译器，它可以将现代 JS 和 TS 转换为特定版本的 ECMAscript，并兼容浏览器和最新版本的 Node.js。
编译器从tsc和babel变成了swc和esbuild，编写语言从高级解释语言变成了更快的编译语言。 编译器生态系统目前正处于一个非常重要且巨大的转变过程中。
此更改使编译速度提高了 10 到 100 倍。 下图来自esbuild官网。
如果您正在升级开发工具或开始新项目，您可以尝试这些下一代编译器。 虽然成熟度不如tsc或者babel，但是快了近100倍的构建速度确实很棒。
不幸的是，swc 和 esbuild 都不进行类型检查，它们只是试图尽可能加快速度。 如果项目正在使用 TS，最好在工具链中使用 tsc 进行类型检查，而不是弃用此功能。 另外，考虑到很多项目都依赖tsc，为了打破这个瓶颈，swc的作者正在将tsc移植到Go上。
巴贝尔 vs TSC
之前有过两者的比较，传送门：。
总结一下，当项目中存在两者时，最好使用 babel 编译代码liquid开发，使用 tsc 进行类型检查并生成 .d.ts 文件。
SWC 与 esbuild
swc 和 esbuild 都是优秀且速度极快的 JS/TS 编译器，性能相当。 许多大公司已经开始在生产环境中使用它们。
在权衡和比较它们的时候，更多的是比较整合它们的上层工具，而不是比较它们本身。
SWC中使用的上层工具有：
使用esbuild的上层工具有：
包装工
打包器负责将所有源文件打包在一起，通常用于打包第三方库和Web应用程序。
webpack 和 rollup 就像现代打包者的瑞士军刀。 可扩展性非常强，社区的插件生态也非常好，可以覆盖大部分打包场景。 例如，在webpack和rollup中，您可以使用上述任何编译器来编译TS代码。
Parcel提供了一种极快的零配置打包方式。 它更注重简单性而不是可扩展性，并且内部使用 swc 作为编译器。
其实swc和esbuild也提供了基本的打包能力shopify开发，但是与这些打包器相比，功能还不够全面，所以这里就不一一列举了。 更详细的对比请参考tool.report。
包管理器
包管理器负责管理 NPM 包依赖关系。
包管理器有很多历史web技术，这里总结一下：
我们来看看明星项目是如何评选的：
这些项目都没有使用yarn PnP。
第三方库开发
这些工具将帮助开发打包和发布第三方NPM包。
如果您想在 2022 年开发一个新库，您可以使用它们来简化您的工作流程。
然而web技术；[Web技术] 1390 2022年JavaScript开发工具生态系统，目前这些工具大多数都不能很好地支持 TS monorepos（TS monorepos 可以利用项目引用，将 TS 代码结构拆分成更小的部分）。 这种情况下，建议使用tsc检查类型并生成d.ts文件web技术，并使用tsup编译各个子包。 真实案例请参考react-notion-x。
网络应用程序开发
这些先进的工具和框架将帮助开发屏蔽所有细节，以更好地构建现代 Web 应用程序。
结论
从以上来看，使用swc或esbuild作为编译器、webpack或rollup作为打包器的开发工具数量几乎是50:50。
现代Web应用程序开发近年来发展迅速。 在工具领域，我们现在有很多很多的选择。 希望这篇文章能够对大家以后选择技术有所帮助。
参考
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。