模組

每次談到模組都有點懵懵懂懂。CommonJS，AMD，以及ECMA6 三者又是什麼關係，為什麼需要模組載入，如何實現模組載入，這都是問題。

為什麼需要模組載入

模組化是一個語言能否進行大工程的一個重要標誌。

比如java的Maven c的include python的import

傳統我們的前端開發，都是直接通過script標籤引入js程式碼，比如常見的jQuery，但是這樣子所有的模組都都宣告變數在全域性作用域，當然作用域問題我們可以用過命名規定和立即執行函式實現單例模式來解決，但是對於模組之間的依賴問題需要我們程式設計師自己定義好，在一個複雜的工程中，這就是一個噩夢，各個模組錯綜複雜 ，引入的js檔案沒有標準，模組之間的依賴關係難以梳理，在ECMA6之前瀏覽器並不支援模組，於是我們迫切需要一個成熟的模組體系來解決這個問題。

CommonJS

一般用於伺服器端nodejs上，然後通過打包轉化成動態載入模組

nodejs 中一般有三個路徑尋找，當前專案下的 node_modules, 絕對路徑，相對路徑

語法

• require()

• module.exports = ...

AMD

非同步載入，程式設計師需要自己管理依賴，在ECMA6出來之後，幾乎很少人用了

ECMA6模組系統

• 瀏覽器原生支援

• 大勢所趨

語法

• import .. from ..

• export

• export default

Webpack模組化原理

webpack萬物皆模組，它會從指定的entry尋找依賴模組，收整合chunk 最後打包成bundle.js，這樣我們只需要在index.js 檔案中引入一個main.js 讓main.js 來管理所有的"模組",然後交由webpack來為我們構建即可。

那麼這個過程原理是什麼呢？

最後html引入的是什麼呢，是不是修改了script標籤，轉而引入bundle.js ？

模組依賴的尋找過程是怎麼樣的？

Babel轉化成ecm5的模組是怎麼實現的？

這些都是我們需要探究的問題。