大概从 2019 年到现在的这三年多的时间里，构建工具几乎已经成为前端发展最快的一个部分。 构建工具，属于前端工程化领域。而前端工程化，是每一个高级前端开发人员都必须要去深入了解的内容，这也是想要拿到高薪不可避免的一个关键因素。

有一部分人对前端工程化的理解和实践比较深刻，所以他们可以比较容易的通过一些高级别的面试。但仍然有相当多一部分人对这块知识存在很多盲区，以至于他们在职业的道路上无法走的更轻松。

前端构建，就像是通往高手之路上的一个屏障，早晚都需要迈过去。

这篇文章会介绍目前大部分关注度较高和主流的构建工具。将它们彼此的关系梳理清楚，方便能够更好的认清楚它们，进而有针对性的去学习和使用。

构建工具？

构建工具就是指能自动对代码执行检验、转换、压缩等功能的工具。从目前市场上流行的构建工具来看，常见的功能有：

• 代码转换：例如将 TS 文件转换为 JS 文件，ES6 高级语法转为 ES5 语法等。
• 代码打包：将有关联的代码打包在一起。
• 代码压缩：文件压缩、gzip 压缩等。
• 热加载：修改代码后自动刷新页面。
• 代码检验：检查代码格式是否符合规范。
• ...

构建工具属于前端工程化领域，前端构建工具比较多。例如：Webpack、Babel、esbuild、Vite、Rollup、Parcel、SWC......

这些构建工具的侧重点不同、作用也不一样，所以说它们并不全部都是竞争关系，相反，某些构建工具之间反而是相互依存的关系。

转译器与打包器

构建工具大多都在转译器和打包器之间，但是很多构建工具的能力范围都不仅仅是单纯的转译器或者打包器。

我将构建工具简单地分为两类：

底层 JS/TS的转译器

转译器：很好理解，就是将一种高级编程语言转换翻译成另一种高级编程语言，比如 TypeScript 转译到 JavaScript。这个过程和英语翻译成中文差不多。

纯粹用于将 TypeScript/JavaScript/JSX 编译到某种特定运行环境下的底层转译器。代表有 Babel、TSC、esbuild 和 SWC 等。虽然我将它们归类为转译器，但是它们大都也支持打包的能力，比如 esbuild 就把自己定位为打包器。

转译器可以分为两类

• 一类是基于 JavaScript/TypeScript 实现的

  在转译器中，最老牌的是 babel，同样它的生态也是最好的。但是它是基于 JavaScript 实现的转译器，在性能上存在瓶颈。

  tsc 是 TypeScript 的官方编译工具，它是基于 TypeScript 实现的，性能同样存在瓶颈。

• 另一类是使用其他语言实现的。

  esbuild 和 SWC 在性能方面都很有优势，原因是它们采用了性能更好的编程语言。

  esbuild 采用的是 Go 语言，所以在性能上和 Webpack 比较算是降维打击了。

  SWC 采用的是 Rust 语言，性能同样和 Babel 不在一个纬度上。

上层的打包器

打包器：也很好理解，就是将项目中用到的各种类型的资源进行打包，比如 SASS、PNG、JSON 等，让它们能够在指定的环境（如：浏览器或者 Node.js）中正常工作。

它们通常不会具备转译能力，而是借助上面提到的这些转译器来实现转移能力。它们更专注于完成一些范围更广、更加具体的打包任务。代表有 Webpack、Rollup、Parcel、esbuild、Snowpack、Vite、wmr、microbundle、tsup、tsdx、tsup 等。

分别是开发场景和部署场景。部署场景频次比较低，所以性能对这类场景来说不是最重要的。但是对开发场景非常重要，没有人愿意修改一次代码要等几分钟才能看到效果。

按照开发场景的视角出发，打包器也可以分为两类

• 一类是通过监听源代码变化然后重新构建项目将打包后的代码推送到浏览器的传统模式。

  Webpack 在现代打包器中资历最老，同样生态也最好。在目前的前端生态中，仍然有大量的项目是采用 Webpack+Babel 技术方案进行打包构建的。它会采用大量缓存技术来提高性能。

  Rollup 通常用来打包第三方库，而不是应用。它比 Webpack 生成的代码更加精简。

  Parcel 和 Webpack 的功能类似，但是它简化了配置，号称零配置、开箱即用。Parcel 2 的 JS 转译器部分基于 SWC 进行开发，性能有很大提升

• 另一类是通过浏览器的原生 module 来实现动态打包的 bundleless 模式。

  Vite 是以速度著称，打包部分使用 Rollup。由于积极维护，和很好的生态，目前 Vite 也是首选的 bundleless 解决方案。

  wmr 是一个非常轻量级的打包工具，它没有任何 npm 依赖。所以它没有 Snowpack 和 Vite 成熟，但是 wmr 更适合用在 Preact 或者一些简单的项目上，因为它的作者也是 Preact 的作者。

• 除了上述的两种类型打包器以外，还有一类是专门针对 TypeScript 的打包器。

  TSDX 是比较成熟的一个选项，但是它对自身的定位不是一个打包器那么简单，而是覆盖了一个 TypeScript 项目开发时所需的所有东西的零配置 CLI：Rollup、Jest、tsc、yarn、TSLint、VSCode......，有点 All in One 的感觉。有些人喜欢这一点，也有些人反对这一点。

  tsup 是另一个针对 TypeScript 的打包器，它的优势也是零配置，并且底层是使用 esbuild 作为支持的。相比于 TSDX 在速度上可能会更快，功能就没有那么多了。

痛点

前端工程化发展这么快的原因，大概就是因为前端应用越来越复杂，对应的痛点也越来越多。每种工具其实都在某个或者某几个痛点上面下功夫，最终都是在不断解决各种痛点。

构建通常有分两种情况，本地开发时的构建和线上部署时的构建。

• 本地开发

  本地开发时构建首要追求的是速度。很多人会去吐槽 Webpack 很慢。

• 线上部署

  线上部署时构建首要追求的是体积。很多人会去吐槽 Webpack 打包体积过大。

当然还有一些和构建环境无关的其他痛点：比如说配置复杂度。很多人会自嘲自己是 Webpack 配置工程师。

如何选择

当前前端项目主要构建工具有三个：Webpack、Rollup、Vite。

• 打包开源库

  不用思考，rollup 会是你更好的选择。rollup 本身也支持很多插件，生态也成熟，各种场景几乎都能照顾到。

• 打包应用程序

  个人推荐Webpack/Vite，具体看您的 应用程序 需不需要兼容老浏览器？

  如果不考虑兼容老浏览器，建议用 vite 开发应用程序。

  Webpack适合配合 React.js、Vue.js 构建单页面应用以及需要多人合作的大型项目，缺点就是配置复杂度高。

  • 开发方面：vite 提供 dev 服务器，以及比 webpack 快的多的热更新，dev 开发的体验更好了

  • 生产方面：vite 打生产包，实际上用的就是 rollup，笔者用 vite 已经上过真实项目，开发体验很棒，打的生产包比用 webpack 小了很多，有不错的性能提升

最后一句
学习心得！若有不正，还望斧正。希望掘友们不要吝啬对我的建议。