Nodejs的CommonJS規(guī)范實(shí)現(xiàn)原理

了解 Node.js

Node.js 是一個(gè)基于 ChromeV8 引擎的 JavaScript 運(yùn)行環(huán)境，使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式 I/O 模型，讓 JavaScript 運(yùn)行在服務(wù)端的開發(fā)平臺(tái)，它讓 JavaScript 成為與 PHP、Python、Perl、Ruby 等服務(wù)端語言平起平坐的腳本語言。Node 中增添了很多內(nèi)置的模塊，提供各種各樣的功能，同時(shí)也提供許多第三方模塊。

模塊的問題

為什么要有模塊

復(fù)雜的前端項(xiàng)目需要做分層處理，按照功能、業(yè)務(wù)、組件拆分成模塊， 模塊化的項(xiàng)目至少有以下優(yōu)點(diǎn)：

便于單元測試

便于同事間協(xié)作

抽離公共方法，開發(fā)快捷

按需加載，性能優(yōu)秀

高內(nèi)聚低耦合

防止變量沖突

方便代碼項(xiàng)目維護(hù)

幾種模塊化規(guī)范

CMD (SeaJS 實(shí)現(xiàn)了 CMD)

AMD (RequireJS 實(shí)現(xiàn)了 AMD)

UMD (同時(shí)支持 AMD 和 CMD)

IIFE （自執(zhí)行函數(shù)）

CommonJS （Node 采用了 CommonJS）

ES Module 規(guī)范 (JS 官方的模塊化方案)

Node 中的模塊

Node 中采用了 CommonJS 規(guī)范

實(shí)現(xiàn)原理：

Node 中會(huì)讀取文件，拿到內(nèi)容實(shí)現(xiàn)模塊化， Require 方法 同步引用

tips：Node 中任何 js 文件都是一個(gè)模塊，每一個(gè)文件都是模塊

Node 中模塊類型

內(nèi)置模塊，屬于核心模塊，無需安裝，在項(xiàng)目中不需要相對(duì)路徑引用， Node 自身提供。

文件模塊，程序員自己書寫的 js 文件模塊。

第三方模塊， 需要安裝， 安裝之后不用加路徑。

Node 中內(nèi)置模塊

fs filesystem

操作文件都需要用到這個(gè)模塊

const path = require('path'); // 處理路徑
const fs = require('fs'); // file system
// // 同步讀取
let content = fs.readFileSync(path.resolve(__dirname, 'test.js'), 'utf8');
console.log(content);

let exists = fs.existsSync(path.resolve(__dirname, 'test1.js'));
console.log(exists);

path 路徑處理

const path = require('path'); // 處理路徑


// join / resolve 用的時(shí)候可以混用

console.log(path.join('a', 'b', 'c', '..', '/'))

// 根據(jù)已經(jīng)有的路徑來解析絕對(duì)路徑， 可以用他來解析配置文件
console.log(path.resolve('a', 'b', '/')); // resolve 不支持/ 會(huì)解析成根路徑

console.log(path.join(__dirname, 'a'))
console.log(path.extname('1.js'))
console.log(path.dirname(__dirname)); // 解析父目錄

vm 運(yùn)行代碼

字符串如何能變成 JS 執(zhí)行呢？ 1.eval eval 中的代碼執(zhí)行時(shí)的作用域?yàn)楫?dāng)前作用域。它可以訪問到函數(shù)中的局部變量。

let test = 'global scope'
global.test1 = '123'
function b(){
  test = 'fn scope'
  eval('console.log(test)'); //local scope
  new Function('console.log(test1)')() // 123
  new Function('console.log(test)')() //global scope
}
b()

2.new Function new Function () 創(chuàng)建函數(shù)時(shí)，不是引用當(dāng)前的詞法環(huán)境，而是引用全局環(huán)境，F(xiàn)unction 中的表達(dá)式使用的變量要么是傳入的參數(shù)要么是全局的值 Function可以獲取全局變量，所以它還是可能會(huì)有變量污染的情況出現(xiàn)

function getFn() {
  let value = "test"
  let fn = new Function('console.log(value)')
  return fn
}

getFn()()

global.a = 100 // 掛在到全局對(duì)象global上
new Function("console.log(a)")() // 100

3.vm

