【譯】聽尤雨溪聊：下一代前端構建工具 ViteJS 中英雙語字幕

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

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

Vite 的發(fā)音問題

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

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

Vite 是什么

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

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

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

起步 Demo

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

入口文件是 index.html

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

Vite 是 Opinionated 的

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

Vue CLI 會遷移到 Vite 上嗎

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

Vite 是框架無關的

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

Tailwind CSS + Vite 實戰(zhàn)

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

Vite + React 實戰(zhàn)

視頻傳送 - 35:30^[32]主持人調(diào)侃，我們在線圍觀尤雨溪寫 React！

關于 Esbuild —— “快”就一個字

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

DX 是啥

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

關于 SSR

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

關于 HMR

視頻傳送 - 57:59^[38]Vite 真正解決了 HMR 速度與隨著應用越來越大而越來越慢的問題。

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

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

后記

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

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

參考資料