實現小型打包工具

思路圖解

思路：

A方法

1. 找出入口文件全部的依賴關係

   1. 讀取並編譯入口文件代碼
   2. 依據入口文件代碼廣度遍歷全部依賴文件（包括子級）
   3. 對外輸出依賴關係

2. 經過構建CommonJS代碼來獲取exports導出的內容

   1. 構建modules對象字符串（key爲文件id, 值爲[對應的函數, mapping]）
   2. 構建result函數字符串，並傳入modules參數，函數中構建require函數，用於獲取並執行對應文件
   3. 執行require(entry), 即執行對應的文件

有哪些功能點

1. 讀取並編譯文件代碼
2. 獲取全部依賴文件
3. 實現打包功能（構建出CommonJS的寫法）

缺點：

1. 是用relativePath作文件模塊的惟一標識，容易衝突

B方法

與A方法大致思路一致。

區別

1. createCode函數 -》createAsset函數。 createAsset函數在返回值對象時，多一個標識符id(自增數字)
2. getDependencies -》 createGraph, 給每一個文件item添加mapping對象用來保存本身所依賴的文件path:id對象，方便使用時找到id
3. bundle函數。構建modules字符串時，是 id和[function, mapping]作key, value。構建result字符串時，require函數，接收的是filepath對應的id. 有localRequire函數

綜上所述：

主要區別是此方法使用自增的id做爲文件模塊的惟一標識（不會重複）而不是文件相對路徑（容易重複），
可是這也致使代碼有更大複雜性，好比模塊自身需記錄mapping（來記住依賴文件相對路徑和其id的對應關係）。用到localRequire方法來進行相對路徑和id的轉換。

A方法多了處理css文件的能力

代碼：

見github https://github.com/sunchengua...

參考資料

https://juejin.im/book/5bdc71...

https://zhuanlan.zhihu.com/p/...

https://zhuanlan.zhihu.com/p/...