深刻Node.js的模块加载机制，手写require函数

模块是Node.js里面一个很基本也很重要的概念，各类原生类库是经过模块提供的，第三方库也是经过模块进行管理和引用的。本文会从基本的模块原理出发，到最后咱们会利用这个原理，本身实现一个简单的模块加载机制，即本身实现一个require。javascript

本文完整代码已上传GitHub：https://github.com/dennis-jiang/Front-End-Knowledges/blob/master/Examples/Node.js/Module/MyModule/index.jshtml

简单例子

老规矩，讲原理前咱们先来一个简单的例子，从这个例子入手一步一步深刻原理。Node.js里面若是要导出某个内容，须要使用module.exports，使用module.exports几乎能够导出任意类型的JS对象，包括字符串，函数，对象，数组等等。咱们先来建一个a.js导出一个最简单的hello world:前端

// a.js 
module.exports = "hello world";

而后再来一个b.js导出一个函数：java

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

module.exports = add;

而后在index.js里面使用他们，即require他们，require函数返回的结果就是对应文件module.exports的值：node

// index.js
const a = require('./a.js');
const add = require('./b.js');

console.log(a);      // "hello world"
console.log(add(1, 2));    // b导出的是一个加法函数，能够直接使用，这行结果是3

require会先运行目标文件

当咱们require某个模块时，并非只拿他的module.exports，而是会从头开始运行这个文件，module.exports = XXX其实也只是其中一行代码，咱们后面会讲到，这行代码的效果其实就是修改模块里面的exports属性。好比咱们再来一个c.js：jquery

// c.js
let c = 1;

c = c + 1;

module.exports = c;

c = 6;

在c.js里面咱们导出了一个c，这个c通过了几步计算，当运行到module.exports = c;这行时c的值为2，因此咱们require的c.js的值就是2，后面将c的值改成了6并不影响前面的这行代码:git

const c = require('./c.js');

console.log(c);  // c的值是2

前面c.js的变量c是一个基本数据类型，因此后面的c = 6;不影响前面的module.exports，那他若是是一个引用类型呢？咱们直接来试试吧：github

// d.js
let d = {
  num: 1
};

d.num++;

module.exports = d;

d.num = 6;

而后在index.js里面require他：json

const d = require('./d.js');

console.log(d);     // { num: 6 }

咱们发如今module.exports后面给d.num赋值仍然生效了，由于d是一个对象，是一个引用类型，咱们能够经过这个引用来修改他的值。其实对于引用类型来讲，不只仅在module.exports后面能够修改他的值，在模块外面也能够修改，好比index.js里面就能够直接改：api

const d = require('./d.js');

d.num = 7;
console.log(d);     // { num: 7 }

`require`和`module.exports`不是黑魔法

咱们经过前面的例子能够看出来，require和module.exports干的事情并不复杂，咱们先假设有一个全局对象{}，初始状况下是空的，当你require某个文件时，就将这个文件拿出来执行，若是这个文件里面存在module.exports，当运行到这行代码时将module.exports的值加入这个对象，键为对应的文件名，最终这个对象就长这样：

{
  "a.js": "hello world",
  "b.js": function add(){},
  "c.js": 2,
  "d.js": { num: 2 }
}

当你再次require某个文件时，若是这个对象里面有对应的值，就直接返回给你，若是没有就重复前面的步骤，执行目标文件，而后将它的module.exports加入这个全局对象，并返回给调用者。这个全局对象其实就是咱们常常据说的缓存。**因此require和module.exports并无什么黑魔法，就只是运行并获取目标文件的值，而后加入缓存，用的时候拿出来用就行。**再看看这个对象，由于d.js是一个引用类型，因此你在任何地方获取了这个引用均可以更改他的值，若是不但愿本身模块的值被更改，须要本身写模块时进行处理，好比使用Object.freeze()，Object.defineProperty()之类的方法。

模块类型和加载顺序

这一节的内容都是一些概念，比较枯燥，可是也是咱们须要了解的。

模块类型

