browserify.js 的模块加载

browserify的模块加载基本上和nodejs的类似: 

nodejs 的模块加载是依次去读取文件然后用一个类eval() 函数执行并返回module.exports的结果。为了避免循环加载，在加载模块文件之前就在模块缓存中做了设置，使得循环加载中的回路中断。

比较起来，browserify的模块加载分两步，第一步需要在命令行中执行browserify module1.js module2.js module3.js > bundle.js，这会将所有模块聚合到bundle.js中，并生成一个依赖结构。

下面是bundle.js代码，多数被缩减的变量名我已经用含义较明确的词做了替换：

(function e(t, cache, indexArray) {
    function s(i, u) {
        if (!cache[i]) {
            if (!t[i]) { // when? !moduleIndex==false ?
                var req2 = typeof require == "function" && require;
                if (!u && req2)return req2(i, !0);
                if (req)return req(i, !0);
                var f = new Error("Cannot find module '" + i + "'");
                throw f.code = "MODULE_NOT_FOUND", f
            }
            var modu = cache[i] = {exports: {}};                // set it to cache first to avoid loop loading.
            t[i][0].call(
                modu.exports,
                function (path) {                               // the real "require" function.
                    var moduleIndex = t[i][1][path];
                    return s(moduleIndex ? moduleIndex : path)  // use s() to check cache first.
                },
                modu,                                           // pass module
                modu.exports,                                   // pase module.exports
                e,
                t,
                cache,
                indexArray
            )
        }
        return cache[i].exports
    }

    var req = typeof require == "function" && require;
    for (var i = 0; i < indexArray.length; i++)                 // load module one by one.
        s(indexArray[i]);
    return s
})({
        1 : [
            function (require, module, exports) {
                var test2 = require('./module2.js');
                var test3 = require('./module3.js');

                var test1 = function () {
                    test2();
                }
            },
            {"./module2.js": 2, "./module3.js": 3}
        ],
        2: [
            function (require, module, exports) {
                var test3 = require('./module3.js');

                var test2 = function () {
                }

                module.exports = test2;
            },
            {"./module3.js": 3}
        ],
        3 : [
            function (require, module, exports) {
                var test3 = function () {
                }

                module.exports = test3;
            },
            {}
        ]
    },
    {},        // module cache
    [1, 2, 3]  // indexArray
);

和nodejs比较起来，browserify把文件加载和依赖关系生成放到了 bundle.js的产生阶段。在bundle.js真正的执行阶段，只需要依次执行依赖结构中的模块实体就好了。

比起首页中大量的<script>标签，browserify使得模块的依赖关系变得清晰，各个模块有自己的变量空间，全局空间不会受到污染。

但同步加载、不能动态按需加载是个缺点。

下面转向WebPack，据说可以替代Gulp，还能按需加载模块的项目。