Hi Da Gei Ho～ 我是 Winnie ,

今天是文章的第二篇，在開始進入主題 Vite之前，此篇文章將切分上下文 簡單說說 什麼是 模組與模組化 與 JavaScript中的模組化規範 的發展過程。

為何要從 模組化開始呢？

事情是這樣的，初期在接觸前端技術的時候，我們常常會聽到網站上線前需要做 打包 的動作， 於事為先求結果身為新手的我們往往都會先照著做， 但做著做著就忘記回頭了解打包主要原因，可能再深入一點探索的時候，也許又了解一點 打包工具 的主要目的 是將我們可能有用到的 Preprocess工具跟框架(如：Vue、React、Sass 等)編譯成 瀏覽器看得懂的 程式碼，但對於所要打包的東西 還是 似懂非懂。

而我也是到近期藉著深入了解 Vite 運作的背後原理，才了解到 打包工具 所編譯的內容是什麼 。

所以 為了能更仔細的紀錄 Vite 的運作 ，我將從 模組化的微歷史 切入來了解現有的 開發建構工具 與 Vite 實際的差別 。

什麼是 模組與 模組化？

如果我們先不將程式邏輯帶入來解釋，以物品來解釋的話，

維基百科是這樣說的：

模組 是指由數個『基礎功能元件』組成的『特定功能組件』，可用來組成具完整功能之系統、裝置或程式。通常會具有相同的製程或邏輯，更改其組成元件可調適其功能或用途。

如果覺得有點抽象，我們將 樂高積木 作為比喻：

在每個樂高的主題世界裡，每個物件的組成最基礎的元件就是『積木』，而這些積木可以組成各種有自己生存意義的物品，如: 房子、車子、樹、人物等...，其中以『車子』為例，不管是 怪奇物語裡的車子 還是 馬力歐的賽車，雖然他們樣式與出現情境會些許不一樣，但他們的組成邏輯都是車子。而這樣的概念就可以稱之為 『模組』。

那模組化又是什麼？

再請 維基百科來解釋：
模組化是指 一種處理複雜系統且分解為更好管理模組的方式

簡單來說，就是當我們需解決一個複雜的問題時，將問題從最上層向下分割程多個模組的過程，然後依照 需求 來將每個模組 組成方便管理的物件，以利後續 方便維護 及 增加重複使用的可能性。

為何要模組化？

接著，前面解釋 模組與模組化 之後，我們再回到JS裡，到底在程式碼中使用 模組化 有什麼好處呢？
故事是這樣開始的，在早期的 Javascript 主要的目的是爲了讓網頁可以進行簡單的表單驗證及互動，所以在當時 還尚未有模組化的概念出現。
但隨著時間的增長，大家對網站的功能需求逐漸增加，使得前端技術日漸複雜，此時JS不僅只需要做驗證跟互動而已了，同時可能還需考慮到 效能及使用者體驗 等 (就像隨著年齡的增長，阿拉丁已經不能一次滿足你的三個願望XD，)

所以當網站功能變多時，當然地程式碼的規模也會變得龐大而複雜，一旦出現bug要找出問題也就會變得困難。

讓我們以 香蕉芭樂 的價格計算 為例 ：

function banana(price , quantity) {
 const bananaPrice = price * quantity
 return bananaPrice;
}

function guava(price , quantity) {
 const guavaPrice = price * quantity
 return guavaPrice;
}

function priceTotal(price , quantity) {
 return guava(price , quantity) + banana(price , quantity) ;
}

priceTotal(25,4)

在程式碼中，我們可以看到 priceTotal()需要依賴 guava() 和banana() 中回傳的值 才能取得價格總額，可能到這邊，你可能會想「這樣我還是可以依照關聯找出問題的啊，為何要模組化？」先別急，如果今天因為全球農產業研發技術大突破，品種大增，店家引進了各國水果品種呢？

function japanApple(price , quantity) {
 const japanApplePrice = price * quantity
 return japanApplePrice;
}

function americanApple(price , quantity) {
 const americanApplePrice = price * quantity
 return americanApplePrice;
}

.....（略 ）

function guava(price , quantity) {
 const guavaPrice = price * quantity
 return guavaPrice;
}

function priceTotal(price , quantity) {
 return apple(price , quantity) + .....（略） + banana(price , quantity) ;
}

priceTotal(25,4)

而此時剛好又出現錯誤你要找出bug時，你就會想...

所以基於上述問題，在程式碼中就有了 模組化的解決方案，我們可以透過 模組化 的方式，將 複雜的程式碼 依照 邏輯或功能 方式來抽取成模組，再根據 需求的情境進行套用，這樣不僅可以增加重複使用性，同時也可以增加程式碼的 維護性，更利於管理程式碼。

好的，以上就是 針對 模組與模組化 的解釋，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教 謝謝 ！！

ps.下篇文章 主要會 來看看 JavaScript模組化的規範 演進過程。