單步調(diào)試?yán)斫鈝ebpack里通過require加載nodejs原生模塊實(shí)現(xiàn)原理

在webpack和nodejs里，我們經(jīng)常使用require函數(shù)加載原生模塊或者開發(fā)人員自定義的模塊。

原生模塊的加載，比如：

const path = require("path");

這個(gè)語句是webpack和nodejs應(yīng)用里經(jīng)常使用到的。今天就來談?wù)勊膶?shí)現(xiàn)原理。

還是通過單步調(diào)試的方式來學(xué)習(xí)。

大家首先得通過我前一篇文章  webpack打包過程如何調(diào)試？ 學(xué)會(huì)如何調(diào)試webpack打包過程。

require函數(shù)的實(shí)現(xiàn)位于file:///internal/module.js

注意看第10行和第13行的requireDepth 加減一。因?yàn)橐粋€(gè)module通過require被加載時(shí)，可能會(huì)遞歸地加載另外的依賴module，所以需要這個(gè)requireDepth字段來記錄加載module的深度。

這個(gè)module.js的實(shí)際地址位于當(dāng)前項(xiàng)目文件夾下的node_modules文件夾下面：

第11行的mod變量代表什么？

從調(diào)試器看出，就是當(dāng)前命令行node啟動(dòng)的webpack.js:

mod.require(path)會(huì)將執(zhí)行投遞到Module._load函數(shù)：

首先會(huì)去Module._cache里檢查path模塊是否已經(jīng)加載了。在我這個(gè)例子里，path是第一次加載，所以Module._cache是空的。

那么進(jìn)入NativeModule.require(filename):

nativeModule，即原生模塊，里面也有cache緩存機(jī)制。

因?yàn)閜ath模塊顯然是原生模塊，而非開發(fā)人員自己定義的模塊，因此NativeModule.getCached返回了已經(jīng)被預(yù)加載的path模塊.

cached.exports里包含了一系列函數(shù)，這些函數(shù)就是我們nodejs應(yīng)用里經(jīng)常使用的工具函數(shù)，比如join, parse, resolve等等。

這就是nodejs和webpack里原生模塊的加載原理。希望對(duì)前端開發(fā)人員有所幫助。