Node.js的模块有好几种类型，前面咱们使用的其实都是文件模块，总结下来，主要有这两种类型：

内置模块：就是Node.js原生提供的功能，好比fs，http等等，这些模块在Node.js进程起来时就加载了。
文件模块：咱们前面写的几个模块，还有第三方模块，即node_modules下面的模块都是文件模块。

加载顺序

加载顺序是指当咱们require(X)时，应该按照什么顺序去哪里找X，在官方文档上有详细伪代码，总结下来大概是这么个顺序：

优先加载内置模块，即便有同名文件，也会优先使用内置模块。
不是内置模块，先去缓存找。
缓存没有就去找对应路径的文件。
不存在对应的文件，就将这个路径做为文件夹加载。
对应的文件和文件夹都找不到就去node_modules下面找。
还找不到就报错了。

加载文件夹

前面提到找不到文件就找文件夹，可是不可能将整个文件夹都加载进来，加载文件夹的时候也是有一个加载顺序的：

先看看这个文件夹下面有没有package.json，若是有就找里面的main字段，main字段有值就加载对应的文件。因此若是你们在看一些第三方库源码时找不到入口就看看他package.json里面的main字段吧，好比jquery的main字段就是这样："main": "dist/jquery.js"。
若是没有package.json或者package.json里面没有main就找index文件。
若是这两步都找不到就报错了。

支持的文件类型

require主要支持三种文件类型：

.js：.js文件是咱们最经常使用的文件类型，加载的时候会先运行整个JS文件，而后将前面说的module.exports做为require的返回值。
.json：.json文件是一个普通的文本文件，直接用JSON.parse将其转化为对象返回就行。
.node：.node文件是C++编译后的二进制文件，纯前端通常不多接触这个类型。

手写`require`

前面其实咱们已经将原理讲的七七八八了，下面来到咱们的重头戏，本身实现一个require。实现require其实就是实现整个Node.js的模块加载机制，咱们再来理一下须要解决的问题：

经过传入的路径名找到对应的文件。
执行找到的文件，同时要注入module和require这些方法和属性，以便模块文件使用。
返回模块的module.exports

本文的手写代码所有参照Node.js官方源码，函数名和变量名尽可能保持一致，其实就是精简版的源码，你们能够对照着看，写到具体方法时我也会贴上对应的源码地址。整体的代码都在这个文件里面：https://github.com/nodejs/node/blob/c6b96895cc74bc6bd658b4c6d5ea152d6e686d20/lib/internal/modules/cjs/loader.js

Module类

Node.js模块加载的功能所有在Module类里面，整个代码使用面向对象的思想，若是你对JS的面向对象还不是很熟悉能够先看看这篇文章。Module类的构造函数也不复杂，主要是一些值的初始化，为了跟官方Module名字区分开，咱们本身的类命名为MyModule：

function MyModule(id = '') {
  this.id = id;       // 这个id其实就是咱们require的路径
  this.path = path.dirname(id);     // path是Node.js内置模块，用它来获取传入参数对应的文件夹路径
  this.exports = {};        // 导出的东西放这里，初始化为空对象
  this.filename = null;     // 模块对应的文件名
  this.loaded = false;      // loaded用来标识当前模块是否已经加载
}

require方法

咱们一直用的require实际上是Module类的一个实例方法，内容很简单，先作一些参数检查，而后调用Module._load方法，源码看这里：https://github.com/nodejs/node/blob/c6b96895cc74bc6bd658b4c6d5ea152d6e686d20/lib/internal/modules/cjs/loader.js#L970。精简版的代码以下：

MyModule.prototype.require = function (id) {
  return Module._load(id);
}

MyModule._load

MyModule._load是一个静态方法，这才是require方法的真正主体，他干的事情实际上是：

先检查请求的模块在缓存中是否已经存在了，若是存在了直接返回缓存模块的exports。
若是不在缓存中，就new一个Module实例，用这个实例加载对应的模块，并返回模块的exports。

咱们本身来实现下这两个需求，缓存直接放在Module._cache这个静态变量上，这个变量官方初始化使用的是Object.create(null)，这样可使建立出来的原型指向null，咱们也这样作吧：

