資訊專欄INFORMATION COLUMN
摘要：什么是可以引用官網(wǎng)的一幅圖解釋，我們可以看到，可以分析各個模塊的依賴關(guān)系，最終打包成我們常見的靜態(tài)文件，。我們暫時把通過傳文件路徑能返回文件信息的這個函數(shù)叫。
什么是webpack
可以引用官網(wǎng)的一幅圖解釋，我們可以看到webpack，可以分析各個模塊的依賴關(guān)系，最終打包成我們常見的靜態(tài)文件，.js 、 .css 、 .jpg 、.png。今天我們先不弄那么復(fù)雜，我們就介紹webpack是怎么分析ES6的模塊依賴，怎么把ES6的代碼轉(zhuǎn)成ES5的。
實現(xiàn)由于ES6轉(zhuǎn)ES5中需要用到babel，所以要用到一下插件
npm install @babel/core @babel/parser @babel/traverse @babel/preset-env --save-dev
需要的文件使用webpack肯定少不了原文件，我們會涉及三個需要打包的js文件（entry.js、message.js、name.js）
// entry.js import message from "./message.js"; console.log(message);
// message.js
import {name} from "./name.js";
export default `hello ${name}!`;
// name.js export const name = "world";
//bundler.js
// 讀取文件信息，并獲得當(dāng)前js文件的依賴關(guān)系
function createAsset(filename) {//代碼略}
// 從入口開始分析所有依賴項，形成依賴圖，采用廣度遍歷
function createGraph(entry) {//代碼略}
// 根據(jù)生成的依賴關(guān)系圖，生成瀏覽器可執(zhí)行文件
function bundle(graph) {//代碼略}
entry.js 就是我們的入口文件，文件的依賴關(guān)系是，entry.js依賴message.js，message.js依賴name.js。
bundler.js 是我們簡易版的webpack
目錄結(jié)構(gòu)
- example
- entry.js
- message.js
- name.js
- bundler.js
如何分析依賴
webpack分析依賴是從一個入口文件開始分析的，當(dāng)我們把一個入口的文件路徑傳入，webpack就會通過這個文件的路徑讀取文件的信息（讀取到的本質(zhì)其實是字符串），然后把讀取到的信息轉(zhuǎn)成AST（抽象語法樹），簡單點來說呢，就是把一個js文件里面的內(nèi)容存到某種數(shù)據(jù)結(jié)構(gòu)里，里面包括了各種信息，其中就有當(dāng)前模塊依賴了哪些模塊。我們暫時把通過傳文件路徑能返回文件信息的這個函數(shù)叫 createAsset 。
createAsset返回什么第一步我們肯定需要先從 entry.js 開始分析，于是就有了如下的代碼，我們先不關(guān)心createAsset具體代碼是怎么實現(xiàn)的，具體代碼我會放在最后。
createAsset("./example/entry.js");
當(dāng)執(zhí)行這句代碼，createAsset 會返回下面的數(shù)據(jù)結(jié)構(gòu)，這里包括了模塊的id，文件路徑，依賴數(shù)組（entry.js依賴了message.js，所以會返回依賴的文件名），code（這個就是entry.js ES6轉(zhuǎn)ES5的代碼）
通過 createAsset 我們成功拿到了entry.js的依賴，就是 dependencies 數(shù)組。
我們通過上面可以拿到entry.js依賴的模塊，于是我們就可以接著去遍歷dependencies 數(shù)組，循環(huán)調(diào)用createAsset這樣就可以得到全部模塊相互依賴的信息。想得到全部依賴信息需要調(diào)用 createGraph 這個一個函數(shù)，它會進(jìn)行廣度遍歷，最終返回下面的數(shù)據(jù)
我們可以看到返回的數(shù)據(jù)，字段之前都和大家解釋了，除了 mapping，mapping這個字段是把當(dāng)前模塊依賴的文件名稱 和 模塊的id 做一個映射，目的是為了更方便查找模塊。
bundle返回什么 && 最后步驟我們現(xiàn)在已經(jīng)能拿到每個模塊之前的依賴關(guān)系，我們再通過調(diào)用bundle函數(shù)，我們就能構(gòu)造出最后的bundle.js，輸出如下圖
源碼點擊查看源碼
最后文章可能有不足的地方，請大家見諒，如果有什么疑問可以下方留言討論。
如果大家對文字描述還是不太清楚，建議看我下方提供的視頻，我就是從視頻中學(xué)的，這個是在youtube上的視頻，大家懂的，有條件的還是建議看一下。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102365.html
摘要：馬上要出了，完全手寫一個優(yōu)化后的腳手架是不可或缺的技能。每個依賴項隨即被處理，最后輸出到稱之為的文件中，我們將在下一章節(jié)詳細(xì)討論這個過程。的事件流機制保證了插件的有序性，使得整個系統(tǒng)擴展性很好。 webpack馬上要出5了，完全手寫一個優(yōu)化后的腳手架是不可或缺的技能。 本文書寫時間 2019年5月9日 , webpack版本 4.30.0最新版本 本人所有代碼均手寫，親自試驗過可...
摘要：馬上要出了，完全手寫一個優(yōu)化后的腳手架是不可或缺的技能。每個依賴項隨即被處理，最后輸出到稱之為的文件中，我們將在下一章節(jié)詳細(xì)討論這個過程。的事件流機制保證了插件的有序性，使得整個系統(tǒng)擴展性很好。 webpack馬上要出5了，完全手寫一個優(yōu)化后的腳手架是不可或缺的技能。 本文書寫時間 2019年5月9日 , webpack版本 4.30.0最新版本 本人所有代碼均手寫，親自試驗過可...
摘要：馬上要出了，完全手寫一個優(yōu)化后的腳手架是不可或缺的技能。每個依賴項隨即被處理，最后輸出到稱之為的文件中，我們將在下一章節(jié)詳細(xì)討論這個過程。的事件流機制保證了插件的有序性，使得整個系統(tǒng)擴展性很好。 webpack馬上要出5了，完全手寫一個優(yōu)化后的腳手架是不可或缺的技能。 本文書寫時間 2019年5月9日 , webpack版本 4.30.0最新版本 本人所有代碼均手寫，親自試驗過可...
閱讀 1176·2021-11-23 10:04
閱讀 2435·2021-11-22 15:29
閱讀 2929·2021-11-19 09:40
閱讀 756·2021-09-22 15:26
閱讀 2142·2019-08-29 16:27
閱讀 2520·2019-08-29 16:10
閱讀 1943·2019-08-29 15:43
閱讀 3303·2019-08-29 12:43
