全栈大前端

# 前端构建工具概览

  • 构建
    • 任务化构建
      • Grunt
      • Gulp
      • Parcel
      • Rollup
    • 系统化构建
      • Webpack
    • 基于ESModules构建
      • Vite
      • SnowPack

# 任务化构建方式

# Gulp/Grunt

  • 2012 年 Grunt 发布首版[6]¹²，将处理过程定义为多个不同的任务，每个任务执行一个函数或插件；

  • 2013 年 Gulp 发布首版[7]，并快速在同年发布到了 3.0 正式版，在 Grunt 抽象任务的基础上，Gulp 引入了流编程的概念，避免在执行复杂任务时，需要将编译中间结果放在临时文件夹的场景；

一个基于流（任务）的自动化构建工具，Gulp 是基于 Node 构建的，利用它流的能力，它强调的是前端开发流程规范化管理，从 Vue 等 SPA 框架出现后，它慢慢不介入业务的实际生产开发中了。

# 特点

  • Gulp 所处理的任务大多都是以插件的形式存在的，所以在使用前，要先安装插件依赖。
  • Grunt 是 Gulp 的前身，Gulp 及其了它的精华。
  • Gulp相比 Grunt 更加简洁，设计理念更合理，核心API只有五个。
  • Gulp 每个插件只完成一个功能。

# 什么时候用 Gulp/Grunt

如果你的应用模块依赖简单，没有用到模块化的概念，只需要简单的合并压缩，就可以使用。但如果你的整个项目都是用模块化管理的，互相依赖模块很强，建议还是用 Webpack。

# Gulp 与 Grunt 打包Less文件的对比

Gulp：执行 IO 操作，读取 Less 文件，转成 CSS 文件，压缩代码，存储。 Grunt：执行 IO 操作，读取 Less 文件，转成 CSS 文件，存储，再重新读取 CSS 文件，压缩，存储。

# Parcel

2013 年⁴，Parcel[12] 发布首版，并在 2018 年发布 1.0 正式版，在当时它主打无配置启动项目； Parcel 首版发布于 2013 年，但是它大规模进入公共视野是在 2017 年。

  • 一个极速零配置的 Web 应用打包工具，能支持打包各种文件。
  1. 无配置完成构建打包项目要求。
  2. 内置常见场景的构建方案及其依赖，无需安装各种依赖。
  3. 能以HTML为入口，自动检测和打包依赖资源。
  4. 默认支持模块热替换，真正的开箱即用。
  5. Transform 过程是通过 Plugins 来处理的，不像 Webpack 是通过Loader。

# Rollup

2015 年，Rollup[13] 发布首版，并在 2019 年发布 1.0 正式版，它主打工具库的打包，相比 Webpack 配置更简单和轻量；

  • Rollup 是一个 JS 模块打包器，它与 Webpack 定位不同，它更专注于 JS 类库的打包工作。操作过程和webpack差不多，它也是可以以命令行或者配置文件（rollup.config.js）的方式来完成打包操作的。默认支持 ES Module 中的 import/export 语法还有相对路径（Webpack中相对路径要配合path模块）。
  1. Rollup 更适合用来开发一些纯 JS 库。
  2. Rollup 不支持代码分割。
  3. Rollup 默认只支持 import/export 方式导入导出，如需使用 CommonJS 模块规范，则必须单独配置插件。
  4. Rollup 不能直接处理导入的第三方依赖模块，需要插件@rollup/plugin-node-resolve 来处理路径才能使用。
  5. 开发服务器 Dev Server 需要通过 rollup-plugin-server 插件来实现。
  6. 支持Tree-shaking

# 系统化构建方式

  • WebPack（模块依赖）

2012 年 Webpack[8] 发布首版，并于 2014 年发布 1.0 正式版，它通过分析模块间依赖来决定编译过程，将可扩展点抽象为 loader 和 plugin。

2020 年，Webpack 5.0 发布，实现了多进程编译以优化计算密集型任务，并强化了缓存机制；

Webpack 最终能统治社区，离不开它的三个王牌能力：

  1. 一切皆可打包
  2. 本地模块热加载（HMR）
  3. 按需加载。

而 Webpack 的弱项是其配置的繁琐和复杂，在这个阶段出现的大部分新包，也是在牺牲了部分能力的前提下，去强化封装性和简化复杂度

# Bundleless（性能优化）

  1. 更底层的语言编写、bundless，如果用一个词描述就是高性能。
  2. 积极拥抱浏览器新特性或者知识跨界都可以帮助前端领域取得新的突破。

# SnowPack

2020 年，Snowpack[14] 发布首版正式版，主打不打包项目依赖的模块（Bundleless），而是直接依赖 CDN 提供的模块文件，大大提升了本地环境运行速度；

Snowpack 是由 Skypack 和 Pika 的创造者开发的一款构建工具。它提供了一个很棒的开发服务器，并且是以 "非打包式开发 "的理念创建的。

默认情况下， Snowpack 的构建步骤并没有将文件打包到一个单一的包中，而是提供了在浏览器中运行的非打包esmodules。实际上 esbuild 是作为一个依赖关系包含在其中的，但我们的想法是使用 JavaScript 模块，只有在需要时才与 esbuild 打包。

# Vite

2020 年，Vite[15] 发布首版，同样主打 Bundleless。

2020 年，Vite 发布 2.0，使用 esbuild 实现了性能二次提升；

# 推荐阅读

2022，前端工具链十年盘点 (opens new window)

主流前端代码构建工具评测 (opens new window)

常用构建工具对比 (opens new window)

ESBuild & SWC浅谈: 新一代构建工具 (opens new window)

← Rollup →