如果您觉得该文档对您有帮助，请打赏，五毛十毛均可。另外，转载请注明作者及出处。
Web 应用程序已经变得非常复杂，我们需要用项目构建工具来应对这种复杂性，处理各种可能遇到的问题
模块系统的标准问题
目前模块系统有几种不同的标准：
-
<script>标签 (没有模块系统) CommonJSAMD-
ES6模块 - 其他
<script> 标签
使用 <script> 标签，可以在没有模块系的情况下，对代码进行简单的管理，之前我们都是这样做的：
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>
各个模块中的接口都会被导入到全局对象中，比如 window 对象；这样就可以在任何地方通过全局对象访问这些接口
问题：
- 可会能引发冲突
- 加载顺序难以管理
- 依赖问题难以管理
- 引入的脚本会非常多，难以阅读和理解
CommonJs 标准：同步 require
创建模块的时候，通过给 exports 对象添加属性和方法，或者通过给 module.exports 设置值来定义模块的接口。
引用的时候，使用同步 require 方法导入模块的接口。
//导入模块
require("module");
require("../file.js");
//创建模块接口
exports.doStuff = function() {};
module.exports = someValue;
这种方法常常被用在服务端的 node.js 程序中。
优点
- 在服务端，模块可以被重用
- 已经有大量这样的模块，通过
npm管理 - 简单
缺点
- 因为是同步导入模块，会导致程序挂起，不适用于网络应用
- 不能并行导入多个模块
实现
-
node.js用在服务端 browserify-
modules-webmake编译成一个包 -
wreq用在客户端
AMD 标准：异步 require
AMD 标准中，定义模块和导入模块的方式与 CommonJs 是不一样的
//导入模块
require(["module", "../file"], function(module, file) { /* ... */ });
//定义模块
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
return someExportedValue;
});
优点：
- 适用于网络应用
- 可以并行导入多个模块
缺点：
- 编码复杂，阅读和书写都很困难
- 有很多替代方法
实现：
-
require.js客户端 -
curl客户端
ES6 模块
EcmaScript6 从语言层面内建了模块系统
import "jquery";
export function doStuff() {}
module "localModule" {}
优点：
- 行业标准
确定：
- 目前很多浏览器还不支持 ES6
- 目前很少有模块使用这种方式
最佳方式
能够让开发者自己选择模块标准，即时可以使用已经存在的代码库，也能容易的添加自己定义的模块。
传输问题
如果想让模块在客户端执行，必须通过网络从服务端将他们传输过来。极端情况下，会出现下面这两种情况：
- 为每个模块发送一个请求
- 所有模块只用一个请求
通常，我们两种情况都会遇到，两种情况都存在一些问题：
-
每个模块一个请求
- 优点：只请求需要的模块
- 缺点：会有很多请求，造成性能问题
-
所有模块一个请求
- 优点：请求少，不会造成性能问题
- 确定：会引入很多无用的模块
折中方式
折中的方式是：将所有模块编译成几个小的分块，减少了请求数量，也减少了无效的引用
资源管理问题
当前的 Web 引用已经很复杂，除了 Javascript ，还有其他各种资源需要引入：
-
stylesheets样式表 -
images图片 -
webfonts字体 -
html模板 - 其他
除此以外，还有一些翻译转换工作
-
coffeescript→javascript -
elm→javascript -
less stylesheets→css stylesheets -
jade templates→javascript which - generates html -
i18n files→something - 其他
我们希望能像下面这样引入资源
require("./style.css");
require("./style.less");
require("./template.jade");
require("./image.png");
依赖管理问题
现代 Web 应用会导入很多外部依赖，管理起来非常困难，特别是某些依赖还是以表达式的形式出现，比如
require("./template/" + templateName + ".jade")
除此以外，还有很多其他稀奇古怪的形式。
策略
一个优秀的解析器可以让使用各种古怪依赖管理的代码正常运行。
