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，还能按需加载模块的项目。