通过一份require 伪代码了解CommonJs导入

80 阅读1分钟

先看一道题

1.js文件

// commonJs 规则下,这里等同于在一个函数内部执行代码,让我们打印一下 arguments
console.log(arguments.length); // 5
// 这五个参数分别为 exports, require, module, __filename, __dirname,具体代表什么我们可以在下面的 require伪代码里了解
console.log(this === exports); // true
console.log(exports === module.exports); // true




this.a = 1;
exports.b = 2;
exports = { // 这里开始exports不在等于this
  c: 3
}
module.exports = {
  d: 4 
}
exports.e = 5;
this.i = 6;

console.log(this); // { a: 1, b: 2, i: 6 }

index.js引用

var obj = require('./1.js');

console.log(obj); // {d:4}

看看 require 干了些什么

// 让我们通过一份 require 伪代码认识 commonJs 导出
function require(modulePath) {
  // 1. 根据传递进来的模块路径,得到模块完整的绝对路径
  var moduleId = getModuleId(modulePath);

  // 2. 判断缓存
  if(cache[moduleId]) {
    return cache[moduleId];
  }
  
  // 3. 真正运行模块代码的辅助函数
  function _require(exports, require, module, __filename, __dirname) {
    // 目标模块的代码将在这里运行
    this.a = 1;
    exports.b = 2;
    exports = {
      c: 3
    }
    module.exports = {
      d: 4 
    }
    exports.e = 5;
    this.i = 6;
  }

  // 4. 准备好参数运行辅助函数
  var module = {
    exports: {}
  };
  var exports = module.exports;
  // 得到模块的绝对路径
  var __filename = getModuleId(modulePath);
  // 得到模块所在目录的绝对路径
  var __dirname = getDirname(__filename);
  // 5. 传入参数运行模块代码
  _require.call(exports, _require, module, __filename, __dirname);

  // 6. 缓存
  cache[moduleId] = module.exports;
  // 7. 返回模块的module.exports
  return module.exports;

}