seajs压缩打包过程

作者：zccst

一、构建过程
CMD 模块在构建时，有两个基本操作：
1，提取操作，用来提取模块的标识 id 和依赖 dependencies。
2，压缩操作。经过上面的提取操作后，构建工具就可以调用任何 JS 压缩工具来进行压缩了，require 参数也可以被压缩成任意字符。

举例，在a.js

define(function(require, exports) {
  var b = require('./b');
  var c = require('./c');
});

//代码将改为
define('xxx/1.0.0/a', ['./b', './c'], function(require, exports) {
  var b = require('./b');
  var c = require('./c');
});

Sea.js 在运行 define 时，接受 factory 参数，可以通过 factory.toString() 拿到源码，再通过正则匹配 require 的方式来得到依赖信息。依赖信息是一个数组，比如上面 a.js 的依赖数组是：['./b', './c']


Sea.js 不需要通过 factory.toString() 和正则匹配的方式来获取依赖，直接从第二个参数中就可以拿到依赖数组。


二、ID 和路径匹配原则
所谓 ID 和路径匹配原则 是指，使用 seajs.use 或 require 进行引用的文件，如果是具名模块（即定义了 ID 的模块），会把 ID 和 seajs.use 的路径名进行匹配，如果一致，则正确执行模块返回结果。反之，则返回 null。

例如：

// 文件路径是 lib/jquery.js
// ID 和实际路径匹配了（.js 后缀会自动补上）
define('lib/jquery', function(require, exports, module) {
    // jquery code
    exports = $;
});

//当 jQuery 文件是上面的情况时，下面的变量 $ 能拿到正确的返回结果。

//使用 seajs.use
seajs.use('lib/jquery', function($) {
    // use $
});
//或者在模块中 require ：
define(function(require, exports, module) {
    var $ = require('$');
    // use $
});

下面这种情况会返回null

// 文件路径是 lib/jquery.js
// 但是 ID 是 lib/jquery.min.js
// ID 和路径不匹配
define('lib/jquery.min', function(require, exports, module) {
    // jquery code
    exports = $;
});

而匿名模块始终能正确返回结果：
// lib/jquery.js
// 匿名模块，不需要进行匹配
// 但是文件中只能有一个 define 块
define(function(require, exports, module) {
    // jquery code
    exports = $;
});
注意这里用于匹配的 ID 都是经过 alias 和 path 解析并且补完后缀之后的。


为什么要有这个原则

回答这个问题前，请先阅读这篇文章：#426 。

首先，Sea.js 的模块启动接口秉承的是路径即 ID 的设计原则。seajs.use 的方法的第一个参数被规定为文件路径（而不是 ID），这样的设计减轻了记忆模块 ID 的负担，无论是匿名模块还是具名模块，开发者只需要知道文件放在哪儿就行了。

进一步的，之所以有这个 ID 和路径匹配原则，是因为在 CMD 的书写规范中，一个文件对应一个模块，所有的模块都是匿名模块（即 define(factory) 的形式）。那么当 seajs.use 某模块时，这个模块对应的文件里的唯一的 define 方法理所当然的是这个模块的执行代码，这时可以正确返回结果。


三、自动压缩工具


普通压缩工具
针对IE浏览器，要自己写ID


如果您觉得本文的内容对您的学习有所帮助，您可以微信：