Day_04 : 让 Vite 来开启你的Vue_ Ｍodule Bundler

Hi～Dai Gei Ho，我是Winnie，今天是2021/09/16 ，是个对我来说别具意义的一天，希望大家都要健康快乐。（ 夜深了，突然想来碎念下XD。

回归正题，在前两天的文章中，我们简单的介绍了下 模组 与 JS模组化规范的演化过程，同时也稍微了解 打包工具 的出现 是为了解决 过去模组化规范与ES6 Module可能造成浏览器不支援 或着 其他服务端版本不相容 的问题。 但是针对 打包工具介绍 目前算是都还没有提到。所以此篇文章 将会针对 现有 打包工具的用途 与 Module bundler模式进行介绍。

前端打包工具

在之前的文章我们已经有简单提到 打包工具 主要目的是将各种可能使用到的 Preprocess工具跟前端框架(如：Vue、React、Sass 等)档案进行转译压缩成一支主要的JS，而这样的好处就是不仅让 浏览器可以读懂程序码 之外，也可以透过 少量的HTTP request 来请求所需要的资源。

Module bundler 运作模式：

如上图，其运作模式会依照 进入点 来分析专案的架构，并且透过每个Module间的相互依赖 来载入，当等所有 modules 都载入完毕，就会开始执行压缩，把需要的档案全部打包成一只bundle.js档案，最後透过 引入进HTML中 ，而这样的模式 就称之为 Module bundler。
而在众多的前端打包工具中，在前端技术圈 广为人知的Webpack 也是采取 Bundle 模式来进行打包，运作方式如下图。

而在图片中，不知道大家有没有发现，Webpack除了能打包JS模组之外， 他们还可以 将图片、scss、ES6语法等进行打包，为什麽可以这样做呢？这是因为他们延伸了 模组化 的概念，将任何资源视为一个模组 ，同时定义许多 loader（载入器） 来识别档案类型并且进行转译，让浏览器可以读懂。(但因为今天主角不是Webpack，所以就不一一介绍要如何使用了了XD)

而这也就是为什麽 能让没用过Webpack的人 也能在江湖听过他的名字的原因了。

小结：

好的，在今天终於将 前端打包工具的用途 与 打包运作模式 简单的介绍完了，希望可以让大家对於 传统打包工具 有些许了解，而下篇将会进入 题目的主轴 Vite 开始正式介绍 (终於啊 撒花！！)
以上谢谢大家的观看，如有错误的地方，再麻烦大家给予指教，谢谢

再补充一下：其实在前端打包工具中，还有一个 Native ESM 的运作模式，但因为我觉得这个模式 是Vite 背後核心，所以我将它单独拆出来放在接下的文章中了。