一、前端构建工具的演进

1.基础工具

a.文件压缩与合并工具

随着CSS 与 JS 框架的诞生，代码优化的工具也应运而生。文件压缩工具和合并工具。

b.包管理工具

npm和yarn

yarn的优点

1. 安装速度：由于 Yarn 在安装依赖时采用的是并行操作，以及它在缓存依赖包时相比 npm 缓存的数据更完整。
2. 稳定性：npm 5 引入的 package-lock 文件，在每次执行 npm install 时仍然会检查更新符合语义规则的依赖包版本，而 yarn.lock 则会严格保证版本的稳定性（尽管，yarn.lock 不能保证 node_modules 的拓扑稳定性）。
3. Plug’n’Play（PnP）：Yarn 2.0 发布了 PnP的功能（在更早期的 1.12 版本中就已实现）。PnP 方案具有提升项目安装与解析依赖的速度，以及多项目共享缓存（与普通缓存相比，免去了读写 node_modules 的大量 I/O 操作)，节省占用空间等优势。

   c.任务式构建工具

   2012 年，Ben Alman 发布了基于任务的构建工具 Grunt。
   2013 年，Eric Schoffstall 发布了流式的构建工具 Gulp。
   Grunt 和 Gulp 这两种任务式的构建工具的基本组成包括：核心的处理工具（grunt-cli/gulp-cli）、配置文件（Gruntfile/Gulpfile），以及一系列常用的任务插件（Clean、Watch、Copy、Concat、Uglify、CssMin、Spritesmith……）

   2. 模块化：模块定义与模块化的构建工具

   a.模块化的不同规范

   CommonJS:

   CommonJS 的 Modules/1.0 规范从一开始就注定了只能用于服务端，不能用于浏览器端。

CommonJS 作为非浏览器端的 JS 规范，它的基本要素如下：

1. 模块定义：一个模块即是一个 JS 文件，代码中自带 module 指向当前模块对象；自带 exports=module.exports；自带 require 方法用于引用其他模块
2. 模块引用：通过引用 require() 函数来实现模块的引用，参数可以是相对路径也可以是绝对路径。
3. 模块加载：require() 的执行过程是同步的。

   AMD：适用于浏览器端的模块化规范 AMD

   UMD：UMD本质上是兼容 CommonJS 与 AMD 这两种规范的代码语法糖

   ES Module