建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
大家好，我是 CUGGZ。
ViteConf 2022 于 10 月 11 - 12 日舉行。Vue 和 Vite 的作者尤雨溪發(fā)表了名為《How Vite Came to Be》的主題演講。下面就來(lái)回顧一下這場(chǎng)演講，看看 Vite 是如何誕生的！
下面先來(lái)回顧一下在這些構(gòu)建工具出現(xiàn)之前是如何編寫(xiě) Web 頁(yè)面的。
IIFE
Web 開(kāi)發(fā)早期，我們使用 JavaScript 的唯一方式就是在頁(yè)面中引入
當(dāng)業(yè)務(wù)變得復(fù)雜時(shí)，JavaScript 文件就會(huì)變得很臃腫，就要考慮把這些文件拆分成幾個(gè)小的文件。但當(dāng)時(shí) JavaScript 并沒(méi)有模塊的概念，所有的文件都共享在全局作用域中，這時(shí)可能會(huì)使用 IIFE（立即執(zhí)行函數(shù)）來(lái)分離作用域，不過(guò)這樣仍需要通過(guò)全局作用域來(lái)進(jìn)行通信，比如通過(guò) window 對(duì)象：
;(function() {
var localVar = 1
window.App.foo = {
// ...
}
})()AMD
之后，一些早期的框架和庫(kù)的作者就開(kāi)始使用自己的模塊加載器，并嘗試將其標(biāo)準(zhǔn)化為 AMD，即 Asynchronous Module Definition（異步模塊定義），Require.js 就是 AMD 的一種。RequireJS 是在開(kāi)發(fā)環(huán)境下及時(shí)加載和轉(zhuǎn)化模塊的，可以通過(guò)編寫(xiě)插件來(lái)及時(shí)編譯代碼，它還支持通過(guò)打包命令來(lái)構(gòu)建生產(chǎn)項(xiàng)目。不過(guò)，RequireJS 所有的轉(zhuǎn)化都在瀏覽器端進(jìn)行，在進(jìn)行打包時(shí)，一些生產(chǎn)環(huán)境中不需要的代碼在瀏覽器端也會(huì)被打進(jìn)生產(chǎn)包中。
CommonJS
在 Node.js 興起之后，CommonJS 模塊化規(guī)范就成為了 JavaScript 模塊的標(biāo)準(zhǔn)，并且影響至今。
browseify / webpack
因?yàn)殚_(kāi)發(fā)者想要在瀏覽器端使用 Node.js 包，并且想要在瀏覽器和 Node.js 環(huán)境中使用同一模塊格式，所以就出現(xiàn)了模塊打包工具，例如 browseify 和 webpack。它們將 CommonJS 模塊組合到一個(gè) bundle 中，然后在頁(yè)面尾部的 script 標(biāo)簽中進(jìn)行引入。
2013年，尤雨溪開(kāi)始編寫(xiě) Vue，并產(chǎn)生了編寫(xiě) SFC 的想法，就是將 template、script、style 編寫(xiě)在一個(gè)文件中來(lái)定義組件?？梢酝ㄟ^(guò)編寫(xiě) loaders 來(lái)將這些格式轉(zhuǎn)化為可執(zhí)行的 JavaScript，這樣編譯的開(kāi)銷(xiāo)也只會(huì)在構(gòu)建時(shí)產(chǎn)生，而不會(huì)影響運(yùn)行時(shí)性能。
于是，尤雨溪就在 browseify 和 webpack 中分別編寫(xiě)了轉(zhuǎn)化 SFC 的插件：vueify 和 vue-loader，這兩個(gè)插件至今仍然適用。
vue-cli
不過(guò)，這些構(gòu)建工具對(duì)于大多數(shù)開(kāi)發(fā)者而言還是太底層了。當(dāng)越來(lái)越多的初學(xué)者嘗試使用這些構(gòu)建工具時(shí)，其實(shí)他們對(duì)于學(xué)習(xí)如何配置打包并不感興趣，而是習(xí)慣于有一個(gè)入口來(lái)快速啟動(dòng)。
于是在2015年，尤雨溪做了 vue-cli，這是一個(gè)基于 Webpack 構(gòu)建的 Vue 腳手架。vue-cli 做了很多如今已經(jīng)成為標(biāo)準(zhǔn)的工作，例如預(yù)配置，即大部分通用功能可以開(kāi)箱即用。為了達(dá)到這樣的配置效果，基于webpack進(jìn)行構(gòu)建還是有很大工作量的，并且還要兼顧不同的配置，例如，是否使用 TypeScript，使用哪個(gè)測(cè)試庫(kù)來(lái)運(yùn)行測(cè)試用例，以確保這些配置項(xiàng)的不同組合可以正常運(yùn)行。
除了 vue-cli，create-react-app（React官方腳手架）也使用了相似的配置來(lái)處理。值得一提的是，parcel 是第一個(gè)提出零配置概念的構(gòu)建工具。
ES Modules
2015年，JavaScript 終于推出了自己的模塊化標(biāo)準(zhǔn) ES Modules。從某種程度上說(shuō)，Vite 正在幫助 JavaScript 生態(tài)系統(tǒng)轉(zhuǎn)向并收斂到 ESM 模塊規(guī)范。
隨著 ESM 的推出，基于 ESM 的構(gòu)建工具出現(xiàn)了。Rollup 是第一個(gè)基于 ESM 的打包工具，ESM 是其唯一的模塊標(biāo)準(zhǔn)，這讓 Roolup 的核心代碼非常簡(jiǎn)潔高效，但是，Roolup 并不支持熱更新。所以，主流的解決方案，比如 Next.js、create-react-app、vue-cli 都是基于 webpack 的，因?yàn)橛脩?hù)更注重?zé)岣碌拈_(kāi)發(fā)體驗(yàn)。
原生 ESM
2017年，瀏覽器終于支持了原生 ESM，這意味著以后可以在瀏覽器中直接使用 ESM 規(guī)范，而不是只能在構(gòu)建時(shí)才能使用。
使用原生 ESM 進(jìn)行構(gòu)建并且使用 buildless 的方案會(huì)存在一些問(wèn)題，因?yàn)橛袝r(shí)候確實(shí)需要使用構(gòu)建工具，比如使用 SFC 時(shí)，轉(zhuǎn)化 TypeScript 時(shí)，使用 JSX、PostCSS 時(shí)，這些都需要一個(gè)構(gòu)建階段來(lái)進(jìn)行處理。
原生 ESM 提供了 fetch 來(lái)進(jìn)行 HTTP 請(qǐng)求，我們可以讓 dev server 無(wú)需任何轉(zhuǎn)化即可正常運(yùn)行，并且這個(gè) dev server 將會(huì)非常輕量，就像靜態(tài)文件服務(wù)器一樣。
@vue/dev-server
于是，在2019年，尤雨溪?jiǎng)?chuàng)建了 @vue/dev-server，它能夠進(jìn)行轉(zhuǎn)化，并且使用原生 ESM 的 import 語(yǔ)法來(lái)加載 Vue 的 SFC 組件。然而，這存在兩個(gè)問(wèn)題：
- 如何處理 npm 依賴(lài)。
- 如何在原生 ESM 中進(jìn)行熱更新。
由于他一直忙于 Vue 3 的開(kāi)發(fā)工作，就沒(méi)有持續(xù)跟進(jìn)這兩個(gè)問(wèn)題。
Vite 0.1
直到一年后，突然想到了如何在原生 ESM 中進(jìn)行熱更新，然后就開(kāi)始不斷編碼和測(cè)試。Vite 就正式誕生了，它能夠同時(shí)轉(zhuǎn)化并運(yùn)行 Vue 的 SFC，并且能夠處理原生 ESM 的熱更新。第一個(gè) release 版本的核心邏輯比較粗糙，并且僅支持 Vue組件，因?yàn)樽畛醯南敕ㄊ钦业揭粋€(gè)輕量的 vue-cli 的替代品。
Vite 0.2
Vite 誕生之后，下一步任務(wù)就是從概念驗(yàn)證階段過(guò)渡到重構(gòu)階段。 在調(diào)研中發(fā)現(xiàn)，@web/dev-server 也是一個(gè) bundless 的 dev你server。所以，當(dāng)時(shí)的想法就是創(chuàng)建一個(gè)支持原生 ESM 熱更新的 dev server。
調(diào)研之后，考慮僅把 Vite 作為 ESM 服務(wù)器的中間件來(lái)使用。但是從更深層次來(lái)看，有一個(gè)更宏大的愿景，就是把 Vite 作為一個(gè)開(kāi)箱即用的工具，像 Vue 和 parcel 那樣。所以，如果僅把 Vite 作為 dev server 中間件就限制了它的發(fā)揮。
在使用完基于 Koa 的 es-dev-server 之后，最初的設(shè)想是每一個(gè)插件都當(dāng)做 Koa 的中間件來(lái)執(zhí)行。所以 Vue 轉(zhuǎn)變了思路，Vue 的插件將會(huì)是一個(gè) Koa 中間件。
Vite 0.4
于是，在兩天之后，尤雨溪使用 JavaScript 實(shí)現(xiàn)了熱更新，這個(gè)過(guò)程需要處理通用的 JavaScript 邏輯，以及 npm 依賴(lài)的問(wèn)題。當(dāng)時(shí)選擇了使用 Snowpack 1.0 來(lái)進(jìn)行處理，而現(xiàn)在用 seinstall 代替了 Snowpack。Snowpack 1.0 是基于 Rollup 預(yù)配置實(shí)現(xiàn)的可以轉(zhuǎn)化 npm 包的工具，無(wú)論是什么格式，轉(zhuǎn)化為 ESM 之后都能在瀏覽器中正常運(yùn)行。這就解決了各種模塊規(guī)范混用的問(wèn)題，將它們統(tǒng)一轉(zhuǎn)化為 ESM 格式，這樣才能在瀏覽器中運(yùn)行。
Vite 0.5
在 0.5 版本中，為了更好的輸出構(gòu)建產(chǎn)物，尤雨溪決定繼續(xù)在生產(chǎn)環(huán)境中使用 Rollup。Vite 成為了一個(gè)基于 Rollup 的熱更新 dev server。
VitePress
為了驗(yàn)證這些插件和API是否是彈性并且可擴(kuò)展的，來(lái)為更多的解決方案賦能，特別是在服務(wù)端渲染的場(chǎng)景下。所以，在 Vue 的生態(tài)中，提供了一個(gè)靜態(tài)站點(diǎn)生成器：VitePress，它是一個(gè)基于 Vite 的高級(jí)別應(yīng)用。它允許通過(guò)路由去編寫(xiě) HTML 文件，并且可以在其中引入 Vue 組件。VitePress 還可以用來(lái)生成文檔，并提供了服務(wù)端渲染的能力，它可以將 markdown 解析成 Vue 組件并編譯它，最后通過(guò)服務(wù)端渲染生成 HTML。
Vite 1.0 之前
在發(fā)布 Vite 1.0 之前， Vite 實(shí)現(xiàn)了和 vue-cli 相同的功能，吸引了越來(lái)越多的用戶(hù)，也因此發(fā)現(xiàn)了很多 bug，大多數(shù) bug 都和 npm 依賴(lài)以及模塊格式有關(guān)。在 2022年4月至11月期間，Vite 發(fā)布了 91 個(gè) release 版本。
但是，最終 1.0 版本并未落地，因?yàn)樵陂_(kāi)發(fā) 1.0 時(shí)，尤雨溪意識(shí)到 Vite 并不僅僅是 vue-cli 的替代品，Vite 其實(shí)可以做兩件事：
- 作為與框架無(wú)關(guān)的最小配置打包工具來(lái)提供給用戶(hù)，這本質(zhì)上是一個(gè)更通用的 vue-cli，目的是讓每一個(gè)框架都能使用；
- 為框架作者提供一個(gè)共享工具層。這樣，對(duì)于使用 Nuxt.js、SvelteKit、Next.js 等框架的用戶(hù)，無(wú)需再重復(fù)造輪子，可以專(zhuān)注于更有意義的工作。
Vite 2.0
為了完成上述目標(biāo)，尤雨溪決定重寫(xiě) Vite。2020 年 12 月開(kāi)始重寫(xiě) Vite 2.0。
- 首要目標(biāo)就是將 Vite 和框架解耦；
- 受到 WMR 啟發(fā)，選擇了通用 Rollup 兼容插件 API；
- 受到 SvelteKit 啟發(fā)，采用了全新的 SSR 運(yùn)行時(shí)；
- 使用基于 esbuild 的依賴(lài)預(yù)打包方案，處理依賴(lài)的速度提升近百倍。
最終，在 2021 年 2 月 16日，Vite 2.0 正式發(fā)布。
組建團(tuán)隊(duì)
尤雨溪的時(shí)間和精力被分散到了 Vite 和 Vue 兩個(gè)項(xiàng)目中，仍然需要確保 Vue 可以正常迭代。因此，在 2021 年 3 月正式組建團(tuán)隊(duì)。目前，Vite 的絕大多數(shù)的日常維護(hù)工作都是由團(tuán)隊(duì)成員完成的， 最近的 Vite 3.0 主要版本也是來(lái)自團(tuán)隊(duì)成員的努力。
??相關(guān)資源??
- 演講PPT：https://docs.google.com/presentation/d/1O09rAOu_wRLHVjukVbBeSlRkLeX-dcYZfsdjPiU4kGQ/。
- 演講視頻：https://viteconf.org/2022/replay/vite_keynote。
當(dāng)前標(biāo)題：ViteConf2022回顧：Vite是如何誕生的？
分享鏈接：http://m.5511xx.com/article/cdosidj.html
