跳到主要内容

构建工具

当前流行的构建工具有很多，以下举例一些常见的构建工具：

  • Webpack：静态化的模块打包工具，能够应用于各类复杂的项目，同时兼容性较好。
  • Vite：目前现代化工程的首选，相比于Webpack，它更加轻量化、速度更快、配置简单，但兼容性不如Webpack。
  • Rollup：主要面向类库的打包工具，可以将多个模块打包成一个文件，适用于库的发布。
  • Gulp：是一个基于流的自动化构建工具，可以自动执行重复性任务，比如压缩、编译、合并、测试等。
  • Grunt：是一个基于任务的自动化构建工具，可以自动执行多种任务，比如压缩、编译、合并、测试等。
  • Parcel：是一个快速、零配置的打包工具，可以将各种资源模块化，并自动化处理依赖关系，比如压缩、编译、合并、测试等。

WebPack​

WebPack大致可以分为几个比较主要的部分:

  • Entry：指示Webpack从哪里开始打包，可以是单个文件，也可以是多个文件。
  • Output：指示Webpack在哪里输出打包后的文件，可以是文件系统，也可以是内存中。
  • Loaders：Webpack可以加载各种文件类型，比如图片、字体、CSS、JavaScript等，通过Loaders可以对这些文件进行预处理，比如将Sass编译成CSS，将TypeScript编译成JavaScript等。
  • Plugins：Webpack可以用Plugins来扩展其功能，比如打包优化、分离CSS、提供环境变量等。
  • Mode：Webpack有三个不同的模式，分别是development、production和none，分别对应开发环境、生产环境和不使用Webpack。

WebPack的构建流程​

  1. 读取配置文件webpack.config.js，解析出入口文件、输出文件、加载器、插件等配置。
  2. 加载入口文件，解析其依赖关系，递归地解析每个依赖文件，直到所有入口文件都被解析完毕。
  3. 对每个模块进行编译，将其转换成浏览器可识别的JavaScript代码。
  4. 调用所有配置的插件进行处理，比如压缩、分离CSS、提供环境变量等。
  5. 将处理后的模块输出到指定的输出文件或内存中。 WebPack都是基于Node.js去完成静态解析和代码构建的，因此，我们在开发环境下使用开发服务器去进行开发任务，Webpack只是将构建文件输出到了内存中，开发服务器读取构建文件并提供服务。

Vite​

Vite 高度依赖于ES Module，使用ESM的特性实现模块解析，按需加载。在开发环境下通过GoLang编写的ESBuild将代码构建成浏览器可识别的JavaScript代码。摆脱了WebPack通过Node使用JS去完成静态解析和代码构建的性能瓶颈。在生产环境下是通过Rollup去完成打包工作

Vite的构建流程​

  1. 读取配置文件vite.config.js，解析出入口文件、输出文件、加载器、插件等配置。
  2. 启动一个开发服务器，监听文件变化，自动重新构建。
  3. 解析入口文件，递归地解析每个依赖文件，直到所有入口文件都被解析完毕。
  4. 对加载的模块进行编译，将其转换成浏览器可识别的JavaScript代码。

Vite与WebPack的差异较大，在其他地方中有详细的介绍。Webpack vs Vite