前面兩種方式，我們一直強(qiáng)調(diào)一個(gè)概念，那就是變量的污染

VM 的特點(diǎn)就是不受環(huán)境的影響，也可以說他就是一個(gè)沙箱環(huán)境

在 Node 中全局變量是在多個(gè)模塊下共享的，所以盡量不要在 global 中定義屬性

所以，vm.runInThisContext可以訪問到global上的全局變量，但是訪問不到自定義的變量。而vm.runInNewContext訪問不到global，也訪問不到自定義變量，他存在于一個(gè)全新的執(zhí)行上下文

const vm = require('vm')
global.a = 1
// vm.runInThisContext("console.log(a)")
vm.runInThisContext("a = 100") // 沙箱，獨(dú)立的環(huán)境
console.log(a) // 1
vm.runInNewContext('console.log(a)')
console.log(a) // a is not defined

Node 模塊化的實(shí)現(xiàn) node 中是自帶模塊化機(jī)制的，每個(gè)文件就是一個(gè)單獨(dú)的模塊，并且它遵循的是 CommonJS 規(guī)范，也就是使用 require 的方式導(dǎo)入模塊，通過 module.export 的方式導(dǎo)出模塊。 node 模塊的運(yùn)行機(jī)制也很簡單，其實(shí)就是在每一個(gè)模塊外層包裹了一層函數(shù)，有了函數(shù)的包裹就可以實(shí)現(xiàn)代碼間的作用域隔離。 我們先在一個(gè) js 文件中直接打印 arguments，得到的結(jié)果如下圖所示，我們先記住這些參數(shù)。

console.log(arguments) // exports, require, module, __filename, __dirname

??

Node 中通過 modules.export 導(dǎo)出，require 引入。其中 require 依賴 node 中的 fs 模塊來加載模塊文件，通過 fs.readFile 讀取到的是一個(gè)字符串。 在 javascrpt 中可以通過 eval 或者 new Function 的方式來將一個(gè)字符串轉(zhuǎn)換成 js 代碼來運(yùn)行。但是前面提到過，他們都有一個(gè)致命的問題，就是變量的污染。

實(shí)現(xiàn) require 模塊加載器

首先導(dǎo)入依賴的模塊path，fs,vm, 并且創(chuàng)建一個(gè)Require函數(shù)，這個(gè)函數(shù)接收一個(gè)modulePath參數(shù)，表示要導(dǎo)入的文件路徑

const path = require('path');
const fs = require('fs');
const vm = require('vm');
// 定義導(dǎo)入類，參數(shù)為模塊路徑
function Require(modulePath) {
   ...
}

在 Require 中獲取到模塊的絕對(duì)路徑，使用 fs 加載模塊，這里讀取模塊內(nèi)容使用 new Module 來抽象，使用 tryModuleLoad 來加載模塊內(nèi)容，Module 和 tryModuleLoad 稍后實(shí)現(xiàn)，Require 的返回值應(yīng)該是模塊的內(nèi)容，也就是 module.exports。

// 定義導(dǎo)入類，參數(shù)為模塊路徑
function Require(modulePath) {
    // 獲取當(dāng)前要加載的絕對(duì)路徑
    let absPathname = path.resolve(__dirname, modulePath);
    // 創(chuàng)建模塊，新建Module實(shí)例
    const module = new Module(absPathname);
    // 加載當(dāng)前模塊
    tryModuleLoad(module);
    // 返回exports對(duì)象
    return module.exports;
}

Module 的實(shí)現(xiàn)就是給模塊創(chuàng)建一個(gè) exports 對(duì)象，tryModuleLoad 執(zhí)行的時(shí)候?qū)?nèi)容加入到 exports 中，id 就是模塊的絕對(duì)路徑。

// 定義模塊, 添加文件id標(biāo)識(shí)和exports屬性
function Module(id) {
    this.id = id;
    // 讀取到的文件內(nèi)容會(huì)放在exports中
    this.exports = {};
}

node 模塊是運(yùn)行在一個(gè)函數(shù)中，這里給 Module 掛載靜態(tài)屬性 wrapper，里面定義一下這個(gè)函數(shù)的字符串，wrapper 是一個(gè)數(shù)組，數(shù)組的第一個(gè)元素就是函數(shù)的參數(shù)部分，其中有 exports，module，Require，__dirname，__filename, 都是模塊中常用的全局變量.

