前语


最近有幸在前端团队里边做了一次关于 webpack 的技能共享。在共享的准备过程中，为了能让我们更好的了解 webpack，特意对市面上曾经和现在盛行的构建东西做了一个梳理总结。在收拾和共享的过程中，获益匪浅，对前端构建东西有了新的认识。在这里，将自己的一些思考总结写出来，期望也能给到对构建东西相同感兴趣的同学一点协助。

本文的目录结构如下:

  • 构建东西的宿世此生
  • js 模块化的开展史和构建东西的改变
  • 结束语

构建东西的宿世此生

谈到构建东西，我们首先想到的必定便是 Webpack 以及现在最的 Vite。Webpack，功用强大，生态丰厚，从面世到今天，一直是很受我们欢迎；Vite 选用 unbundle 构建形式，带来了极致的开发体会，给开发人员以新的挑选。

在这两个构建东西之外，还有其他的构建东西，如和 Webpack、Vite 类似的 Rollup、Parcel、Esbuild，主动化构建东西 grunt、gulp，以及更加久远的 YUI Tool。

这些东西的存在，构成了前端构建东西的开展史。

YUI Tool + Ant

YUI tool 是 07 年左右呈现的一个构建东西，功用比较简略，用于紧缩混淆 css 和 js 代码，需求配合 java 的 Ant 运用。

当时 web 运用开发首要选用 JSP，还不像现在这样前后端别离，一般是由 java 开发人员来编写 js、css 代码，前端代码都是和后端 java 代码放在一起的。因而前端代码的紧缩混淆也就根据 java 完成了。

Grunt / Gulp

Grunt / Gulp 都是运行在 node 环境上的主动化东西。

在开发过程中，我们能够将一些常见操作如解析 html、es6 代码转换为 es5、less / sass 代码转换为 css 代码、代码查看、代码紧缩、代码混淆装备成一系列使命，然后经过 Grunt / Gulp 主动执行这些使命。

Grunt 和 Gulp 的不同点：

  • 运用 Grunt的过程中，会发生一些中间态的临时文件。一些使命生成临时文件，其它使命或许会根据临时文件再做处理并生成终究的构建后文件，导致呈现屡次 I/O。

  • Gulp 有文件流的概念，经过管道将多个使命和操作连接起来，不会发生临时文件，减少了 I/O 操作，流程更明晰，更纯粹，大大加快了构建的速度。

Webpack / Rollup / Parcel

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

这一类构建东西，一般需求指定进口 – entry，然后以 entry 为起点，经过剖析整个项目内各个源文件之间的依靠联系，构建一个模块依靠图 – module graph，然后再将 module graph 别离为三种类型的 bundle:
entry 所在的 initial bundle、lazy load 需求的 async bundle 和自定义别离规矩的 custome bundle。

这几个构建东西各有优势:

  • Webpack 大而全，装备灵活，生态丰厚，是构建东西的首选。

  • Parcel 声称零装备，运用简略，合适不太需求定制化构建的项目运用。

  • Rollup 推重 ESM 标准开发，打包出来的代码洁净，适用于组件库开发。

Vite / Esbuild

新一代构建东西。

esbuild, 根据 go 言语完成，代码直接编译成机器码(不用像 js 那样先解析为字节码，再编译为机器码)，构建速度比 webpack 更快。

vite, 开发形式下借助浏览器对 ESM 的支撑，选用 nobundle 的方法进行构建，能供给极致的开发体会；生产形式下则根据 rollup 进行构建。

js 模块化的开展史和构建东西的改变

javascript 言语规划之初，仅仅作为一个简略的脚本言语用来丰厚网站的功用，并不像 java、c++ 那样有 module 的概念，开展到现在的模样，也经历了相当长的时刻。

这段时刻，能够简略归纳为：

  • 青铜时代 – no module；

  • 白银时代 – cjs、amd、cmd、umd、esm 相继呈现；

  • 黄金时代 – 组件模块化；

不同的时代，构建东西也不同。

青铜时代

由于没有 module 的概念, javascript 无法在言语层面完成模块之间的彼此阻隔、彼此依靠，只能由开发人员手动处理。

相应的，早期的 web 开发也比较简略乃至简陋:

  • 经过对象、iife(或者闭包)的方法完成模块阻隔；
  • 经过手动确认 script 的加载次序确认模块之间的依靠联系。
  • 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 module(这个时分还不是很成熟)；

一起还呈现了 less、sass、 es6、 jslint、 eslint、typescript 等新的东西， 前端人物也开端承当越来越重要的作用，渐渐的独立出来。

有了 node 供给的平台，大量的东西开端出现:

  • requirejs 供给的 r.js 插件，能够剖析 amd 模块依靠联系、合并紧缩 js、优化 css；
  • less / sass 插件，能够将 less / sass 代码转化为 css 代码；
  • babel，能够将 es6 转化为 es5；
  • typescript，将 ts 编译为 js；
  • jslint / eslint，代码查看；
  • …

这个时分，我们能够将上面的的这些操作装备成一个个使命，然后经过 Grunt / Gulp 主动执行使命。

黄金时代

根据 Angular、Vue、React 三大框架和 Webpack 的运用，组件模块化成为前端开发的主流形式。一起 ESM 标准也本来越成熟，被更多的浏览器支撑。

以 React 和 Webpack 为例，一般我们会将一个运用涉及到的所有的功用拆分为一个个组件，如路由组件、页面组件、表单组件、表格组件等，一个组件对应一个源文件，然后经过 Webpack 将这些源文件打包。在开发过程中，还会经过 Webpack 开启一个 local server，实时查看代码的运行作用。

Webpack 是一个静态模块打包器，它会以 entry 指定的进口文件为起点，剖析整个项目内各个源文件之间的依靠联系，构建一个模块依靠图 – module graph，然后将 module graph 别离为多个 bundle。在构建 module graph 的过程中，会运用 loader 处理源文件，将它们转化为浏览器能够是识别的 js、css、image、音视频等。

随着时刻的开展， Webpack 的功用越来越来强大，也迎来诸多对手。

Webpack1
   |
   |
Rollup 呈现(推重 ESM 标准，能够完成 tree shaking, 打包出来的代码更洁净)
   |
   |
Webpack2(也完成了 tree shaking, 但是装备仍是太繁琐了)
   |
   |
Parcel (声称 0 装备)
   |
   |
Webpack4(经过 mode 确认 development 和 production 形式，各个形式有自己的默认装备)
   |
   |
Webpack5(持久化缓存、module federation)
Esbuild(选用 go 言语开发，比 Webpack 更快)
Vite(推重 ESM 标准，开发形式选用 nobundle，更好的开发体会)

丰厚的构建东西，形成了百花开放的局面，可用于不同的情形，给开发人员带来了越来越多的挑选。

结束语

现在来看，构建东西在整个前端体系中占据的方位是越来越重要。只会 Webpack 乃至不懂构建东西现已无法满足日常开发。这就需求我们时时学习，紧跟时代的脚步，了解最新的技能，不断前进。

尽管前路崎岖,依然相信未来可期，加油 ！

我正在参加技能社区创作者签约方案招募活动，点击链接报名投稿。