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

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

原生模塊的加載,好比:node

const path = require("path");webpack

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

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

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

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

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

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

第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的原創文章,請關注公衆號"汪子熙":

相關文章
相關標籤/搜索