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
);