單步除錯理解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裡原生模組的載入原理。希望對前端開發人員有所幫助。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2217003/，如需轉載，請註明出處，否則將追究法律責任。