Stories

Detail Return Return

前端技術探秘-Nodejs的CommonJS規範實現原理 | 京東物流技術團隊 - Stories Detail

瞭解Node.js

Node.js是一個基於ChromeV8引擎的JavaScript運行環境，使用了一個事件驅動、非阻塞式I/O模型，讓JavaScript 運行在服務端的開發平台，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。Node中增添了很多內置的模塊，提供各種各樣的功能，同時也提供許多第三方模塊。

模塊的問題

為什麼要有模塊

複雜的前端項目需要做分層處理，按照功能、業務、組件拆分成模塊， 模塊化的項目至少有以下優點：

  1. 便於單元測試
  2. 便於同事間協作
  3. 抽離公共方法, 開發快捷
  4. 按需加載, 性能優秀
  5. 高內聚低耦合
  6. 防止變量衝突
  7. 方便代碼項目維護

幾種模塊化規範

  • CMD(SeaJS 實現了 CMD)
  • AMD(RequireJS 實現了 AMD)
  • UMD(同時支持 AMD 和 CMD)
  • IIFE （自執行函數）
  • CommonJS （Node 採用了 CommonJS）
  • ES Module 規範 (JS 官方的模塊化方案)

Node中的模塊

Node中採用了 CommonJS 規範

實現原理：

Node中會讀取文件，拿到內容實現模塊化， Require方法 同步引用

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

Node中模塊類型

  1. 內置模塊，屬於核心模塊，無需安裝，在項目中不需要相對路徑引用， Node自身提供。
  2. 文件模塊，程序員自己書寫的js文件模塊。
  3. 第三方模塊， 需要安裝， 安裝之後不用加路徑。

Node中內置模塊

fs filesystem

操作文件都需要用到這個模塊

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 用的時候可以混用

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

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

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

vm 運行代碼

字符串如何能變成 JS 執行呢？

1.eval

eval中的代碼執行時的作用域為當前作用域。它可以訪問到函數中的局部變量。

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()創建函數時，不是引用當前的詞法環境，而是引用全局環境,Function中的表達式使用的變量要麼是傳入的參數要麼是全局的值

Function可以獲取全局變量，所以它還是可能會有變量污染的情況出現

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

getFn()()

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

3.vm

前面兩種方式，我們一直強調一個概念，那就是變量的污染

VM的特點就是不受環境的影響，也可以説他就是一個沙箱環境

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

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

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

Node模塊化的實現

node中是自帶模塊化機制的，每個文件就是一個單獨的模塊，並且它遵循的是CommonJS規範，也就是使用require的方式導入模塊，通過module.export的方式導出模塊。

node模塊的運行機制也很簡單，其實就是在每一個模塊外層包裹了一層函數，有了函數的包裹就可以實現代碼間的作用域隔離。

我們先在一個js文件中直接打印arguments，得到的結果如下圖所示，我們先記住這些參數。

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

Node中通過modules.export 導出，require 引入。其中require依賴node中的fs模塊來加載模塊文件，通過fs.readFile讀取到的是一個字符串。

在javascrpt中可以通過eval或者new Function的方式來將一個字符串轉換成js代碼來運行。但是前面提到過，他們都有一個致命的問題，就是變量的污染。

實現require模塊加載器

首先導入依賴的模塊path，fs,vm, 並且創建一個Require函數，這個函數接收一個modulePath參數，表示要導入的文件路徑

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

在Require中獲取到模塊的絕對路徑，使用fs加載模塊，這裏讀取模塊內容使用new Module來抽象，使用tryModuleLoad來加載模塊內容，Module和tryModuleLoad稍後實現，Require的返回值應該是模塊的內容，也就是module.exports。

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

Module的實現就是給模塊創建一個exports對象，tryModuleLoad執行的時候將內容加入到exports中，id就是模塊的絕對路徑。

// 定義模塊, 添加文件id標識和exports屬性
function Module(id) {
    this.id = id;
    // 讀取到的文件內容會放在exports中
    this.exports = {};
}

node模塊是運行在一個函數中，這裏給Module掛載靜態屬性wrapper，裏面定義一下這個函數的字符串，wrapper是一個數組，數組的第一個元素就是函數的參數部分，其中有exports，module，Require，\_\_dirname，\_\_filename, 都是模塊中常用的全局變量.

第二個參數就是函數的結束部分。兩部分都是字符串，使用的時候將他們包裹在模塊的字符串外部就可以了。

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

