【譯】聽(tīng)尤雨溪聊：下一代前端構(gòu)建工具 ViteJS 中英雙語(yǔ)字幕

• 原視頻地址：Next generation frontend tooling with ViteJS ? Open Source Friday ?^[1]
• 中英文字幕視頻地址（B站）：【譯】下一代前端工具 ViteJS 中英雙語(yǔ)字幕 - Open Source Friday^[2]
• 中英文字幕視頻地址（騰訊視頻）：【譯】下一代前端工具 ViteJS 中英雙語(yǔ)字幕 - Open Source Friday^[3]
• 英文字幕：聽(tīng)譯、YouTube 自動(dòng)字幕
• 英文校對(duì)、翻譯：Ivocin^[4]

關(guān)于 Vite，來(lái)看看作者本人怎么說(shuō)。本視頻是 Vue^[5] 以及 Vite^[6] 作者 尤雨溪^[7] 在 2021 年 2 月 12 日在 Twitch^[8] 上做客 GitHub Open Source Friday^[9] 節(jié)目的直播視頻。在視頻里有尤大關(guān)于 Vite 的各項(xiàng)功能的詳細(xì)闡述、大神在線編碼、在線 Debug、大佬 diss webpack 以及對(duì) Vite 的哲學(xué)思考。本視頻很長(zhǎng)，接近 70 分鐘，下面是視頻摘錄，大家可以選擇自己感興趣的點(diǎn)自行傳送。強(qiáng)烈建議大家觀看視頻，里面有很多細(xì)節(jié)相信大家會(huì)有收獲。視頻地址：【譯】下一代前端工具 ViteJS 中英雙語(yǔ)字幕 - Open Source Friday^[10]

Vite 的發(fā)音問(wèn)題

視頻傳送 - 1:18^[11]有關(guān) Vite 發(fā)音的靈魂拷問(wèn)：既然 Vite 使用的是其法語(yǔ)發(fā)音，那為什么 Vue 不用它的法語(yǔ)發(fā)音呢？（大概是因?yàn)榉ㄕZ(yǔ)讀音不好聽(tīng)吧）。尤大告訴我們，作者說(shuō)怎么讀那就怎么讀吧。

個(gè)人認(rèn)為 Vue 和 Vite 的文檔堪稱良心了，首先就交代自己名字的發(fā)音，讓全球開(kāi)發(fā)者統(tǒng)一認(rèn)知。再來(lái)看 Svelte^[12]，別說(shuō)發(fā)音了，至今拼寫(xiě)還記不住。

Vite 是什么

視頻傳送 - 2:33^[13]尤大自己也說(shuō)，很難一句話描述清楚 Vite 到底是什么。主要原因可能是它主要包括兩個(gè)部分，一個(gè)基于 ESM^[14] 的利用 esbuild^[15] 的開(kāi)發(fā)服務(wù)器，另一個(gè)部分是基于 Rollup^[16] 的配置化的打包器。當(dāng)然還有很多其他強(qiáng)大的功能，但是已經(jīng)超過(guò)一句話了。尤大說(shuō)市面上最接近 Vite 的產(chǎn)品是 Parcel^[17]，但二者的實(shí)現(xiàn)原理完全不同。

為什么 Vite 在此刻出現(xiàn)

視頻傳送 - 4:53^[18]本質(zhì)原因應(yīng)該是大部分現(xiàn)代瀏覽器（除了 IE 11）已經(jīng)對(duì)原生 ES 模塊支持的很好了，而且新版的 Node 也支持 ESM 了。ESM 終于可以在不久的將來(lái)一統(tǒng)江湖。原生的就是香。

起步 Demo

視頻傳送 - 7:05^[19]不使用 @vitejs/create-app，從 0 開(kāi)始創(chuàng)建一個(gè) Vite 工程 demo。

入口文件是 index.html

視頻傳送 - 14:25^[20]

Vite 是 Opinionated 的

視頻傳送 - 17:08^[21]劃重點(diǎn)，Vite 是 Opinionated 的，視頻里多次展示了這塊內(nèi)容。其實(shí) opinionated 本來(lái)是個(gè)貶義詞，是固執(zhí)己見(jiàn)的意思，而用在計(jì)算機(jī)科學(xué)領(lǐng)域，又變成了一個(gè)絕對(duì)的褒義詞，號(hào)稱自己 opinionated 的工具通過(guò)約定保證了易用性，又提供了配置以保證不會(huì)喪失靈活性。Vite 中內(nèi)置了大量最佳實(shí)踐的約定，省去了繁瑣的配置，保證前端開(kāi)發(fā)者常用的功能都是開(kāi)箱即用的。關(guān)于 Opinionated 的譯法可以參考 掘金翻譯計(jì)劃的一個(gè) PR^[22]，Vite 中文文檔的一個(gè) PR^[23] 這兩處的討論。那么問(wèn)題來(lái)了，列出幾個(gè) opinionated 和 unopinionated 的軟件。我先來(lái)：Opinionated 的有 Vite^[24]、Prettier^[25], Unopinionated 的比如 webpack^[26]，當(dāng)然 unopinionated 可不是好詞，應(yīng)該不會(huì)有人在官方文檔里寫(xiě)自己是 unopinionated 的。這段是關(guān)于 webpack 的，看大佬如何 diss webpack：

