1.前端模組化的由來

早期的js只是用來做一些簡單的表單驗證等操作，程式碼直接寫在script標籤裡就好，隨著AJAX出現之後，我們需要將程式碼分配到不同的js檔案裡，這是就會出現一些問題：比如全域性變數重名。

我們想到可以使用立即執行函式來保護內部的變數，並把結果值返回出去並宣告一個變數來接受，如果返回的值有很多的話可以返回一個物件來存放這些值。

也就是說我們在立即執行函式內部定義一個物件，將需要暴露出去的各種屬性和方法加入這個物件中，最後把這個物件返回出去即可，返回的物件就是一個模組。

2.常用的前端模組化方法

CommonJS, AMD, CMD, ES6 Modules等（核心都是匯入和匯出）

3.CommonJS介紹

CommonJS通過module.exports語法匯出，通過require語法匯入。CommonJS也可以通過exports語法匯出，實際上module.exports和exports指向的都是我們要匯出的那個物件，所以可以同時使用他們對要匯出的物件進行修改。但是當我們對exports進行賦值以後，exports就不再指向我們要匯出的那個物件了，此時操作exports就沒有作用了，但是如果我們對module.exports賦值的話，匯出的就是我們對module.exports賦的值，這說明CommonJS中真正控制模組匯出的是module.exports。

CommonJS不支援重複匯入，匯入一次之後第二次就不會再重複執行了；CommonJS支援動態匯入，可以通過語句來動態的使用require語法匯入模組。

CommonJS匯入的是值的拷貝，也就是說我們可以修改commonJS匯入的值。

4.ES Modules介紹

ES Modules通過export指令來匯出變數，也可以匯出函式或者類。或者可以通過export default匯出，但是export default匯出的東西有且只能有一個。

ES Modules通過import指令來匯入變數，用{}來匯入export指令匯出的變數，當匯入export default匯出的變數時可以不加花括號，此時匯入的就是預設匯出的變數。

當我們使用ES Modules命令的時候，需要在匯入的script標籤上加上type='module'讓瀏覽器可以解析對應的語法。

如果我們想讓模組中所有的資訊都匯入，可以使用import * as all from './main.js'這種語法來進行匯入。通常情況下我們需要在as後面給*起一個別名方便我們使用。

export匯出的值是原本值的引用，是隻讀狀態不可以修改。

以前的ES Modules不可以通過語句來動態匯入，只能解除安裝文件的最上方。ES2020新增了動態匯入模組的方法，不同於靜態的import,我們可以通過通過import()方法來動態的匯入我們需要的模組。