[JavaScript知识库]webpack如何实现模块之间变量不污染的

假设是有以下三个模块，模块的依赖关系如下。
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通过将模块代码放到一个函数内执行，解决了模块之间变量污染的问题，并且为了不影响全局，整个运行过程是在一个立即执行函数内完成的。