第二個(gè)參數(shù)就是函數(shù)的結(jié)束部分。兩部分都是字符串，使用的時(shí)候?qū)⑺麄儼谀K的字符串外部就可以了。

// 定義包裹模塊內(nèi)容的函數(shù)
Module.wrapper = [
    "(function(exports, module, Require, __dirname, __filename) {",
    "})"
]

_extensions 用于針對(duì)不同的模塊擴(kuò)展名使用不同的加載方式，比如 JSON 和 javascript 加載方式肯定是不同的。JSON 使用 JSON.parse 來運(yùn)行。

javascript 使用 vm.runInThisContext 來運(yùn)行，可以看到 fs.readFileSync 傳入的是 module.id 也就是 Module 定義時(shí)候 id 存儲(chǔ)的是模塊的絕對(duì)路徑，讀取到的 content 是一個(gè)字符串，使用 Module.wrapper 來包裹一下就相當(dāng)于在這個(gè)模塊外部又包裹了一個(gè)函數(shù)，也就實(shí)現(xiàn)了私有作用域。

使用 call 來執(zhí)行 fn 函數(shù)，第一個(gè)參數(shù)改變運(yùn)行的 this 傳入 module.exports，后面的參數(shù)就是函數(shù)外面包裹參數(shù) exports, module, Require, __dirname, __filename。/

// 定義擴(kuò)展名，不同的擴(kuò)展名，加載方式不同，實(shí)現(xiàn)js和json
Module._extensions = {
    '.js'(module) {
        const content = fs.readFileSync(module.id, 'utf8');
        const fnStr = Module.wrapper[0] + content + Module.wrapper[1];
        const fn = vm.runInThisContext(fnStr);
        fn.call(module.exports, module.exports, module, Require,__filename,__dirname);
    },
    '.json'(module) {
        const json = fs.readFileSync(module.id, 'utf8');
        module.exports = JSON.parse(json); // 把文件的結(jié)果放在exports屬性上
    }
}

tryModuleLoad 函數(shù)接收的是模塊對(duì)象，通過 path.extname 來獲取模塊的后綴名，然后使用 Module._extensions 來加載模塊。

// 定義模塊加載方法
function tryModuleLoad(module) {
    // 獲取擴(kuò)展名
    const extension = path.extname(module.id);
    // 通過后綴加載當(dāng)前模塊
    Module._extensions[extension](module); // 策略模式？？？
}

到此 Require 加載機(jī)制基本就寫完了。Require 加載模塊的時(shí)候傳入模塊名稱，在 Require 方法中使用 path.resolve (__dirname, modulePath) 獲取到文件的絕對(duì)路徑。然后通過 new Module 實(shí)例化的方式創(chuàng)建 module 對(duì)象，將模塊的絕對(duì)路徑存儲(chǔ)在 module 的 id 屬性中，在 module 中創(chuàng)建 exports 屬性為一個(gè) json 對(duì)象。

使用 tryModuleLoad 方法去加載模塊，tryModuleLoad 中使用 path.extname 獲取到文件的擴(kuò)展名，然后根據(jù)擴(kuò)展名來執(zhí)行對(duì)應(yīng)的模塊加載機(jī)制。

最終將加載到的模塊掛載 module.exports 中。tryModuleLoad 執(zhí)行完畢之后 module.exports 已經(jīng)存在了，直接返回就可以了。

接下來，我們給模塊添加緩存。就是文件加載的時(shí)候?qū)⑽募湃刖彺嬷?，再去加載模塊時(shí)先看緩存中是否存在，如果存在直接使用，如果不存在再去重新加載，加載之后再放入緩存。

// 定義導(dǎo)入類，參數(shù)為模塊路徑
function Require(modulePath) {
  // 獲取當(dāng)前要加載的絕對(duì)路徑
  let absPathname = path.resolve(__dirname, modulePath);
  // 從緩存中讀取，如果存在，直接返回結(jié)果
  if (Module._cache[absPathname]) {
      return Module._cache[absPathname].exports;
  }
  // 創(chuàng)建模塊，新建Module實(shí)例
  const module = new Module(absPathname);
  // 添加緩存
  Module._cache[absPathname] = module;
  // 加載當(dāng)前模塊
  tryModuleLoad(module);
  // 返回exports對(duì)象
  return module.exports;
}