_extensions用於針對不同的模塊擴展名使用不同的加載方式，比如JSON和javascript加載方式肯定是不同的。JSON使用JSON.parse來運行。

javascript使用vm.runInThisContext來運行，可以看到fs.readFileSync傳入的是module.id也就是Module定義時候id存儲的是模塊的絕對路徑，讀取到的content是一個字符串，使用Module.wrapper來包裹一下就相當於在這個模塊外部又包裹了一個函數，也就實現了私有作用域。

使用call來執行fn函數，第一個參數改變運行的this傳入module.exports，後面的參數就是函數外面包裹參數exports, module, Require, \_\_dirname, \_\_filename。/

// 定義擴展名，不同的擴展名，加載方式不同，實現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); // 把文件的結果放在exports屬性上
    }
}

tryModuleLoad函數接收的是模塊對象，通過path.extname來獲取模塊的後綴名，然後使用Module._extensions來加載模塊。

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

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

使用tryModuleLoad方法去加載模塊，tryModuleLoad中使用path.extname獲取到文件的擴展名，然後根據擴展名來執行對應的模塊加載機制。

最終將加載到的模塊掛載module.exports中。tryModuleLoad執行完畢之後module.exports已經存在了，直接返回就可以了。

接下來，我們給模塊添加緩存。就是文件加載的時候將文件放入緩存中，再去加載模塊時先看緩存中是否存在，如果存在直接使用，如果不存在再去重新加載，加載之後再放入緩存。

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

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

自動給模塊添加後綴名，實現省略後綴名加載模塊，其實也就是如果文件沒有後綴名的時候遍歷一下所有的後綴名看一下文件是否存在。

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

  // 存儲原始文件路徑
  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);
  // 從緩存中讀取，如果存在，直接返回結果
  if (Module._cache[absPathname]) {
      return Module._cache[absPathname].exports;
  }
  // 創建模塊，新建Module實例
  const module = new Module(absPathname);
  // 添加緩存
  Module._cache[absPathname] = module;
  // 加載當前模塊
  tryModuleLoad(module);
  // 返回exports對象
  return module.exports;
}

源代碼調試

我們可以通過VSCode 調試Node.js

步驟

創建文件a.js

module.exports = 'abc'

1.文件test.js

let r = require('./a')

console.log(r)

1.配置debug，本質是配置.vscode/launch.json文件，而這個文件的本質是能提供多個啓動命令入口選擇。

一些常見參數如下：

  • program控制啓動文件的路徑（即入口文件）
  • name下拉菜單中顯示的名稱（該命令對應的入口名稱）
  • request分為 launch（啓動）和 attach（附加）（進程已經啓動）
  • skipFiles指定單步調試跳過的代碼
  • runtimeExecutable設置運行時可執行文件，默認是 node，可以設置成 nodemon，ts-node，npm 等

修改launch.json，skipFiles指定單步調試跳過的代碼

  1. 將test.js 文件中的require方法所在行前面打斷點
  2. 執行調試，進入源碼相關入口方法

梳理代碼步驟

1.首先進入到進入到require方法：Module.prototype.require

2.調試到Module.\_load 方法中，該方法返回module.exports，Module.\_resolveFilename方法返回處理之後的文件地址，將文件改為絕對地址，同時如果文件沒有後綴就加上文件後綴。

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

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

5.進入到該方法中，看到了核心代碼，讀取傳入的文件地址參數，拿到該文件中的字符串內容，執行module._compile

6.此方法中執行wrapSafe方法。將字符串前後添加函數前後綴，並用Node中的vm模塊中的runInthisContext方法執行字符串，便直接執行到了傳入文件中的console.log代碼行內容。

至此，整個Node中實現require方法的整個流程代碼已經調試完畢，通過對源代碼的調試，可以幫助我們學習其實現思路，代碼風格及規範，有助於幫助我們實現工具庫，提升我們的代碼思路，同時我們知道相關原理，也對我們解決日常開發工作中遇到的問題提供幫助。

作者：京東物流 喬盼盼

來源：京東雲開發者社區 自猿其説Tech 轉載請註明來源

Javascript , 前端 , commonjs , node.js , chrome
user avatar lenglengdechaomian Avatar wszgrcy Avatar taotao123 Avatar idiomeo Avatar segmenhcfucsd Avatar dushigemi Avatar ivorysql_xiaozhuli Avatar wls1036 Avatar
Favorites 8 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.