這篇文章給大家分享的是有關Node.js的模塊加載機制是什么的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
站在用戶的角度思考問題,與客戶深入溝通,找到海州網(wǎng)站設計與海州網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設計與互聯(lián)網(wǎng)技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:成都網(wǎng)站設計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務覆蓋海州地區(qū)。模塊是Node.js里面一個很基本也很重要的概念,各種原生類庫是通過模塊提供的,第三方庫也是通過模塊進行管理和引用的。本文會從基本的模塊原理出發(fā),到最后我們會利用這個原理,自己實現(xiàn)一個簡單的模塊加載機制,即自己實現(xiàn)一個require
。
Node 使用 JavaScript 與 commonjs 模塊,并把 npm/yarn 作為其包管理器。
老規(guī)矩,講原理前我們先來一個簡單的例子,從這個例子入手一步一步深入原理。Node.js里面如果要導出某個內(nèi)容,需要使用module.exports
,使用module.exports
幾乎可以導出任意類型的JS對象,包括字符串,函數(shù),對象,數(shù)組等等。我們先來建一個a.js
導出一個最簡單的hello world
:
// a.js module.exports = "hello world";
然后再來一個b.js
導出一個函數(shù):
// b.js function add(a, b) { return a + b; } module.exports = add;
然后在index.js
里面使用他們,即require
他們,require
函數(shù)返回的結果就是對應文件module.exports
的值:
// index.js const a = require('./a.js'); const add = require('./b.js'); console.log(a); // "hello world" console.log(add(1, 2)); // b導出的是一個加法函數(shù),可以直接使用,這行結果是3
當我們require
某個模塊時,并不是只拿他的module.exports
,而是會從頭開始運行這個文件,module.exports = XXX
其實也只是其中一行代碼,我們后面會講到,這行代碼的效果其實就是修改模塊里面的exports
屬性。比如我們再來一個c.js
:
// c.js let c = 1; c = c + 1; module.exports = c; c = 6;
在c.js
里面我們導出了一個c
,這個c
經(jīng)過了幾步計算,當運行到module.exports = c;
這行時c
的值為2
,所以我們require
的c.js
的值就是2
,后面將c
的值改為了6
并不影響前面的這行代碼:
const c = require('./c.js'); console.log(c); // c的值是2
前面c.js
的變量c
是一個基本數(shù)據(jù)類型,所以后面的c = 6;
不影響前面的module.exports
,那他如果是一個引用類型呢?我們直接來試試吧:
// d.js let d = { num: 1 }; d.num++; module.exports = d; d.num = 6;
然后在index.js
里面require
他:
const d = require('./d.js'); console.log(d); // { num: 6 }
我們發(fā)現(xiàn)在module.exports
后面給d.num
賦值仍然生效了,因為d
是一個對象,是一個引用類型,我們可以通過這個引用來修改他的值。其實對于引用類型來說,不僅僅在module.exports
后面可以修改他的值,在模塊外面也可以修改,比如index.js
里面就可以直接改:
const d = require('./d.js'); d.num = 7; console.log(d); // { num: 7 }
require
和module.exports
不是黑魔法我們通過前面的例子可以看出來,require
和module.exports
干的事情并不復雜,我們先假設有一個全局對象{}
,初始情況下是空的,當你require
某個文件時,就將這個文件拿出來執(zhí)行,如果這個文件里面存在module.exports
,當運行到這行代碼時將module.exports
的值加入這個對象,鍵為對應的文件名,最終這個對象就長這樣:
{ "a.js": "hello world", "b.js": function add(){}, "c.js": 2, "d.js": { num: 2 } }
當你再次require
某個文件時,如果這個對象里面有對應的值,就直接返回給你,如果沒有就重復前面的步驟,執(zhí)行目標文件,然后將它的module.exports
加入這個全局對象,并返回給調用者。這個全局對象其實就是我們經(jīng)常聽說的緩存。所以require
和module.exports
并沒有什么黑魔法,就只是運行并獲取目標文件的值,然后加入緩存,用的時候拿出來用就行。再看看這個對象,因為d.js
是一個引用類型,所以你在任何地方獲取了這個引用都可以更改他的值,如果不希望自己模塊的值被更改,需要自己寫模塊時進行處理,比如使用Object.freeze()
,Object.defineProperty()
之類的方法。
這一節(jié)的內(nèi)容都是一些概念,比較枯燥,但是也是我們需要了解的。
Node.js的模塊有好幾種類型,前面我們使用的其實都是文件模塊
,總結下來,主要有這兩種類型:
- 內(nèi)置模塊:就是Node.js原生提供的功能,比如
fs
,http
等等,這些模塊在Node.js進程起來時就加載了。- 文件模塊:我們前面寫的幾個模塊,還有第三方模塊,即
node_modules
下面的模塊都是文件模塊。
加載順序是指當我們require(X)
時,應該按照什么順序去哪里找X
,在官方文檔上有詳細偽代碼,總結下來大概是這么個順序:
- 優(yōu)先加載內(nèi)置模塊,即使有同名文件,也會優(yōu)先使用內(nèi)置模塊。
- 不是內(nèi)置模塊,先去緩存找。
- 緩存沒有就去找對應路徑的文件。
- 不存在對應的文件,就將這個路徑作為文件夾加載。
- 對應的文件和文件夾都找不到就去
node_modules
下面找。- 還找不到就報錯了。
前面提到找不到文件就找文件夾,但是不可能將整個文件夾都加載進來,加載文件夾的時候也是有一個加載順序的:
- 先看看這個文件夾下面有沒有
package.json
,如果有就找里面的main
字段,main
字段有值就加載對應的文件。所以如果大家在看一些第三方庫源碼時找不到入口就看看他package.json
里面的main
字段吧,比如jquery
的main
字段就是這樣:"main": "dist/jquery.js"
。- 如果沒有
package.json
或者package.json
里面沒有main
就找index
文件。- 如果這兩步都找不到就報錯了。
require
主要支持三種文件類型:
- .js:
.js
文件是我們最常用的文件類型,加載的時候會先運行整個JS文件,然后將前面說的module.exports
作為require
的返回值。- .json:
.json
文件是一個普通的文本文件,直接用JSON.parse
將其轉化為對象返回就行。- .node:
.node
文件是C++編譯后的二進制文件,純前端一般很少接觸這個類型。
require
前面其實我們已經(jīng)將原理講的七七八八了,下面來到我們的重頭戲,自己實現(xiàn)一個require
。實現(xiàn)require
其實就是實現(xiàn)整個Node.js的模塊加載機制,我們再來理一下需要解決的問題:
- 通過傳入的路徑名找到對應的文件。
- 執(zhí)行找到的文件,同時要注入
module
和require
這些方法和屬性,以便模塊文件使用。- 返回模塊的
module.exports
本文的手寫代碼全部參照Node.js官方源碼,函數(shù)名和變量名盡量保持一致,其實就是精簡版的源碼,大家可以對照著看,寫到具體方法時我也會貼上對應的源碼地址??傮w的代碼都在這個文件里面:https://github.com/nodejs/node/blob/c6b96895cc74bc6bd658b4c6d5ea152d6e686d20/lib/internal/modules/cjs/loader.js
Node.js模塊加載的功能全部在Module
類里面,整個代碼使用面向對象的思想,如果你對JS的面向對象還不是很熟悉可以先看看這篇文章。Module
類的構造函數(shù)也不復雜,主要是一些值的初始化,為了跟官方Module
名字區(qū)分開,我們自己的類命名為MyModule
:
function MyModule(id = '') { this.id = id; // 這個id其實就是我們require的路徑 this.path = path.dirname(id); // path是Node.js內(nèi)置模塊,用它來獲取傳入?yún)?shù)對應的文件夾路徑 this.exports = {}; // 導出的東西放這里,初始化為空對象 this.filename = null; // 模塊對應的文件名 this.loaded = false; // loaded用來標識當前模塊是否已經(jīng)加載 }
我們一直用的require
其實是Module
類的一個實例方法,內(nèi)容很簡單,先做一些參數(shù)檢查,然后調用Module._load
方法,源碼看這里:/tupian/20230522/loader.js class="brush:js;toolbar:false">MyModule.prototype.require = function (id) {
return Module._load(id);
}
MyModule._load
是一個靜態(tài)方法,這才是require
方法的真正主體,他干的事情其實是:
- 先檢查請求的模塊在緩存中是否已經(jīng)存在了,如果存在了直接返回緩存模塊的
exports
。- 如果不在緩存中,就
new
一個Module
實例,用這個實例加載對應的模塊,并返回模塊的exports
。
我們自己來實現(xiàn)下這兩個需求,緩存直接放在Module._cache
這個靜態(tài)變量上,這個變量官方初始化使用的是Object.create(null)
,這樣可以使創(chuàng)建出來的原型指向null
,我們也這樣做吧:
MyModule._cache = Object.create(null); MyModule._load = function (request) { // request是我們傳入的路勁參數(shù) const filename = MyModule._resolveFilename(request); // 先檢查緩存,如果緩存存在且已經(jīng)加載,直接返回緩存 const cachedModule = MyModule._cache[filename]; if (cachedModule !== undefined) { return cachedModule.exports; } // 如果緩存不存在,我們就加載這個模塊 // 加載前先new一個MyModule實例,然后調用實例方法load來加載 // 加載完成直接返回module.exports const module = new MyModule(filename); // load之前就將這個模塊緩存下來,這樣如果有循環(huán)引用就會拿到這個緩存,但是這個緩存里面的exports可能還沒有或者不完整 MyModule._cache[filename] = module; module.load(filename); return module.exports; }
上述代碼對應的源碼看這里:/tupian/20230522/loader.js id="item-4-9">MyModule._resolveFilename
MyModule._resolveFilename
從名字就可以看出來,這個方法是通過用戶傳入的require
參數(shù)來解析到真正的文件地址的,源碼中這個方法比較復雜,因為按照前面講的,他要支持多種參數(shù):內(nèi)置模塊,相對路徑,絕對路徑,文件夾和第三方模塊等等,如果是文件夾或者第三方模塊還要解析里面的package.json
和index.js
。我們這里主要講原理,所以我們就只實現(xiàn)通過相對路徑和絕對路徑來查找文件,并支持自動添加js
和json
兩種后綴名:
MyModule._resolveFilename = function (request) { const filename = path.resolve(request); // 獲取傳入?yún)?shù)對應的絕對路徑 const extname = path.extname(request); // 獲取文件后綴名 // 如果沒有文件后綴名,嘗試添加.js和.json if (!extname) { const exts = Object.keys(MyModule._extensions); for (let i = 0; i < exts.length; i++) { const currentPath = `${filename}${exts[i]}`; // 如果拼接后的文件存在,返回拼接的路徑 if (fs.existsSync(currentPath)) { return currentPath; } } } return filename; }
上述源碼中我們還用到了一個靜態(tài)變量MyModule._extensions
,這個變量是用來存各種文件對應的處理方法的,我們后面會實現(xiàn)他。
MyModule._resolveFilename
對應的源碼看這里:/tupian/20230522/loader.js id="item-4-10">MyModule.prototype.load
MyModule.prototype.load
是一個實例方法,這個方法就是真正用來加載模塊的方法,這其實也是不同類型文件加載的一個入口,不同類型的文件會對應MyModule._extensions
里面的一個方法:
MyModule.prototype.load = function (filename) { // 獲取文件后綴名 const extname = path.extname(filename); // 調用后綴名對應的處理函數(shù)來處理 MyModule._extensions[extname](this, filename); this.loaded = true; }
注意這段代碼里面的this
指向的是module
實例,因為他是一個實例方法。對應的源碼看這里: /tupian/20230522/loader.js id="item-4-11">加載js文件: MyModule._extensions['.js']
前面我們說過不同文件類型的處理方法都掛載在MyModule._extensions
上面的,我們先來實現(xiàn).js
類型文件的加載:
MyModule._extensions['.js'] = function (module, filename) { const content = fs.readFileSync(filename, 'utf8'); module._compile(content, filename); }
可以看到js
的加載方法很簡單,只是把文件內(nèi)容讀出來,然后調了另外一個實例方法_compile
來執(zhí)行他。對應的源碼看這里:/tupian/20230522/loader.js id="item-4-12">編譯執(zhí)行js文件:MyModule.prototype._compile
MyModule.prototype._compile
是加載JS文件的核心所在,也是我們最常使用的方法,這個方法需要將目標文件拿出來執(zhí)行一遍,執(zhí)行之前需要將它整個代碼包裹一層,以便注入exports, require, module, __dirname, __filename
,這也是我們能在JS文件里面直接使用這幾個變量的原因。要實現(xiàn)這種注入也不難,假如我們require
的文件是一個簡單的Hello World
,長這樣:
module.exports = "hello world";
那我們怎么來給他注入module
這個變量呢?答案是執(zhí)行的時候在他外面再加一層函數(shù),使他變成這樣:
function (module) { // 注入module變量,其實幾個變量同理 module.exports = "hello world"; }
所以我們?nèi)绻麑⑽募?nèi)容作為一個字符串的話,為了讓他能夠變成上面這樣,我們需要再給他拼接上開頭和結尾,我們直接將開頭和結尾放在一個數(shù)組里面:
MyModule.wrapper = [ '(function (exports, require, module, __filename, __dirname) { ', '\n});' ];
注意我們拼接的開頭和結尾多了一個()
包裹,這樣我們后面可以拿到這個匿名函數(shù),在后面再加一個()
就可以傳參數(shù)執(zhí)行了。然后將需要執(zhí)行的函數(shù)拼接到這個方法中間:
MyModule.wrap = function (script) { return MyModule.wrapper[0] + script + MyModule.wrapper[1]; };
這樣通過MyModule.wrap
包裝的代碼就可以獲取到exports, require, module, __filename, __dirname
這幾個變量了。知道了這些就可以來寫MyModule.prototype._compile
了:
MyModule.prototype._compile = function (content, filename) { const wrapper = Module.wrap(content); // 獲取包裝后函數(shù)體 // vm是nodejs的虛擬機沙盒模塊,runInThisContext方法可以接受一個字符串并將它轉化為一個函數(shù) // 返回值就是轉化后的函數(shù),所以compiledWrapper是一個函數(shù) const compiledWrapper = vm.runInThisContext(wrapper, { filename, lineOffset: 0, displayErrors: true, }); // 準備exports, require, module, __filename, __dirname這幾個參數(shù) // exports可以直接用module.exports,即this.exports // require官方源碼中還包裝了一層,其實最后調用的還是this.require // module不用說,就是this了 // __filename直接用傳進來的filename參數(shù)了 // __dirname需要通過filename獲取下 const dirname = path.dirname(filename); compiledWrapper.call(this.exports, this.exports, this.require, this, filename, dirname); }
上述代碼要注意我們注入進去的幾個參數(shù)和通過call
傳進去的this
:
- this:
compiledWrapper
是通過call
調用的,第一個參數(shù)就是里面的this
,這里我們傳入的是this.exports
,也就是module.exports
,也就是說我們js
文件里面this
是對module.exports
的一個引用。- exports:
compiledWrapper
正式接收的第一個參數(shù)是exports
,我們傳的也是this.exports
,所以js
文件里面的exports
也是對module.exports
的一個引用。- require: 這個方法我們傳的是
this.require
,其實就是MyModule.prototype.require
,也就是MyModule._load
。- module: 我們傳入的是
this
,也就是當前模塊的實例。- __filename:文件所在的絕對路徑。
- __dirname: 文件所在文件夾的絕對路徑。
到這里,我們的JS文件其實已經(jīng)記載完了,對應的源碼看這里:/tupian/20230522/loader.js id="item-4-13">加載json文件: MyModule._extensions['.json']
加載json
文件就簡單多了,只需要將文件讀出來解析成json
就行了:
MyModule._extensions['.json'] = function (module, filename) { const content = fs.readFileSync(filename, 'utf8'); module.exports = JSONParse(content); }
exports
和module.exports
的區(qū)別網(wǎng)上經(jīng)常有人問,node.js
里面的exports
和module.exports
到底有什么區(qū)別,其實前面我們的手寫代碼已經(jīng)給出答案了,我們這里再就這個問題詳細講解下。exports
和module.exports
這兩個變量都是通過下面這行代碼注入的。
compiledWrapper.call(this.exports, this.exports, this.require, this, filename, dirname);
初始狀態(tài)下,exports === module.exports === {}
,exports
是module.exports
的一個引用,如果你一直是這樣使用的:
exports.a = 1; module.exports.b = 2; console.log(exports === module.exports); // true
上述代碼中,exports
和module.exports
都是指向同一個對象{}
,你往這個對象上添加屬性并沒有改變這個對象本身的引用地址,所以exports === module.exports
一直成立。
但是如果你哪天這樣使用了:
exports = { a: 1 }
或者這樣使用了:
module.exports = { b: 2 }
那其實你是給exports
或者module.exports
重新賦值了,改變了他們的引用地址,那這兩個屬性的連接就斷開了,他們就不再相等了。需要注意的是,你對module.exports
的重新賦值會作為模塊的導出內(nèi)容,但是你對exports
的重新賦值并不能改變模塊導出內(nèi)容,只是改變了exports
這個變量而已,因為模塊始終是module
,導出內(nèi)容是module.exports
。
Node.js對于循環(huán)引用是進行了處理的,下面是官方例子:
a.js
:
console.log('a 開始'); exports.done = false; const b = require('./b.js'); console.log('在 a 中,b.done = %j', b.done); exports.done = true; console.log('a 結束');
b.js
:
console.log('b 開始'); exports.done = false; const a = require('./a.js'); console.log('在 b 中,a.done = %j', a.done); exports.done = true; console.log('b 結束');
main.js
:
console.log('main 開始'); const a = require('./a.js'); const b = require('./b.js'); console.log('在 main 中,a.done=%j,b.done=%j', a.done, b.done);
當 main.js
加載 a.js
時, a.js
又加載 b.js
。 此時, b.js
會嘗試去加載 a.js
。 為了防止無限的循環(huán),會返回一個 a.js
的 exports
對象的 未完成的副本 給 b.js
模塊。 然后 b.js
完成加載,并將 exports
對象提供給 a.js
模塊。
那么這個效果是怎么實現(xiàn)的呢?答案就在我們的MyModule._load
源碼里面,注意這兩行代碼的順序:
MyModule._cache[filename] = module; module.load(filename);
上述代碼中我們是先將緩存設置了,然后再執(zhí)行的真正的load
,順著這個思路我能來理一下這里的加載流程:
main
加載a
,a
在真正加載前先去緩存中占一個位置a
在正式加載時加載了b
b
又去加載了a
,這時候緩存中已經(jīng)有a
了,所以直接返回a.exports
,即使這時候的exports
是不完整的。
require
不是黑魔法,整個Node.js的模塊加載機制都是JS
實現(xiàn)的。exports, require, module, __filename, __dirname
五個參數(shù)都不是全局變量,而是模塊加載的時候注入的。vm
來實現(xiàn)。this, exports, module.exports
都指向同一個對象,如果你對他們重新賦值,這種連接就斷了。module.exports
的重新賦值會作為模塊的導出內(nèi)容,但是你對exports
的重新賦值并不能改變模塊導出內(nèi)容,只是改變了exports
這個變量而已,因為模塊始終是module
,導出內(nèi)容是module.exports
。exports
。感謝各位的閱讀!關于Node.js的模塊加載機制是什么就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
新聞名稱:Node.js的模塊加載機制是什么-創(chuàng)新互聯(lián)
本文網(wǎng)址:http://muchs.cn/article10/dppedo.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、軟件開發(fā)、網(wǎng)頁設計公司、網(wǎng)站改版、全網(wǎng)營銷推廣、品牌網(wǎng)站建設
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容