假设是有以下三个模块,模块的依赖关系如下。
src/index.js
const a = require("./src/a.js");
require("./src/b.js");
console.log(a);
src/a.js
module.exports = 'a';
require("./src/b.js");
src/b.js
console.log('run');
从入口模块src/index,js
分析依赖
首先,这些模块会生成一个模块对象,模块路径为属性名,值是一个函数,函数放着这个模块转换后的代码。
const modules ={
'./src/b.js' : function (module,exports,require) {
console.log('run');
},
'./src/a.js' : function (module,exports,require) {
module.exports = 'a';
require("./src/b.js");
},
'./src/index.js' : function (module,exports,require) {
const a = require("./src/a.js");
require("./src/b.js");
console.log(a);
}
}
这样子可以保证每个模块的代码都是在一个函数内执行,保证每个模块之间的变量不会发生污染。
为了适应所有的模块化规范,webpack会把依赖函数替换成自己的。
function webpack_require(moduleId) { // 模块id就是模块的路径
if(moduleCache[moduleId]) {
// 如果有缓存,直接返回执行结果
return moduleCache[moduleId];
}
const func = modules[moduleId]; // 拿到某个模块对应的执行函数
const module = {
exports : {}
}
func(module,module.exports,require); // 执行模块函数导出执行结果
moduleCache[moduleId] = module.exports; // 缓存模块的导出结果
return moduleCache[moduleId]; // 返回模块的导出结果
}
如果这样直接写的话,会全局污染一个函数和变量,所以整个过程是放在一个立即执行函数执行的
(function (modules) {
const moduleCache = {}; // 模块缓存
function webpack_require(moduleId) { // 模块id就是模块的路径
// 我们要做的就是写这个require函数
if(moduleCache[moduleId]) {
// 如果有缓存,直接返回执行结果
return moduleCache[moduleId];
}
const func = modules[moduleId]; // 拿到某个模块对应的执行函数
const module = {
exports : {}
}
func(module,module.exports,webpack_require); // 执行模块函数导出执行结果
moduleCache[moduleId] = module.exports; // 缓存模块的导出结果
return moduleCache[moduleId]; // 返回模块的导出结果
}
webpack_require("./src/index.js") // 执行入口模块
})({
'./src/b.js' : function (module,exports,require) {
console.log('run');
},
'./src/a.js' : function (module,exports,require) {
module.exports = 'a';
require("./src/b.js");
},
'./src/index.js' : function (module,exports,require) {
const a = require("./src/a.js");
require("./src/b.js"); // 一个模块被多个模块依赖,被依赖的模块只会执行一次 缓存导出结果
console.log(a);
}
});
实际打包结果的代码,还会比较复杂,但是重在理解webpack的做法。以上只是我的一个理解。
webpack如何实现模块之间变量不污染的
- webpack通过将模块代码放到一个函数内执行,利用函数作用域解决了模块之间变量污染的问题,并且为了不影响全局,整个运行过程是在一个立即执行函数内完成的。