Day_02: 让 Vite 来开启你的Vue 微谈模组化与演进（上）

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模组化的规范 演进过程。