foreword（前言）

最近在看极客时间的“nodejs开发实战”，其中有个nodejs中commonjs模块规范的例子，例子中可以得出的结论是如果以module.exports作为导出，那么其优先级是最高的。

我对此非常好奇，它的运行机制是怎样的？

作者在最后给出了一个小引导，通过webpack将nodejs代码打包成js代码，并以js的角度来作为一个窗口。

所以，本篇文章，我想要做的是将这打包好的js代码进行拆解并逐个分析，以此大概理解它背后的运行模式。

example（案例）

首先，我们给出nodejs的代码案例：

/commonjs/lib.js:

exports.hello = 'world'

module.exports = function minus (a, b) {
  return a - b
}

exports.add = function (a, b) {
  return a + b
}

/commonjs/index.js:

var lib = require('./lib.js')

console.log(lib)

我们通过node commonjs/index.js，终端输出minus这个函数。

然后我们再执行脚本：webpack --devtool none --mode=development --target node commonjs/index.js

会在我们的根目录下生成一个dist文件夹，并在里面生成一个main.js文件：

main.js:

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = "./commonjs/index.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./commonjs/index.js":
/*!***************************!*\
  !*** ./commonjs/index.js ***!
  \***************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

var lib = __webpack_require__(/*! ./lib.js */ "./commonjs/lib.js")

console.log(lib)



/***/ }),

/***/ "./commonjs/lib.js":
/*!*************************!*\
  !*** ./commonjs/lib.js ***!
  \*************************/
/*! no static exports found */
/***/ (function(module, exports) {

exports.hello = 'world'

module.exports = function minus (a, b) {
  return a - b
}

exports.add = function (a, b) {
  return a + b
}


/***/ })

/******/ });

总共也就124行的代码（注释和空行很多，应该不到100行代码，或者只有五六七八十行），读完它不需要花费很长时间，但我们得理解它。

module split（模块拆分）

整段代码是一个匿名函数的自调，所以我们首先将代码分成两部分：函数体、参数。

参数

我们首先从参数开始看，主要的逻辑在函数体中，参数相对于比较简单：

{
  "./commonjs/index.js": (function (module, exports, __webpack_require__) {
      var lib = __webpack_require__("./commonjs/lib.js")
      console.log(lib)
  }),
  "./commonjs/lib.js": (function (module, exports) {
      exports.hello = 'world'
      module.exports = function minus(a, b) {
          return a - b
      }
      exports.add = function (a, b) {
          return a + b
      }
  })
}

我将参数中多余的注释去掉，即上述代码。这是一个对象，对象中有两个函数类型的属性，很容易我们可以看出代表的就是我们在打包之前的两个脚本文件——commonjs/index.js和commonjs/lib.js，两个函数的参数结构基本一样，前两个参数为module和exports，index.js中因为引入了lib.js，所以我们需要额外的一个require参数（代码中为__webpack_require__），接着函数体内就是我们之前两个脚本文件中的完全一样的脚本。

函数体

var a = function (modules) { // webpackBootstrap
  // The module cache
  var installedModules = {};

  // The require function
  function __webpack_require__(moduleId) {

      // Check if module is in cache
      if (installedModules[moduleId]) {
          return installedModules[moduleId].exports;
      }
      // Create a new module (and put it into the cache)
      var module = installedModules[moduleId] = {
          i: moduleId,
          l: false,
          exports: {}
      };

      // Execute the module function
      modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

      // Flag the module as loaded
      module.l = true;

      // Return the exports of the module
      return module.exports;
  }


  // expose the modules object (__webpack_modules__)
  __webpack_require__.m = modules;

  // expose the module cache
  __webpack_require__.c = installedModules;

  // define getter function for harmony exports
  __webpack_require__.d = function (exports, name, getter) {
      if (!__webpack_require__.o(exports, name)) {
          Object.defineProperty(exports, name, {
              enumerable: true,
              get: getter
          });
      }
  };

  // define __esModule on exports
  __webpack_require__.r = function (exports) {
      if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
          Object.defineProperty(exports, Symbol.toStringTag, {
              value: 'Module'
          });
      }
      Object.defineProperty(exports, '__esModule', {
          value: true
      });
  };

  // create a fake namespace object
  // mode & 1: value is a module id, require it
  // mode & 2: merge all properties of value into the ns
  // mode & 4: return value when already ns object
  // mode & 8|1: behave like require
  __webpack_require__.t = function (value, mode) {
      if (mode & 1) value = __webpack_require__(value);
      if (mode & 8) return value;
      if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
      var ns = Object.create(null);
      __webpack_require__.r(ns);
      Object.defineProperty(ns, 'default', {
          enumerable: true,
          value: value
      });
      if (mode & 2 && typeof value != 'string')
          for (var key in value) __webpack_require__.d(ns, key, function (key) {
              return value[key];
          }.bind(null, key));
      return ns;
  };

  // getDefaultExport function for compatibility with non-harmony modules
  __webpack_require__.n = function (module) {
      var getter = module && module.__esModule ?
          function getDefault() {
              return module['default'];
          } :
          function getModuleExports() {
              return module;
          };
      __webpack_require__.d(getter, 'a', getter);
      return getter;
  };

  // Object.prototype.hasOwnProperty.call
  __webpack_require__.o = function (object, property) {
      return Object.prototype.hasOwnProperty.call(object, property);
  };

  // __webpack_public_path__
  __webpack_require__.p = "";


  // Load entry module and return exports
  return __webpack_require__(__webpack_require__.s = "./commonjs/index.js");
}

