近年涌现出大量改善开发人员体验的新的开发者工具,包括但不限于webpack、Babel、Rollup、Parcel、create-react-app。我们的目的是了解它们,必要时做出最佳选择。
本文将按照从底层到上层的封装粒度,以 esbuild、snowpack、vite、wmr 的顺序进行介绍。
每个工具的都在不同程度上支持以下功能:
-
对原生 JavaScript 模块的一流支持
-
TypeScript 编译(但不进行类型检查)
-
JSX
-
用于扩展性的插件 API
-
内置开发服务器
-
CSS bundling 和支持 CSS-in-JS 库。
esbuild
esbuild 使用 go 语言编写,由于相对 node 更为底层,且不提供 AST 操作能力,所以代码执行效率更高,根据其官方 benchmark 介绍提速有 10~100 倍:
esbuild 目前 处于 0.14.38 版本,还未完全准备好用于稳定生产的 1.0 版本。减少等待构建运行的时间,能改善开发体验,但是esbuid相对较为底层,因此在拉入依赖关系和配置环境上环节上会花费时间,使用Rollup 和 terser 的bundl