MyModule._cache = Object.create(null);

MyModule._load = function (request) {    // request是咱们传入的路劲参数
  const filename = MyModule._resolveFilename(request);

  // 先检查缓存，若是缓存存在且已经加载，直接返回缓存
  const cachedModule = MyModule._cache[filename];
  if (cachedModule !== undefined) {
    return cachedModule.exports;
  }

  // 若是缓存不存在，咱们就加载这个模块
  // 加载前先new一个MyModule实例，而后调用实例方法load来加载
  // 加载完成直接返回module.exports
  const module = new MyModule(filename);
  
  // load以前就将这个模块缓存下来，这样若是有循环引用就会拿到这个缓存，可是这个缓存里面的exports可能尚未或者不完整
  MyModule._cache[filename] = module;
  
  module.load(filename);
  
  return module.exports;
}

上述代码对应的源码看这里：https://github.com/nodejs/node/blob/c6b96895cc74bc6bd658b4c6d5ea152d6e686d20/lib/internal/modules/cjs/loader.js#L735

能够看到上述源码还调用了两个方法：MyModule._resolveFilename和MyModule.prototype.load，下面咱们来实现下这两个方法。

`MyModule._resolveFilename`

MyModule._resolveFilename从名字就能够看出来，这个方法是经过用户传入的require参数来解析到真正的文件地址的，源码中这个方法比较复杂，由于按照前面讲的，他要支持多种参数：内置模块，相对路径，绝对路径，文件夹和第三方模块等等，若是是文件夹或者第三方模块还要解析里面的package.json和index.js。咱们这里主要讲原理，因此咱们就只实现经过相对路径和绝对路径来查找文件，并支持自动添加js和json两种后缀名:

MyModule._resolveFilename = function (request) {
  const filename = path.resolve(request);   // 获取传入参数对应的绝对路径
  const extname = path.extname(request);    // 获取文件后缀名

  // 若是没有文件后缀名，尝试添加.js和.json
  if (!extname) {
    const exts = Object.keys(MyModule._extensions);
    for (let i = 0; i &lt; exts.length; i++) {
      const currentPath = `${filename}${exts[i]}`;

      // 若是拼接后的文件存在，返回拼接的路径
      if (fs.existsSync(currentPath)) {
        return currentPath;
      }
    }
  }

  return filename;
}

上述源码中咱们还用到了一个静态变量MyModule._extensions，这个变量是用来存各类文件对应的处理方法的，咱们后面会实现他。

MyModule._resolveFilename对应的源码看这里：https://github.com/nodejs/node/blob/c6b96895cc74bc6bd658b4c6d5ea152d6e686d20/lib/internal/modules/cjs/loader.js#L822

`MyModule.prototype.load`

MyModule.prototype.load是一个实例方法，这个方法就是真正用来加载模块的方法，这其实也是不一样类型文件加载的一个入口，不一样类型的文件会对应MyModule._extensions里面的一个方法：

MyModule.prototype.load = function (filename) {
  // 获取文件后缀名
  const extname = path.extname(filename);

  // 调用后缀名对应的处理函数来处理
  MyModule._extensions[extname](this, filename);

  this.loaded = true;
}

注意这段代码里面的this指向的是module实例，由于他是一个实例方法。对应的源码看这里: https://github.com/nodejs/node/blob/c6b96895cc74bc6bd658b4c6d5ea152d6e686d20/lib/internal/modules/cjs/loader.js#L942

加载js文件: MyModule._extensions['.js']

前面咱们说过不一样文件类型的处理方法都挂载在MyModule._extensions上面的，咱们先来实现.js类型文件的加载：

MyModule._extensions['.js'] = function (module, filename) {
  const content = fs.readFileSync(filename, 'utf8');
  module._compile(content, filename);
}

能够看到js的加载方法很简单，只是把文件内容读出来，而后调了另一个实例方法_compile来执行他。对应的源码看这里：https://github.com/nodejs/node/blob/c6b96895cc74bc6bd658b4c6d5ea152d6e686d20/lib/internal/modules/cjs/loader.js#L1098

