深入講解webpack模塊的基本原理

現(xiàn)在前端用Webpack打包JS和其它文件已經(jīng)是主流了，加上Node的流行，使得前端的工程方式和后端越來(lái)越像。所有的東西都模塊化，最后統(tǒng)一編譯。Webpack因?yàn)榘姹镜牟粩喔乱约案鞣N各樣紛繁復(fù)雜的配置選項(xiàng)，在使用中出現(xiàn)一些迷之錯(cuò)誤常常讓人無(wú)所適從。所以了解一下Webpack究竟是怎么組織編譯模塊的，生成的代碼到底是怎么執(zhí)行的，還是很有好處的，否則它就永遠(yuǎn)是個(gè)黑箱。當(dāng)然了我是前端小白，最近也是剛開(kāi)始研究Webpack的原理，在這里做一點(diǎn)記錄。

編譯模塊

編譯兩個(gè)字聽(tīng)起來(lái)就很黑科技，加上生成的代碼往往是一大坨不知所云的東西，所以常常會(huì)讓人卻步，但其實(shí)里面的核心原理并沒(méi)有什么難。所謂的Webpack的編譯，其實(shí)只是Webpack在分析了你的源代碼后，對(duì)其作出一定的修改，然后把所有源代碼統(tǒng)一組織在一個(gè)文件里而已。最后生成一個(gè)大的bundle JS文件，被瀏覽器或者其它Javascript引擎執(zhí)行并返回結(jié)果。

在這里用一個(gè)簡(jiǎn)單的案例來(lái)說(shuō)明Webpack打包模塊的原理。例如我們有一個(gè)模塊mA.js

我隨便定義了一個(gè)變量aa和一個(gè)函數(shù)getDate，然后export出來(lái)，這里是用CommonJS的寫(xiě)法。

然后再定義一個(gè)app.js，作為main文件，仍然是CommonJS風(fēng)格：

現(xiàn)在我們有了兩個(gè)模塊，使用Webpack來(lái)打包，入口文件是app.js，依賴于模塊mA.js，Webpack要做幾件事情：

1. 從入口模塊app.js開(kāi)始，分析所有模塊的依賴關(guān)系，把所有用到的模塊都讀取進(jìn)來(lái)。

2. 每一個(gè)模塊的源代碼都會(huì)被組織在一個(gè)立即執(zhí)行的函數(shù)里。

3. 改寫(xiě)模塊代碼中和require和export相關(guān)的語(yǔ)法，以及它們對(duì)應(yīng)的引用變量。

4. 在最后生成的bundle文件里建立一套模塊管理系統(tǒng)，能夠在runtime動(dòng)態(tài)加載用到的模塊。

我們可以看一下上面這個(gè)例子，Webpack打包出來(lái)的結(jié)果。最后的bundle文件總的來(lái)說(shuō)是一個(gè)大的立即執(zhí)行的函數(shù)，組織層次比較復(fù)雜，大量的命名也比較晦澀，所以我在這里做了一定改寫(xiě)和修飾，把它整理得盡量簡(jiǎn)單易懂。

首先是把所有用到的模塊都羅列出來(lái)，以它們的文件名（一般是完整路徑）為ID，建立一張表：

關(guān)鍵是上面的generated_xxx是什么？它是一個(gè)函數(shù)，它把每個(gè)模塊的源代碼包裹在里面，使之成為一個(gè)局部的作用域，從而不會(huì)暴露內(nèi)部的變量，實(shí)際上就把每個(gè)模塊都變成一個(gè)執(zhí)行函數(shù)。它的定義一般是這樣：

在這里模塊的具體代碼是指生成代碼，Webpack稱之為generated code。例如mA，經(jīng)過(guò)改寫(xiě)得到這樣的結(jié)果：

乍一看似乎和源代碼一模一樣。的確，mA沒(méi)有require或者import其它模塊，export用的也是傳統(tǒng)的CommonJS風(fēng)格，所以生成代碼沒(méi)有任何改動(dòng)。不過(guò)值得注意的是最后的module.exports = ...，這里的module就是外面?zhèn)鬟M(jìn)來(lái)的參數(shù)module，這實(shí)際上是在告訴我們，運(yùn)行這個(gè)函數(shù)，模塊mA的源代碼就會(huì)被執(zhí)行，并且最后需要export的內(nèi)容就會(huì)被保存到外部，到這里就標(biāo)志著mA加載完成，而那個(gè)外部的東西實(shí)際上就后面要說(shuō)的模塊管理系統(tǒng)。

接下來(lái)看app.js的生成代碼：

