Common JS导包原理

参考:https://juejin.im/post/6844904159385239566
https://github.com/tjx666/module-explore

add.js

function add(a, b) {
  return a + b;
}

// 整个模块会被包到一个函数中，this 被指向 module.exports
this.a = 1;
// exports 就是 module.exports 的引用
exports.b = 2;

// 上面的导出都被覆盖
module.exports = add;

打包入口index.js

const add = require("./add");
console.log("index.js")
console.log(`1 + 1 = ${add(1, 1)}`);

webpack打包出来浏览器执行的bundle文件:

(() => {
  var __webpack_modules__ = ({
    "./src/commonjs/add.js": (function (module, exports) {

      function add(a, b) {
        return a + b;
      }

      // 整个模块会被包到一个函数中，this 被指向 module.exports
      this.a = 1;
      // exports 就是 module.exports 的引用
      exports.b = 2;

      // 上面的导出都被覆盖
      module.exports = add;
    })

    
  });
  
  var __webpack_module_cache__ = {};
  
  function __webpack_require__(moduleId) {
  
    if (__webpack_module_cache__[moduleId]) {
  
      return __webpack_module_cache__[moduleId].exports;
  
    }
  
    var module = __webpack_module_cache__[moduleId] = {
  
      exports: {}
  
    };
  
    __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  
    return module.exports;
  
  }
  
  (() => {
    const add = __webpack_require__("./src/commonjs/add.js");
    console.log(`1 + 1 = ${add(1, 1)}`);
  })();
  
})();

打包出来是一个立即执行函数, 最外层的立即函数会首先执行入口文件的代码, 每一个模块(js文件)都在立即执行函数作用域中, 通过函数返回值的方式返回导出的变量,这样就不会造成变量污染