编译执行js文件：MyModule.prototype._compile

MyModule.prototype._compile是加载JS文件的核心所在，也是咱们最常使用的方法，这个方法须要将目标文件拿出来执行一遍，执行以前须要将它整个代码包裹一层，以便注入exports, require, module, __dirname, __filename，这也是咱们能在JS文件里面直接使用这几个变量的缘由。要实现这种注入也不难，假如咱们require的文件是一个简单的Hello World，长这样：

module.exports = "hello world";

那咱们怎么来给他注入module这个变量呢？答案是执行的时候在他外面再加一层函数，使他变成这样：

function (module) { // 注入module变量，其实几个变量同理
  module.exports = "hello world";
}

因此咱们若是将文件内容做为一个字符串的话，为了让他可以变成上面这样，咱们须要再给他拼接上开头和结尾，咱们直接将开头和结尾放在一个数组里面:

MyModule.wrapper = [
  '(function (exports, require, module, __filename, __dirname) { ',
  '\n});'
];

注意咱们拼接的开头和结尾多了一个()包裹，这样咱们后面能够拿到这个匿名函数，在后面再加一个()就能够传参数执行了。而后将须要执行的函数拼接到这个方法中间：

MyModule.wrap = function (script) {
  return MyModule.wrapper[0] + script + MyModule.wrapper[1];
};

这样经过MyModule.wrap包装的代码就能够获取到exports, require, module, __filename, __dirname这几个变量了。知道了这些就能够来写MyModule.prototype._compile了:

MyModule.prototype._compile = function (content, filename) {
  const wrapper = Module.wrap(content);    // 获取包装后函数体

  // vm是nodejs的虚拟机沙盒模块，runInThisContext方法能够接受一个字符串并将它转化为一个函数
  // 返回值就是转化后的函数，因此compiledWrapper是一个函数
  const compiledWrapper = vm.runInThisContext(wrapper, {
    filename,
    lineOffset: 0,
    displayErrors: true,
  });

  // 准备exports, require, module, __filename, __dirname这几个参数
  // exports能够直接用module.exports，即this.exports
  // require官方源码中还包装了一层，其实最后调用的仍是this.require
  // module不用说，就是this了
  // __filename直接用传进来的filename参数了
  // __dirname须要经过filename获取下
  const dirname = path.dirname(filename);

  compiledWrapper.call(this.exports, this.exports, this.require, this,
    filename, dirname);
}

上述代码要注意咱们注入进去的几个参数和经过call传进去的this:

this:compiledWrapper是经过call调用的，第一个参数就是里面的this，这里咱们传入的是this.exports，也就是module.exports，也就是说咱们js文件里面this是对module.exports的一个引用。
exports: compiledWrapper正式接收的第一个参数是exports，咱们传的也是this.exports,因此js文件里面的exports也是对module.exports的一个引用。
require: 这个方法咱们传的是this.require，其实就是MyModule.prototype.require，也就是MyModule._load。
module: 咱们传入的是this，也就是当前模块的实例。
__filename：文件所在的绝对路径。
__dirname: 文件所在文件夹的绝对路径。

到这里，咱们的JS文件其实已经记载完了，对应的源码看这里:https://github.com/nodejs/node/blob/c6b96895cc74bc6bd658b4c6d5ea152d6e686d20/lib/internal/modules/cjs/loader.js#L1043

加载json文件: MyModule._extensions['.json']

加载json文件就简单多了，只须要将文件读出来解析成json就好了：

MyModule._extensions['.json'] = function (module, filename) {
  const content = fs.readFileSync(filename, 'utf8');
  module.exports = JSONParse(content);
}

`exports`和`module.exports`的区别

网上常常有人问，node.js里面的exports和module.exports到底有什么区别，其实前面咱们的手写代码已经给出答案了，咱们这里再就这个问题详细讲解下。exports和module.exports这两个变量都是经过下面这行代码注入的。

compiledWrapper.call(this.exports, this.exports, this.require, this,
    filename, dirname);

