最近对前端构建工具的一些理解

前言

最近有幸在前端团队做了一个关于webpack的技术分享。在准备分享的过程中，为了让大家更好的了解webpack，我特地对市场上以前和现在流行的构建工具做了一个总结。在整理和分享的过程中，我受益匪浅，对前端构建工具有了新的认识。在这里，我总结一下我的一些想法，希望能给同样对构建工具感兴趣的同学一些帮助。

本文目录结构如下：

• js模块化的发展史以及构建工具的变迁
  
• 结论
  

构建工具的前世今生

说到构建工具，大家第一个想到的肯定是Webpack和最受欢迎的Vite。 Webpack以其强大的功能和丰富的生态系统，从诞生到今天一直很受欢迎； Vite采用分拆构建模式，带来极致的开发体验，给开发者新的选择。

除了这两个构建工具之外，还有其他构建工具，比如类似Webpack、Vite的Rollup、Parcel、Esbuild，自动化构建工具grunt、gulp，以及更古老的YUI Tool。

这些工具的存在，构成了前端构建工具的发展历史。

YUI Tool + Ant

YUI tool是2007年左右出现的构建工具，功能比较简单，用于压缩和混淆css和js代码。需要配合Java的Ant使用。

当时的Web应用开发主要使用JSP，前端和后端并没有像现在这样分离。 Java开发人员通常编写js和css代码，前端代码与后端java代码放在一起。因此，前端代码的压缩和混淆是基于java实现的。

Grunt / Gulp

Grunt / Gulp 是在节点环境上运行的自动化工具。

在开发过程中，我们可以将一些常见的操作如解析HTML、将es6代码转换为es5、将less/sass代码转换为css代码、代码检查、代码压缩、代码混淆等配置为一系列任务，然后使用 Grunt / Gulp 自动化这些任务。

Grunt 和 Gulp 的区别：

• 在使用Grunt的过程中，会生成一些中间临时文件。某些任务会生成临时文件，而其他任务可能会处理临时文件并生成最终的构建后文件，从而导致多个 I/O。
• Gulp 有文件流的概念，通过管道连接多个任务和操作，无需生成临时文件，减少 I/O 操作，使流程更清晰、更纯粹，大大加快构建速度。
  

Webpack / Rollup / Parcel

Webpack、Rollup 和 Parcel 统称为静态模块打包器。

这类构建工具通常需要指定入口-入口，然后以入口为起点，通过分析整个项目中源文件之间的依赖关系，构建模块依赖图-模块图，然后将模块图转换成 分为三种类型的bundle：入口所在的初始bundle、延迟加载所需的asyncbundle、以及自定义分离规则的customebundle。

这些构建工具各有其优点：

• Webpack 大而全，配置灵活，生态丰富。是构建工具的首选。
• Parcel号称零配置，使用简单，适合不需要定制施工的项目。
  
• Rollup提倡ESM标准开发，封装后的代码干净，适合组件库开发。
  

Vite/Esbuild

新一代构建工具。

esbuild是基于go语言实现的。代码直接编译成机器码（不需要像js一样先解析成字节码再编译成机器码），构建速度比webpack更快。

vite，在开发模式下，使用浏览器对ESM的支持，并使用nobundle构建，可以提供极致的开发体验；在生产模式下，它是基于rollup构建的。

js模块化的发展历史以及构建工具的变化

JavaScript语言设计之初，只是作为简单的脚本语言来丰富网站的功能。它不像java和c++那样有模块的概念。花了很长时间才达到现在的程度。

这段时间可以简单概括为：

• 青铜时代 - 无模块；
• 白银时代——cjs、amd、cmd、umd、esm相继出现；
  
• 黄金时代——组件模块化；
  

不同的时代，不同的施工工具。

青铜时代

由于没有模块的概念，JavaScript无法在语言层面实现模块之间的相互隔离和相互依赖，只能由开发者手动处理。

相应地，早期的Web开发是比较简单甚至粗暴的：

• 通过对象、iife（或闭包）实现模块隔离；
• 通过手动确定脚本的加载顺序来确定模块之间的依赖关系。
  
• jsp开发模式，没有专门的前端，html、js、css代码通常由后端开发人员编写。
  

为了节省带宽和保持机密性，通常需要对前端代码进行压缩和混淆。此时的构建工具是YUI Tool + Ant。

白银时代

chrome v8引擎和node的出现，给前端带来了无限的可能性。

同时，JavaScript的模块化标准也有了新的发展：

1. commonjs规范，适合node环境开发。
2. amd，cmd规范，适用于浏览器环境。
   
3. umd，兼容amd和commonjs，代码可以同时运行在浏览器和node环境中。
   
4. ESM，即ES6模块（目前还不是很成熟）；
   

同时，less、sass、es6、jslint、eslint、typescript等新事物也出现了，前端角色也开始承担越来越重要的角色。功能，慢慢变得独立。

随着node提供的平台，大量的工具开始涌现：

• less/sass插件，可以将less/sass代码转换为css代码；
  
• babel，可以将es6转换为es5；
  
• typescript，将ts编译成js；
  
• jslint/eslint，代码检查；
  
• ...
  

此时，我们可以将以上操作一一配置成任务，然后通过Grunt/Gulp自动执行任务。

黄金时代

基于Angular、Vue、React、Webpack三大框架的使用，组件模块化已经成为前端开发的主流模式。同时，ESM规范也变得更加成熟，并得到更多浏览器的支持。

以React和Webpack为例，我们通常会将一个应用程序涉及的所有功能拆分为组件，例如路由组件、页面组件、表单组件、表格组件等。一个组件对应一个源文件。然后将这些源文件通过 Webpack 打包。开发过程中，会通过Webpack打开本地服务器，实时查看代码的运行效果。

Webpack 是一个静态模块打包器。它会以entry指定的入口文件为起点，分析整个项目中源文件之间的依赖关系，构建一个模块依赖图——模块图，然后将模块图分离成多个bundle。

在构建模块图的过程中，会使用loader对源文件进行处理，将其转换为浏览器可以识别的js、css、图片、音视频等。

随着时间的发展，Webpack的功能越来越强大，同时也迎来了很多对手。

Webpack1
 |
 |
汇总 出现(尊敬ESM标准的，可以实现 tree 抖，打包后的代码更干净)
 |
 |
Webpack2(还实现了treeshaking 、但是配置还是太麻烦了）
 | 
  | )
 |
 |
Webpack4()  by  模式 OK 开发  和  生产 模式，每种模式都有自己的默认配置 )
 |
 |
Webpack5（持久缓存、模块联邦）
Esbuild(采纳去语言开发，比  Webpack ）
Vite（） 好评 ESM 标准，开发模式采用nobundle，更好的开发体验）

丰富的构建工具形成了百花齐放的局面，可以在不同的情况下使用，给开发者越来越多的选择。

结论

目前，施工工具在整个前端系统中占据着越来越重要的地位。仅仅了解 Webpack 甚至不了解构建工具对于日常开发来说已经不够了。这就需要我们时刻学习，与时俱进，了解最新技术，不断前进。

尽管前路坎坷，但我依然相信未来是有希望的，加油💪🏻！