可以看到，app.js的源代碼中關(guān)于引入的模塊mA的部分做了修改，因?yàn)闊o(wú)論是require/exports，或是ES6風(fēng)格的import/export，都無(wú)法被JavaScript解釋器直接執(zhí)行，它需要依賴模塊管理系統(tǒng)，把這些抽象的關(guān)鍵詞具體化。也就是說(shuō)，webpack_require就是require的具體實(shí)現(xiàn)，它能夠動(dòng)態(tài)地載入模塊mA，并且將結(jié)果返回給app。

到這里你腦海里可能已經(jīng)初步逐漸構(gòu)建出了一個(gè)模塊管理系統(tǒng)的想法，我們來(lái)看一下webpack_require的實(shí)現(xiàn)：

注意倒數(shù)第二句里的modules就是我們之前定義過(guò)的所有模塊的generated code：

webpack_require的邏輯寫(xiě)得很清楚，首先檢查模塊是否已經(jīng)加載，如果是則直接從Cache中返回模塊的exports結(jié)果。如果是全新的模塊，那么就建立相應(yīng)的數(shù)據(jù)結(jié)構(gòu)module，并且運(yùn)行這個(gè)模塊的generated code，這個(gè)函數(shù)傳入的正是我們建立的module對(duì)象，以及它的exports域，這實(shí)際上就是CommonJS里exports和module的由來(lái)。當(dāng)運(yùn)行完這個(gè)函數(shù)，模塊就被加載完成了，需要export的結(jié)果保存到了module對(duì)象中。

所以我們看到所謂的模塊管理系統(tǒng)，原理其實(shí)非常簡(jiǎn)單，只要耐心將它們抽絲剝繭理清楚了，根本沒(méi)有什么深?yuàn)W的東西，就是由這三個(gè)部分組成：

當(dāng)然以上一切代碼，在整個(gè)編譯后的bundle文件中，都被包在一個(gè)大的立即執(zhí)行的匿名函數(shù)中，最后返回的就是這么一句話：

即加載入口模塊app.js，后面所有的依賴都會(huì)動(dòng)態(tài)地、遞歸地在runtime加載。當(dāng)然Webpack真正生成的代碼略有不同，它在結(jié)構(gòu)上大致是這樣：

可以看到它是直接把modules作為立即執(zhí)行函數(shù)的參數(shù)傳進(jìn)去的而不是另外定義的，當(dāng)然這和上面的寫(xiě)法沒(méi)什么本質(zhì)不同，我做這樣的改寫(xiě)是為了解釋起來(lái)更清楚。

ES6的import和export

以上的例子里都是用傳統(tǒng)的CommonJS的寫(xiě)法，現(xiàn)在更通用的ES6風(fēng)格是用import和export關(guān)鍵詞，在使用上也略有一些不同。不過(guò)對(duì)于Webpack或者其它模塊管理系統(tǒng)而言，這些新特性應(yīng)該只被視為語(yǔ)法糖，它們本質(zhì)上還是和require/exports一樣的，例如export：

而對(duì)于import：

比較特殊的是這樣的：

情況會(huì)稍微復(fù)雜一點(diǎn)，它需要載入模塊m的default export，而模塊m可能并非是由ES6的export來(lái)寫(xiě)的，也可能根本沒(méi)有export default，所以Webpack在為模塊生成generated code的時(shí)候，會(huì)判斷它是不是ES6風(fēng)格的export，例如我們定義模塊mB.js:

它使用了ES6的export，那么Webpack在mB的generated code就會(huì)加上一句話：

也就是說(shuō)，它給mB的export標(biāo)注了一個(gè)__esModule，說(shuō)明它是ES6風(fēng)格的export。這樣在其它模塊中，當(dāng)一個(gè)依賴模塊以類似import m from './m.js'這樣的方式加載時(shí)，會(huì)首先判斷得到的是不是一個(gè)ES6 export出來(lái)的模塊。如果是，則返回它的default，如果不是，則返回整個(gè)export對(duì)象。例如上面的mA是傳統(tǒng)CommonJS的，mB是ES6風(fēng)格的：

我們定義get_export_default函數(shù)：

這樣generated code運(yùn)行后在mA和mB上會(huì)得到不同的結(jié)果：

這就是在ES6的import上，Webpack需要做一些特殊處理的地方。不過(guò)總體而言，ES6的import/export在本質(zhì)上和CommonJS沒(méi)有區(qū)別，而且Webpack最后生成的generated code也還是基于CommonJS的module/exports這一套機(jī)制來(lái)實(shí)現(xiàn)模塊的加載的。

模塊管理系統(tǒng)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com