初始状态下，exports === module.exports === {}，exports是module.exports的一个引用，若是你一直是这样使用的:

exports.a = 1;
module.exports.b = 2;

console.log(exports === module.exports);   // true

上述代码中，exports和module.exports都是指向同一个对象{}，你往这个对象上添加属性并无改变这个对象自己的引用地址，因此exports === module.exports一直成立。

可是若是你哪天这样使用了:

exports = {
  a: 1
}

或者这样使用了:

module.exports = {
	b: 2
}

那其实你是给exports或者module.exports从新赋值了，改变了他们的引用地址，那这两个属性的链接就断开了，他们就再也不相等了。须要注意的是，你对module.exports的从新赋值会做为模块的导出内容，可是你对exports的从新赋值并不能改变模块导出内容，只是改变了exports这个变量而已，由于模块始终是module，导出内容是module.exports。

循环引用

Node.js对于循环引用是进行了处理的，下面是官方例子：

a.js:

console.log('a 开始');
exports.done = false;
const b = require('./b.js');
console.log('在 a 中，b.done = %j', b.done);
exports.done = true;
console.log('a 结束');

b.js:

console.log('b 开始');
exports.done = false;
const a = require('./a.js');
console.log('在 b 中，a.done = %j', a.done);
exports.done = true;
console.log('b 结束');

main.js:

console.log('main 开始');
const a = require('./a.js');
const b = require('./b.js');
console.log('在 main 中，a.done=%j，b.done=%j', a.done, b.done);

当 main.js 加载 a.js 时， a.js 又加载 b.js。此时， b.js 会尝试去加载 a.js。为了防止无限的循环，会返回一个 a.js 的 exports 对象的 未完成的副本 给 b.js 模块。而后 b.js 完成加载，并将 exports 对象提供给 a.js 模块。

那么这个效果是怎么实现的呢？答案就在咱们的MyModule._load源码里面，注意这两行代码的顺序:

MyModule._cache[filename] = module;

module.load(filename);

上述代码中咱们是先将缓存设置了，而后再执行的真正的load，顺着这个思路我能来理一下这里的加载流程:

main加载a，a在真正加载前先去缓存中占一个位置
a在正式加载时加载了b
b又去加载了a，这时候缓存中已经有a了，因此直接返回a.exports，即便这时候的exports是不完整的。

总结

require不是黑魔法，整个Node.js的模块加载机制都是JS实现的。
每一个模块里面的exports, require, module, __filename, __dirname五个参数都不是全局变量，而是模块加载的时候注入的。
为了注入这几个变量，咱们须要将用户的代码用一个函数包裹起来，拼一个字符串而后调用沙盒模块vm来实现。
初始状态下，模块里面的this, exports, module.exports都指向同一个对象，若是你对他们从新赋值，这种链接就断了。
对module.exports的从新赋值会做为模块的导出内容，可是你对exports的从新赋值并不能改变模块导出内容，只是改变了exports这个变量而已，由于模块始终是module，导出内容是module.exports。
为了解决循环引用，模块在加载前就会被加入缓存，下次再加载会直接返回缓存，若是这时候模块还没加载完，你可能拿到未完成的exports。
Node.js实现的这套加载机制叫CommonJS。

本文完整代码已上传GitHub：https://github.com/dennis-jiang/Front-End-Knowledges/blob/master/Examples/Node.js/Module/MyModule/index.js

参考资料

Node.js模块加载源码：https://github.com/nodejs/node/blob/c6b96895cc74bc6bd658b4c6d5ea152d6e686d20/lib/internal/modules/cjs/loader.js

Node.js模块官方文档：http://nodejs.cn/api/modules.html

文章的最后，感谢你花费宝贵的时间阅读本文，若是本文给了你一点点帮助或者启发，请不要吝啬你的赞和GitHub小星星，你的支持是做者持续创做的动力。

“前端进阶知识”系列文章及示例源码： https://github.com/dennis-jiang/Front-End-Knowledges

欢迎关注个人公众号进击的大前端第一时间获取高质量原创~