Vite 4.0 發佈了！
2022 年 12 月 9 日 - 查看 Vite 5.0 公告
Vite 3 於五個月前發佈。此後，每週的 npm 下載次數從 100 萬次增加到 250 萬次。生態系統也已成熟，並持續成長。在今年的 Jamstack Conf 調查中，社群中的使用率從 14% 跳升至 32%，同時保持 9.7 的高滿意度分數。我們看到了 Astro 1.0、Nuxt 3 以及其他以 Vite 為基礎的框架的穩定版本，這些框架正在創新和協作：SvelteKit、Solid Start、Qwik City。Storybook 宣布對 Vite 的一流支援，作為 Storybook 7.0 的主要功能之一。Deno 現在支援 Vite。Vitest 的採用正在爆炸式增長，它很快將佔 Vite npm 下載量的一半。Nx 也正在投資於生態系統，並且正式支援 Vite。
為了展示 Vite 和相關專案所經歷的成長，Vite 生態系統於 10 月 11 日在 ViteConf 2022 上齊聚一堂。我們看到來自主要網路框架和工具的代表講述創新和協作的故事。具有象徵意義的是，Rollup 團隊選擇在那一天發布 Rollup 3。
今天，Vite 團隊在我們的生態系統合作夥伴的幫助下，很高興宣布發布 Vite 4，在建置時由 Rollup 3 提供支援。我們與生態系統合作，以確保此新主要版本的順利升級路徑。Vite 現在使用 Rollup 3，這讓我們能夠簡化 Vite 的內部資產處理，並進行了許多改進。請參閱 此處的 Rollup 3 發布說明。
快速連結
其他語言的文件
如果您最近開始使用 Vite，我們建議閱讀為什麼選擇 Vite 指南並查看入門指南和功能指南。如果您想參與其中，歡迎在 GitHub 上貢獻。將近700 位協作者為 Vite 做出了貢獻。在 Twitter 和 Mastodon 上追蹤更新，或加入我們的 Discord 社群與他人協作。
開始使用 Vite 4
使用 pnpm create vite 透過您偏好的框架搭建 Vite 專案，或開啟線上啟動範本以使用 vite.new 來試用 Vite 4。
您也可以執行 pnpm create vite-extra 以取得來自其他框架和執行環境（Solid、Deno、SSR 和函式庫啟動器）的範本。當您在 Others 選項下執行 create vite 時，也可以使用 create vite-extra 範本。
請注意，Vite 啟動範本旨在作為一個遊樂場，用於測試 Vite 與不同框架的搭配使用。在建置下一個專案時，我們建議您查看每個框架推薦的啟動器。某些框架現在也會在 create vite 中重新導向至它們的啟動器（適用於 Vue 的 create-vue 和 Nuxt 3，以及適用於 Svelte 的 SvelteKit）。
開發期間使用 SWC 的新 React 外掛
SWC 現在是 Babel 的成熟替代方案，尤其是在 React 專案的上下文中。SWC 的 React 快速刷新實作比 Babel 快得多，對於某些專案而言，它現在是更好的替代方案。從 Vite 4 開始，有兩個外掛可用於具有不同權衡的 React 專案。我們認為目前這兩種方法都值得支援，並且我們將在未來繼續探索對這兩個外掛的改進。
@vitejs/plugin-react
@vitejs/plugin-react 是一個使用 esbuild 和 Babel 的外掛，以較小的套件佔用空間和能夠使用 Babel 轉換管道的靈活性實現快速 HMR。
@vitejs/plugin-react-swc (新)
@vitejs/plugin-react-swc 是一個新的外掛，在建置期間使用 esbuild，但在開發期間將 Babel 替換為 SWC。對於不需要非標準 React 擴充功能的大型專案，冷啟動和熱模組替換 (HMR) 可以顯著加快。
瀏覽器相容性
現代瀏覽器建置現在預設以 safari14 為目標，以獲得更廣泛的 ES2020 相容性。這表示現代建置現在可以使用 BigInt，並且不再轉換空值合併運算子。如果您需要支援較舊的瀏覽器，您可以像往常一樣新增 @vitejs/plugin-legacy。
將 CSS 作為字串匯入
在 Vite 3 中，匯入 .css 檔案的預設匯出可能會導致 CSS 的雙重載入。
import cssString from './global.css'可能會發生這種雙重載入，因為將會發出一個 .css 檔案，並且應用程式程式碼也可能會使用該 CSS 字串，例如由框架執行環境注入。從 Vite 4 開始，.css 預設匯出已被棄用。在這種情況下，需要使用 ?inline 查詢後綴修飾符，因為它不會發出匯入的 .css 樣式。
import stuff from './global.css?inline'請在遷移指南中了解更多資訊。
環境變數
Vite 現在使用 dotenv 16 和 dotenv-expand 9 (先前為 dotenv 14 和 dotenv-expand 5)。如果您的值包含 # 或 `，則需要用引號將它們括起來。
-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"如需更多詳細資訊，請參閱 dotenv 和 dotenv-expand 更新日誌。
其他功能
- CLI 快捷鍵（在開發期間按
h可查看所有快捷鍵）(#11228) - 在預先捆綁相依性時支援 patch-package (#10286)
- 更簡潔的建置記錄輸出 (#10895) 和切換至
kB以與瀏覽器開發人員工具對齊 (#10982) - 在 SSR 期間改善的錯誤訊息 (#11156)
縮減的套件大小
Vite 關心其佔用空間，以加快安裝速度，尤其是在文件和重現的遊樂場的使用案例中。再一次，這個主要版本為 Vite 的套件大小帶來了改進。與 vite 3.2.5 相比，Vite 4 的安裝大小縮小了 23% (14.1 MB vs 18.3 MB)。
升級至 Vite 核心
Vite 核心和vite-ecosystem-ci持續發展，以提供維護者和協作者更好的體驗，並確保 Vite 的開發能夠隨著生態系統的成長而擴展。
框架外掛程式移出核心
@vitejs/plugin-vue 和 @vitejs/plugin-react 自 Vite 的最初版本以來，一直是 Vite 核心單一程式碼倉庫的一部分。這幫助我們在進行變更時獲得緊密的迴圈回饋，因為我們同時測試並發布核心和外掛程式。藉由 vite-ecosystem-ci，我們可以在獨立的程式碼倉庫中開發這些外掛程式時獲得此回饋，因此從 Vite 4 開始，它們已移出 Vite 核心單一程式碼倉庫。這對於 Vite 的框架不可知故事具有重大意義，並將使我們能夠建立獨立的團隊來維護每個外掛程式。如果您有錯誤需要報告或功能需要請求，請在新的程式碼倉庫中建立問題：vitejs/vite-plugin-vue 和 vitejs/vite-plugin-react。
vite-ecosystem-ci 的改進
vite-ecosystem-ci 透過提供 大多數主要下游專案的 CI 狀態的隨需報告來擴展 Vite 的 CI。我們每週針對 Vite 的 main 分支執行三次 vite-ecosystem-ci，並在引入回歸錯誤之前收到及時的報告。Vite 4 將很快與大多數使用 Vite 的專案相容，這些專案已經準備好所需的變更分支，並將在未來幾天內發布。我們也可以在 PR 上按需執行 vite-ecosystem-ci，在註解中使用 /ecosystem-ci run，以便在變更影響到 main 分支之前，了解變更的影響。
致謝
沒有 Vite 貢獻者，其中許多是下游專案和外掛程式的維護者，以及 Vite 團隊的努力，Vite 4 是不可能實現的。我們所有人都共同努力，再次改善了每個使用它的框架和應用程式的 Vite DX。我們很感激能夠為如此充滿活力的生態系統改進一個共同的基礎。
我們也感謝贊助 Vite 團隊的個人和公司，以及直接投資於 Vite 未來的公司：@antfu7 在 Vite 和生態系統上的工作是他在 Nuxt Labs 工作的一部分，Astro 正在資助 @bluwyoo 的 Vite 核心工作，而 StackBlitz 聘請 @patak_dev 全職投入 Vite 的工作。
下一步
我們目前的重點將放在分類新開啟的問題，以避免可能的迴歸造成干擾。如果您想參與並幫助我們改進 Vite，我們建議從問題分類開始。加入我們的 Discord 並在 #contributing 頻道上聯繫我們。潤飾我們的 #docs 故事，並#help幫助其他人。隨著 Vite 的採用持續成長，我們需要繼續為下一波使用者建立一個有幫助且受歡迎的社群。
有很多開放的方面可以持續改進每個選擇 Vite 來支援其框架和開發其應用程式的人的 DX。向前邁進！