增加功能：省略模塊后綴名。

自動(dòng)給模塊添加后綴名，實(shí)現(xiàn)省略后綴名加載模塊，其實(shí)也就是如果文件沒有后綴名的時(shí)候遍歷一下所有的后綴名看一下文件是否存在。

// 定義導(dǎo)入類，參數(shù)為模塊路徑
function Require(modulePath) {
  // 獲取當(dāng)前要加載的絕對(duì)路徑
  let absPathname = path.resolve(__dirname, modulePath);
  // 獲取所有后綴名
  const extNames = Object.keys(Module._extensions);
  let index = 0;

  // 存儲(chǔ)原始文件路徑
  const oldPath = absPathname;
  function findExt(absPathname) {
      if (index === extNames.length) {
         return throw new Error('文件不存在');
      }
      try {
          fs.accessSync(absPathname);
          return absPathname;
      } catch(e) {
          const ext = extNames[index++];
          findExt(oldPath + ext);
      }
  }
  
  // 遞歸追加后綴名，判斷文件是否存在
  absPathname = findExt(absPathname);
  // 從緩存中讀取，如果存在，直接返回結(jié)果
  if (Module._cache[absPathname]) {
      return Module._cache[absPathname].exports;
  }
  // 創(chuàng)建模塊，新建Module實(shí)例
  const module = new Module(absPathname);
  // 添加緩存
  Module._cache[absPathname] = module;
  // 加載當(dāng)前模塊
  tryModuleLoad(module);
  // 返回exports對(duì)象
  return module.exports;
}

源代碼調(diào)試

我們可以通過 VSCode 調(diào)試 Node.js

步驟

創(chuàng)建文件 a.js

module.exports = 'abc'

1. 文件 test.js

let r = require('./a')

console.log(r)

1. 配置 debug，本質(zhì)是配置.vscode/launch.json 文件，而這個(gè)文件的本質(zhì)是能提供多個(gè)啟動(dòng)命令入口選擇。

一些常見參數(shù)如下：

program 控制啟動(dòng)文件的路徑（即入口文件）

name 下拉菜單中顯示的名稱（該命令對(duì)應(yīng)的入口名稱）

request 分為 launch（啟動(dòng)）和 attach（附加）（進(jìn)程已經(jīng)啟動(dòng)）

skipFiles 指定單步調(diào)試跳過的代碼

runtimeExecutable 設(shè)置運(yùn)行時(shí)可執(zhí)行文件，默認(rèn)是 node，可以設(shè)置成 nodemon，ts-node，npm 等?

修改launch.json，skipFiles 指定單步調(diào)試跳過的代碼

??將 test.js 文件中的 require 方法所在行前面打斷點(diǎn)

執(zhí)行調(diào)試，進(jìn)入源碼相關(guān)入口方法

梳理代碼步驟

1. 首先進(jìn)入到進(jìn)入到 require 方法：Module.prototype.require





2. 調(diào)試到 Module._load 方法中，該方法返回 module.exports，Module._resolveFilename 方法返回處理之后的文件地址，將文件改為絕對(duì)地址，同時(shí)如果文件沒有后綴就加上文件后綴。



??3. 這里定義了 Module 類。id 為文件名。此類中定義了 exports 屬性

??

4. 接著調(diào)試到 module.load 方法，該方法中使用了策略模式，Module._extensions [extension](this, filename) 根據(jù)傳入的文件后綴名不同調(diào)用不同的方法



??5. 進(jìn)入到該方法中，看到了核心代碼，讀取傳入的文件地址參數(shù)，拿到該文件中的字符串內(nèi)容，執(zhí)行 module._compile

??

6. 此方法中執(zhí)行 wrapSafe 方法。將字符串前后添加函數(shù)前后綴，并用 Node 中的 vm 模塊中的 runInthisContext 方法執(zhí)行字符串，便直接執(zhí)行到了傳入文件中的 console.log 代碼行內(nèi)容。



??

至此，整個(gè) Node 中實(shí)現(xiàn) require 方法的整個(gè)流程代碼已經(jīng)調(diào)試完畢。







審核編輯：劉清