單步調試理解webpack裏經過require加載nodejs原生模塊實現原理

在webpack和nodejs裏，咱們常用require函數加載原生模塊或者開發人員自定義的模塊。

原生模塊的加載，好比：

const path = require("path");

這個語句是webpack和nodejs應用裏常用到的。今天就來談談它的實現原理。

仍是經過單步調試的方式來學習。

你們首先得經過我前一篇文章 webpack打包過程如何調試？學會如何調試webpack打包過程。

require函數的實現位於file:///internal/module.js

注意看第10行和第13行的requireDepth 加減一。由於一個module經過require被加載時，可能會遞歸地加載另外的依賴module，因此須要這個requireDepth字段來記錄加載module的深度。

這個module.js的實際地址位於當前項目文件夾下的node_modules文件夾下面：

第11行的mod變量表明什麼？

從調試器看出，就是當前命令行node啓動的webpack.js:

mod.require(path)會將執行投遞到Module._load函數：

首先會去Module._cache裏檢查path模塊是否已經加載了。在我這個例子裏，path是第一次加載，因此Module._cache是空的。

那麼進入NativeModule.require(filename):

nativeModule，即原生模塊，裏面也有cache緩存機制。

由於path模塊顯然是原生模塊，而非開發人員本身定義的模塊，所以NativeModule.getCached返回了已經被預加載的path模塊.

cached.exports裏包含了一系列函數，這些函數就是咱們nodejs應用裏常用的工具函數，好比join, parse, resolve等等。

這就是nodejs和webpack裏原生模塊的加載原理。但願對前端開發人員有所幫助。

要獲取更多Jerry的原創文章，請關注公衆號"汪子熙":