Vue CLI 會(huì)遷移到 Vite 上嗎

視頻傳送 - 23:56^[27]暫時(shí)不會(huì)，目前依然是基于 webpack 的，但是最終肯定是會(huì)遷移到 Vite 上的。

Vite 是框架無(wú)關(guān)的

視頻傳送 - 25:43^[28]Vite 提供了定義得非常好的 JavaScript API，可以在更高層級(jí)使用，比如 VitePress^[29]，它是 VuePress^[30] 的孿生兄弟，基于 Vite 構(gòu)建。

Tailwind CSS + Vite 實(shí)戰(zhàn)

視頻傳送 - 27:07^[31]尤大在線編寫(xiě) Tailwind 代碼翻車(chē)。主持人調(diào)侃，原來(lái) Evan You 也需要 debug 啊。

Vite + React 實(shí)戰(zhàn)

視頻傳送 - 35:30^[32]主持人調(diào)侃，我們?cè)诰€圍觀尤雨溪寫(xiě) React！

關(guān)于 Esbuild —— “快”就一個(gè)字

視頻傳送 - 38:24^[33]Esbuild 是 Vite 為何如此快速的原因，它比傳統(tǒng) tsc 快 20-30 倍。Vite 用 esbuild 替代 Rollup 進(jìn)行預(yù)打包，速度也非常快。這里尤大透露了他的工作電腦，搭載 M1 芯片的 ARM 架構(gòu)的 Mac Book Pro，遺憾的是，當(dāng)時(shí)的 esbuild 還不支持 ARM 架構(gòu)，但 Go 的最新版已經(jīng)支持。沒(méi)想到過(guò)了幾天，esbuild 就發(fā)布了其支持 M1 芯片的版本，尤大在第一時(shí)間做了測(cè)試：

DX 是啥

視頻傳送 - 47:36^[34]在視頻翻譯過(guò)程中，聽(tīng)到尤大說(shuō)了 DX 一詞，由于不知道是什么含義，反反復(fù)復(fù)聽(tīng)了好多遍，后來(lái) Google 發(fā)現(xiàn)，原來(lái) DX 是 Developer Experience 的意思，看來(lái)關(guān)愛(ài)開(kāi)發(fā)者是有官方術(shù)語(yǔ)的，關(guān)于 DX 的解釋可以參考 What Is DX\? \(Developer Experience\)^[35]。Vite 利用其快速的特性，極大提升了開(kāi)發(fā)者的體驗(yàn)，尤大直言，他就像被寵壞了的孩子，項(xiàng)目啟動(dòng)超過(guò) 1 秒，他就很難忍受了。

關(guān)于 SSR

視頻傳送 - 52:20^[36]SSR 目前還處于實(shí)驗(yàn)階段，詳見(jiàn)官網(wǎng)文檔^[37]。

關(guān)于 HMR

視頻傳送 - 57:59^[38]Vite 真正解決了 HMR 速度與隨著應(yīng)用越來(lái)越大而越來(lái)越慢的問(wèn)題。

為啥生產(chǎn)模式不用 esbuild，不是更快嗎？

視頻傳送 - 65:31^[39]其實(shí)也想用，但是 esbuild 目前對(duì)生產(chǎn)包支持不夠健壯，很多配置無(wú)法通過(guò) esbuild 實(shí)現(xiàn)。所以目前而言，Rollup 是一個(gè)好選擇，雖然遠(yuǎn)比 esbuild 慢。另外，可以用 esbuild 作為壓縮器，替代 terser，詳見(jiàn) build.minify^[40],這樣會(huì)更快，但是包的體積可能會(huì)有 5% - 10% 左右的增長(zhǎng)，看用戶取舍。

后記

好久沒(méi)有做這么大型視頻的翻譯了，上一次還是 React Conf 2018 的翻譯^[41]。本視頻翻譯從春節(jié)假期 2 月 15 日開(kāi)始，開(kāi)工后時(shí)間比較少，斷斷續(xù)續(xù)花了三周多時(shí)間。好在 GitHub 在 Twitch 視頻失效后，視頻上傳到了 YouTube 上，利用其自動(dòng)字幕功能，后期節(jié)省了很多時(shí)間。確實(shí) YouTube 的語(yǔ)音轉(zhuǎn)文字功能更為強(qiáng)大。如果發(fā)現(xiàn)字幕存在問(wèn)題，歡迎在視頻評(píng)論區(qū)留言。希望這個(gè)視頻能夠幫助到大家。

作者：清秋
鏈接：https://juejin.cn/post/6937176680251424775
來(lái)源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

參考資料