引子

最近看到身边很多同学开始抛弃传统的 <script> 而改用 SeaJS 这样的 JS 模块加载器了，这是件好事，也是一种趋势。
但是任何事物都有两面性，使用模块加载器虽然对于代码的可维护性带来了较大的提升，但是也引入了更多的复杂度，所以肯定会给某些方面带来麻烦——比如这篇文章要探讨的 JS 文件合并。
不少人知道 SeaJS 有个配套的文件压缩合并工具 Spm，可是这个工具似乎一直各种调整、跳票，而且目前版本的使用、配置也很复杂，很多人对此怨声载道，比如我见过有人提 issue 说： “我感觉 SeaJS 非常轻量、好用，可是那个 Spm 怎么搞的那么复杂呢？”
其实 Spm 的复杂，有一部分原因正是由于 SeaJS 造成的，请往下看

传统的 JS 合并

如果采用 <script> 标签的话，JS 合并非常简单，比如

<script src="/js/util.js"></script>
<script src="/js/index.js"></script>

// util.js
function add (a,b) {
  return a + b;
}

// index.js
var c = add(1, 2);
alert(c);

这时候要合并的话，只需要按照 html 上 JS 文件的引入顺序，将相应的文件拼合即可，这一步甚至可以通过一些工具来自动化实现，比如启用 nginx 的 concat 模块后可以这样

<script src="/js/??util.js,index.js"></script>

// 合并后的 JS
function add(a,b) {
  return a + b;
}
var c = add(1,2);
alert(c);

使用 SeaJS 后的合并

上面的例子改用 SeaJS 的话会是这样

<script src="/js/sea.js"></script>
<script>
seajs.use("/js/index");
</script>

// util.js
define(function (require, exports) {
    exports.add = function (a, b) {
        return a + b;
    };
});