这一块，我们可以将整体逻辑分成三块：__webpack_require__函数、__webpack_require__函数额外的属性、函数的return。

1.__webpack_require__函数

我们主要关注这几句代码：

• 这是一个模块的数据结构：

// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
    i: moduleId,
    l: false,
    exports: {}
};

• 结合一开始匿名函数的参数结构 ——（module, exports, require），exports是module的子集对象，如果给module.exports赋予一个新的对象，exports已经被抛弃，所以从这里，我们知道了为什么如果我们用到了module.exports，那么module.export会将exports覆盖了。

// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

• 这一句，我们关注的是最后的return，输出的是module.exports，这其实在前面两段代码中我们就可以预料到了。

// Flag the module as loaded
module.l = true;

// Return the exports of the module
return module.exports;

我们再接着看。

2.函数的return

其实整段代码的执行就只有最后大那一句return，它只调用了__webpack_require__，所以我们只要看这一句就行了。

它传了一个路径字符串，刚好是匿名函数参数中index.js脚本函数对应的属性名，根据__webpack_require__函数的声明，首先会创建一个module对象，然后执行以下语句：

var lib = __webpack_require__("./commonjs/lib.js")
console.log(lib)

其中的__webpack_require__("./commonjs/lib.js")也会创建一个module对象，并通过lib.js中的脚本给module进行操作，然后将module.exports返回给上面代码的lib。

到这里，模块的导入导出运行机制我们已经有了稍微清晰的轮廓，按照这样的方式，对于模块间的导出引入，基本上已经满足了我们的需求。

3.__webpack_require__函数额外的属性

这部分代码和本次demo其实没有任何关系，不过出于一探究竟的心态，还是阅读了一下。

这两句分别用一个属性暴露了modules（匿名函数中传的参，我这里姑且称他为模块队列好了）和 installedModules（这个是代码开头声明的一个用来缓存模块数据的变量，主要由一个模块标示moduleId和导出的数据组成）

// expose the modules object (__webpack_modules__)
__webpack_require__.m = modules; 

// expose the module cache
__webpack_require__.c = installedModules;

下面这个函数是一个工具函数，用于给某个对象的某个属性添加getter。

// define getter function for harmony exports
  __webpack_require__.d = function (exports, name, getter) {
      if (!__webpack_require__.o(exports, name)) {
          Object.defineProperty(exports, name, {
              enumerable: true,
              get: getter
          });
      }
  };

下面这句用来在导出对象中设置esModule标示，具体怎么用，由于本次demo中没有用到，不清楚。（大概的思考方向觉得应该是在脚本中用了EsModule中的export时会用到这个方法，由于时间问题，本次文章就不再继续进行验证了）

// define __esModule on exports
  __webpack_require__.r = function (exports) {
      if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
          Object.defineProperty(exports, Symbol.toStringTag, {
              value: 'Module'
          });
      }
      Object.defineProperty(exports, '__esModule', {
          value: true
      });
  };

下面这句个人猜测是声明一个基于EsModule的导出模块数据结构。

  // create a fake namespace object（声明一个假的命名空间对象）
  // mode & 1: value is a module id, require it
  // mode & 2: merge all properties of value into the ns
  // mode & 4: return value when already ns object
  // mode & 8|1: behave like require
  __webpack_require__.t = function (value, mode) {
      if (mode & 1) value = __webpack_require__(value);
      if (mode & 8) return value;
      if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
      var ns = Object.create(null);
      __webpack_require__.r(ns);
      Object.defineProperty(ns, 'default', {
          enumerable: true,
          value: value // module.exports
      });
      if (mode & 2 && typeof value != 'string')
          for (var key in value) __webpack_require__.d(ns, key, function (key) {
              return value[key];
          }.bind(null, key));
      return ns;
  };

这句由于看到了module.__esModule和return module[‘default’]，大致可以判定是根据模块规范类型，选择不同的获取导出模块数据的方法，其中的getDefault大概用于获取EsModule中的export default导出的数据。

// getDefaultExport function for compatibility with non-harmony modules
  __webpack_require__.n = function (module) {
      var getter = module && module.__esModule ?
          function getDefault() {
              return module['default'];
          } :
          function getModuleExports() {
              return module;
          };
      __webpack_require__.d(getter, 'a', getter);
      return getter;
  };

判断对象中是否包含某个属性。

// Object.prototype.hasOwnProperty.call
  __webpack_require__.o = function (object, property) {
      return Object.prototype.hasOwnProperty.call(object, property);
};

这是个路径，具体这个public path代表着什么不清楚。

// __webpack_public_path__
  __webpack_require__.p = "";

图例

最后，我根据个人的理解做了一张图。基于上面的分析过程，如果和上面模式一样，我们可以想象一下，nodejs在处理的时候或许首先有个脚本去获取一个模块集ModuleSet（这个模块集是基于入口脚本开始，所有有关联的模块的集合），我在图中用Input来表示，然后Input脚本再将这个ModuleSet传给一个脚本Script，我们假设它是一个函数，函数中通过require方法从入口点开始不断扩展。

last（最后）
非常感谢您能阅读完这篇文章，您的阅读是我不断前进的动力。

对于上面所述，有什么新的观点或发现有什么错误，希望您能指出。

最后，附上个人常逛的社交平台：
知乎：https://www.zhihu.com/people/bi-an-yao-91/activities
csdn：https://blog.csdn.net/YaoDeBiAn
github: https://github.com/yaodebian

个人目前能力有限，并没有自主构建一个社区的能力，如有任何问题或想法与我沟通，请通过上述某个平台联系我，谢谢！！！