[譯]Vue官方成員：Vite生態發展的怎麼樣了

手撕紅黑樹發表於2021-12-17
VueVite

前言

之前 Vite2 剛出來的時候，恰好我要負責一個新專案，所以我打算用最新的 Vite + Vue3 + TS 來構建這個專案。

不幸的是，那時候 Vite 有坑，熱更新做的也不如傳統 webpack 專案，經常需要改一行程式碼就重新整理一下瀏覽器。所以我趁專案還沒變的很龐大之前改用 vue-cli 重構了該專案。但之後看見許多新出現的開源專案都用的 Vite，冥冥之中總有一種 Vite 將來一定會變的很牛B的預感，並且隨著時間的推移，這種想法變得越來越強烈！

那時剛好也是 Vite 炒的最火的時候，部落格、公眾號、B站、知乎啥的全都在大量的談這個 Vite，於是我又用 Vite 重構了回來，結果在彙報工作的時候慘遭批評(浪費了時間去做與業務無關的東西，並且用了不成熟的技術可能會承擔不必要的風險)。

後來 Vite 的熱度一點點的下來了，現在再開啟部落格、公眾號、知乎和B站… 大家也不會再看到那麼多篇關於 Vite 的文章了。

直到最近 Vue 的官方團隊成員Patak釋出了一篇叫做《The Vite Ecosystem》的文章，看了他的文章後讓我感到非常的興奮，感覺自己押對了寶，Vite 確確實實會成為將來的一個趨勢。這是因為在他的文章裡我看到了很多很牛B的開源專案都在使用Vite，不僅如此，還有相當多的團隊以及大佬們在和Vite團隊進行合作(幫忙修復bug、新增feature等)，這就證明了Vite現在已經得到了各路大佬們的認可了。有了大佬們的支援，相信就能夠打消很多人心中的疑慮了。

所以我特意抽空把這篇文章翻譯出來分享給大家，讓大家也多瞭解瞭解 Vite 在全世界範圍內的發展狀況。

原文連結：https://patak.dev/vite/ecosystem.html

正文

Vite 的最強點之一便是它周圍的生態系統。Vite 承擔起了許多職責（通用的 Web 模式、全域性匯入、熱更新 API、底層的服務端渲染、構建優化），我們提供了一個共同的協作基礎，這樣其他維護者就不必每次都重複造輪子了。甚至還有幾個流行框架的維護者選擇了 Vite 來作為他們推薦的構建工具，並且他們現在還參與了 Vite 的開發，並直接修復了不少 bug 還新增了許多 feature。Vite 公開了一個靈活的JavaScript API，允許與Rails和Laravel等後端框架或其他開發工具整合，如Cypress和Storybook。Vite 的外掛 API 與 Rollup 相容，使 Vite 能夠有效的利用 Rollup 現有的外掛生態系統。

Vite 確實超出了我的預期：它現在不僅用於 Vue，還用於 React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及與 Storybook、Laravel、Rails 等的整合... -尤雨溪

在本篇文章中，我們將瞭解 Vite 生態圈中的一些團隊和成員，我認為向大家展示一下目前究竟有多少人在共同努力推動 Vite 的發展是個good idea。目前Vite的生態已經足夠龐大，我不會假裝涵蓋每個專案，它也是我以 Vite 為視角的看到的故事。如果您沒有在本文中看到自己的專案，請提前接受我的道歉。並在https://chat.vitejs.dev裡面進行留言，我渴望瞭解更多關於您使用 Vite 建立的內容。

下面重點是突出不同團隊之間正在進行的協作。如果您想了解有關每個專案的更多資訊，有指向其主頁、GitHub、社群的連結。介紹完了，我們來逛逛 Vite 的生態：

站在巨人的肩膀

vite

在 Vite2 的第二次大規模釋出之後，尤雨溪成立了一個 Vite 團隊來對該專案進行維護。現在的Vite是一個由尤雨溪所領導的團隊在緊密推進的專案，我們還與其他團隊進行了密切的合作，以確保 Vite 能夠順利地用於他們的框架和整合。現在有超過400 名貢獻者對 Vite貢獻了程式碼。並且我們目前有一個十分活躍的社群，該專案發展迅速。GitHub 中有超過 7萬5千 個專案)都在使用 Vite，並且 Vite 每月的 npm 下載量超過了 130 萬次：

WX20211208-153137.png

rollup

Vite 可以被認為是一個開發伺服器 + Rollup。Rollup 的核心維護者之一@lukastaegert推薦使用 Vite 來作為 Rollup 的 Web 開發伺服器。Vite 相容 Rollup 的外掛系統為 Vite 提供了一個良好的開端。Rollup 的維護者在擴充套件他們的外掛 API 時會與 Vite 及 WMR(譯者注：WMR 是 Preact 團隊開發出來的一款類似於 Vite 的專案) 的維護者保持聯絡以確保生態系統能夠保持相容。

esbuild

esbuild是一個用 Go 語言編寫的打包構建工具，它突破了構建工具效能的極限。Vite 用 esbuild 來轉譯單個檔案（去除 TS 型別並編譯 JSX）並將其作為預設壓縮工具（對於 JS 和 CSS 檔案）。在開發期間預打包依賴項時，它還會被用作打包工具。@evanwallace(譯者注：他是esbuild的作者)一直在做非常出色的工作。esbuild 每天都在改進，它為 Vite 提供了 tsc、babel 和 Rollup 的快速替代方案。

Typescript

Typescript 的出現席捲了整個 JS 世界。Vite支援匯入.ts檔案。在內部，我們會用 esbuild 來去除掉TS型別，這樣可以避免在編譯成js檔案時做很複雜的型別校驗。這對於獲得最佳的熱更新體驗而言非常重要。如果您使用的是VS Code之類的現代 IDE，您將在編寫程式碼時通過智慧提示來獲得大部分資訊。您也可以在打包期間執行tsc命令來進行型別校驗，或者使用像rollup-plugin-typescript2這樣的外掛。@fi3ework的vite-plugin-checker是另一個有趣的專案，允許您在 worker 執行緒中執行 TypeScript。

babel

在大多數情況下，Vite 並不需要babel，這樣可以避免其繁重的抽象語法樹轉換。但是 React 生態系統嚴重依賴 babel 來實現熱更新以及其他基於編譯的解決方案，比如 CSS-in-JS 庫。目前在@vitejs/plugin-react和@vitejs/plugin-legacy 中使用它來提供對舊版本瀏覽器的支援。Parcel和Next.js團隊正在對 Rust 工具鏈最常用外掛SWC進行移植。一旦時機成熟，Vite 可以從 babel 直接轉移到 SWC（早期探索：基於 SWC 的@vitejs/plugin-legacy、unplugin-swc、vite-plugin-swc-react）。

PostCSS

Vite 鼓勵使用PostCSS，並支援它開箱即用。其他 CSS 前處理器也可以通過手動將它們新增到專案依賴項中來支援。但是 PostCSS 更符合 Vite 的願景，現在允許使用像postcss-nesting這樣的CSS草案外掛，讓你的 CSS 標準在未來保持相容。

其他探索

Snowpack

Snowpack利用 JavaScript 的原生模組化來避免不必要的工作，無論您的專案有多大，都能保持住非常快的速度。它有助於確立開發工具使用 ESModule 優先的正確性。Snowpack 和 Vite 之間相互影響，他倆討論了在 CommonJS 和 ESModule 共存的專案中標準化熱更新 API 以及載入 packages 等細節。Snowpack 的核心團隊成員（@FredKSchott、@drwpow、@matthewcp、@n_moore）現在正在研究astro，這是一個基於 Islands-based SSG 框架，現在由 Vite 來提供開發方面的支援。這倆社群正在合作，在 Snowpack 上學到的經驗教訓將會用來幫助改進 Vite。

WMR

WMR是一款由Preact團隊開發類似於 Vite 的一款工具。@_developit率先使用了 Rollup Plugin API，該方案允許在開發期間使用 Rollup 外掛，並在構建時利用豐富的 Rollup 生態系統。Vite 2 Plugin API 是在 WMR 的基礎上新增了 Vite 特定的鉤子函式。Vite 和 WMR 進行合作統一了 URL 字尾修飾符和其他的一些功能。

Web Dev Server

Web Dev Server採用更底層的方法，需要為生產構建手動設定 Rollup 配置。它內建了幾個可在 Vite setup 使用的工具，例如一些社群成員正在使用的Web Test Runner、vite-web-test-runner-plugin。

UI 框架

Vue

由尤雨溪作為建立者和專案負責人，Vue 以及 Vite 核心團隊中的另外兩名核心成員（@antfu和@sodatea）共同維護，Vue 團隊現在推薦使用 Vite 驅動的create-vue作為新專案的腳手架工具。Vue3 使用@vitejs/plugin-vue外掛來提供支援，而 Vue2 則是使用vite-plugin-vue2外掛來實現支援。Vite 將在 Vue 生態中被大規模採用，大多數專案計劃或已經實施了對 Vite 的支援，並在某些情況下預設提供Vite來作為開發構建工具（如：Nuxt、Vuetify、Quasar）。也有直接基於 Vite 的 Vue 新專案（VitePress，iles，Slidev）

React

Vite 通過@vitejs/plugin-react外掛來提供對React的支援。@alecdotbiz(Vite 的核心維護者之一)一直在努力將體驗做的更加絲滑。我們從 React 生態中看到了許多用法，主要用於原型設計和庫的文件。例如：React Router Docs。而Next.js則是押注於 Webpack 和 SWC 的未來。因此，對於複雜的 SSR React 應用程式，Vite 使用得並不多。但是有一些基於 Vite 的 Next-inspired 框架開始出現，比如rakkas和vitext。

Preact

隨著Preact團隊開發WMR，我們可以預料到他們會推薦WMR來作為他們推薦的構建工具。即便如此，他們依然也開發了@preact/preset-vite外掛來對 Vite 提供官方支援。@marvinhagemeist是 Preact 核心團隊的成員，他一直與 Vite 社群密切合作，並積極參與了與兩個生態系統之間的安全性和相容性相關的討論（包括調整功能以及確保外掛在 Vite 和 WMR 中都能夠正常執行）。

Svelte

Svelte團隊是Vite最活躍的貢獻者之一。對 Svelte 的支援是通過vite-plugin-svelte外掛實現的。SvelteKit由 Vite 提供支援，我們可以預料到Vite將會在他們的生態中普及開來。@Rich_Harris(譯者注：Svelte的創始人)為 SvelteKit提出了一個通用的 SSR 方案，後來尤雨溪把它移植到了 Vite 上去。能夠共享 SSR 方案對於促進當前基於 Vite 的 SSG 和 SSR 框架的創新起到了至關重要的作用。@GrygrFlzr、@benmccann、@dominikg和@bluwyoo 非常關注該專案，並且 SvelteKit 是使用 Vite 的更高階框架之一，兩個團隊一直在密切合作。

marko

marko團隊開發了@marko/vite來作為Vite的官方外掛，它們還開發了Vite-based starters。@dylan_piercey和@RyanCarniato正在推動Zero JS和SSR streamin等功能。

Solid

Solid 團隊也有基於Vite的官方外掛：vite-plugin-solid。他們的專案模板SolidStart也在使用 Vite。@RyanCarniato在 Vite 社群中非常活躍，可以看看他在Vercel Edge Functions上用Vite和Solid寫的一個Demo。

lit

lit 團隊釋出了新版本框架。Vite monorepo 中有一個 starter 模板，因此lit可以在 create-vite 中可用。雖然目前還沒有在 lit 專案中啟用熱更新的外掛，但 lit 團隊有興趣建立一個。

App 框架

Nuxt

Nuxt 團隊正與Vite團隊緊密合作，以確保Vite的工程能夠順利的融入進Nuxt。他們建立了將 Vite 與 Nuxt 2 整合的nuxt-vite外掛。Nuxt 3將預設使用 Vite。Nuxt 團隊在構建工具方面採用了一種有趣的方法：使用的構建工具中抽象出框架。使用者將能夠在 Vite 和Webpack 5之間進行選擇。Nuxt 3 將允許 Vue 生態系統中的其他專案如：Vue Storefront享受 Vite 的紅利。值得一提的是，@antfu負責生態系統中很大一部分創新，而且他現在正在 Nuxt 團隊進行工作。

SvelteKit

SvelteKit是一個由Svelte提供支援的App框架(譯者注：類似於Svelte版的Nuxt)，推動了他們對現代 Web 開發的transitional apps的想法。Svelte 和 Vite 團隊正在流暢的進行協作，改進 Vite 的 SSR、伺服器 API 和總體質量。由於 SvelteKit 不斷的優化導致 Vite 有了很大的改進。

Astro

astro 團隊正在使用Vite來重構他們的引擎，他們已經成為Vite生態中的關鍵一員。Astro 正在多個領域推動 Vite 的發展，這是其他框架以前從未嘗試過的，並且他們在探索的過程中一直在進行改進。他們在 ESM 工具方面的經驗對於 Vite 的前進至關重要。

iles

iles是由@MaximoMussini建立出來的一個框架，受到 Astro 和 VitePress 的啟發，iles 是由 Vite 來提供支援的一個很好的例子（iles 播客）。Maximo一直是一個活躍的社群成員，同時他也在推動 Vite 在Rails社群中的採用。

VitePress

VitePress是對VuePress的全新詮釋，它是用 Vue3 和 Vite 來驅動的靜態站點生成器。現在已經有很多使用VitePress的專案了：Vite 官網，Vue 部落格，VueUse，Pinia，vite-ruby，vite-plugin-pwa，Slidev，windi，laravel-vite等… VuePress 通過@vuepress/bundler-vite這個外掛實現了對 Vite 的支援。

Slinkity

⚠️譯者注：這個Logo的下半部分是白色的，跟白色底色的網頁放在一起會導致圖片看起來不明顯，如果好奇的話可以手動把此網頁的背景色換個顏色就能看出來了

@bholmesdev等人正在研究Slinkity，這是一個將Eleventy和 Vite 結合到一起的 SSG 框架。受到@Snugug在vite-plugin-eleventy和Astro等框架的早期工作的啟發，Slinkity為 110 位使用者開啟了 Vite 生態系統的大門。它允許 Eleventy 專案利用 Vite 的 UI 框架支援、快速的 HMR 和 Vite 豐富的外掛生態系統。

Hydrogen

Shopify 在其新的 React Store Front 框架Hydrogen中選擇了 Vite。Hydrogen 團隊正在與 React 團隊進行合作，在 Vite 中支援React Server Components和帶有suspense的服務端渲染。@jplhomer在 Vite 社群中非常活躍。他合作改進了 Vite 的核心部分以及 Vite 對 React 的支援。

rakkas

rakkas是一個由 Vite 來提供支援的 React SSR 框架，受到 Next.js 和 SvelteKit 的啟發。作者@cyco130一直活躍在 Vite 社群中，與其他人一起努力改進 Vite 中的 SSR。

vite-plugin-ssr

vite-plugin-ssr是另一個微型 SSR 框架，由@brillout開發。他在 Vite SSR 領域非常活躍，他經常幫別人解決問題，而且還為 Vite 修復bug，同時也會給出一些idea。vite-plugin-ssr 旨在成為 SSR 框架作者的工具包，提供比 Vite 的底層SSR更流暢的體驗。有像vitext這樣的框架，這是一個由@asleMammadam開發的 React 框架，它們就是基於vite-plugin-ssr來進行開發的。@brillout還致力於其他相關專案，如Telefunc和Vike。

vite-ssr

vite-ssr是由@frandiox來建立的，作為 Node.js 中 Vite 的一個簡單而又強大的 SSR 解決方案。這是將 Vite 的 SSR API 作為高階解決方案公開的另一種方式。他還是vitedge的建立者，這是一個在Cloudflare Workers上執行的全棧 Vite 框架。

整合

vite-ruby

@MaximoMussini建立了第一個與後端整合的專案：vite-ruby，這讓 Vite 成功挺進了 Ruby 社群。可以點選這個連結來詳細瞭解一下vite-ruby背後的故事。Vite Land中的rails頻道已經開始活躍了起來，這個專案啟發了其他人將 Vite 整合到他們的專案中。

laravel-vite

laravel-vite由@enzoinnocenzi所建立，它是用來將 Vite 和 Laravel 生態結合在一起的。它緊跟著vite-ruby的腳步，Enzo 的工作一直是促進 Vite 在 Laravel 社群被採用的關鍵因素。

fastify-vite

fastify-vite是一款類似於 Nuxt 和 Next 等成熟 SSR 框架的迷你版。@anothergalvez將 fastify-vite 構建為fastify-first的解決方案。fastify 和 Vite 社群之間有很多協同合作。fastify-vite 正在推動這兩個專案。

CSS 框架

Tailwind CSS

Tailwind Labs是最早意識到 Vite 潛力的團隊之一，他們很早就為 Vite 提供了官方整合示例，並開始贊助Vite。他們還發布了Just-in-Time Mode，這是Tailwind v2.1+的JIT引擎，與Vite HMR搭配使用時提供出色的體驗。隨著Hydrogen等框架推動 Vite 和 Tailwind CSS 組合，Tailwind 使用者將迎來新的 Vite 浪潮。

Windi CSS

WindiCSS是由@satireven所建立的，這是一個基於 Tailwind 的JIT引擎，@antfu用它建立了vite-plugin-windicss，它在載入和 HMR 的速度等方面具有一定的優勢。現在該專案已經發展成為了一個活躍的社群。WindiCSS 現在被用於為Nuxt 3和Slidev等文件頁面。

UnoCSS

在用了一段時間的 WindiCSS 之後，@antfu建立了UnoCSS，這是一個原子化 CSS 引擎的工具包。它再次表明我們原子化CSS究竟還有多大的改進空間。UnoCSS 可以比 Windi CSS 快 200 倍，比最快的引擎快兩個數量級。您可以點選閱讀《重新構想原子化 CSS》和《聊聊純 CSS 圖示》。@antfu建立了UnoCSS 開始這個專案時只是為了給 Vite 提供解決方案，但現在它也可用於其他打包程式。UnoCSS 將為下一代 WindiCSS 引擎提供動力。

外掛

Awesome Vite Plugins

在Awesome Vite中有很多很棒的Vite 外掛。不過由於每天都有新專案、新模板和新外掛提交到Awesome Vite的倉庫中，所以由@Scrum_來負責維護這個倉庫。這裡有大量的外掛，並且數量每天都在增加。以下是一些示例：

awesome-rollup

Rollup 的核心外掛由Rollup團隊來維護，並且在Awesome Rollup中有一個社群外掛的列表。Vite的外掛API大多都與Rollup相容。我們還在維護一個 Vite 與 Rollup 的外掛相容性列表。由於 Rollup 生態系統越來越接近 Vite，所以希望我們將來能在 Rollup 外掛文件中看到“Works in Vite”的徽章。一些相容外掛的示例：

unplugin

unplugin是@antfu的另一個開源專案，這是一個用於 Vite、Rollup、Webpack 以及未來可能會出現的其他打包工具的統一外掛系統。@antfu一直在用這個庫來遷移他的外掛，這樣的話他給 Vite 寫的很大一部分外掛就可以用在其他的構建工具上。這個專案是unjs umbrella的一部分，這是 Nuxt 團隊從 Nuxt 的構建工具裡提取出來的一個庫。列舉幾個例子：

vite-plugin-pwa

vite-plugin-pwa是Vite的一款的零配置PWA 外掛，它通過Workbox啟用離線支援。@antfu和@userquin為每個框架都構建了完美且無縫的體驗。

Starters

Replit

Replit是最早利用Vite來為使用者提供更好體驗的公司之一，他們將React Starter Template切換到 Vite。@amasad的推文將 React Starter Template 與 create-react-app 進行了比較，後來還在許多部落格文章和演講中提及，以說明載入速度的差異；“Vite 甚至在 CRA 啟動之前就已經開始執行了。”

Glitch

glitch在他們的Starter專案中採用了 Vite。他們使用 Vite 來完成繁重的工作。keithkurson說：“和它一起工作真是太令人愉悅了，它讓我們所有的初學者都擁有相似的構建模式，並且 Rollup 外掛對於程式設計師來說將是一個巨大的附加值。”

StackBlitz

⚠️ 譯者注：這個StackBlitz就是前面有的專案連結裡的線上執行這一項

StackBlitz在他們的瀏覽器 IDE 裡把 Vite 變成了一等公民。他們努力使 Vite 與WebContainers相容（包括支援esbuild）。他們還與Vite生態中的團隊進行合作，以確保最流行的那些 Vite 框架能夠順利執行，如：SvelteKit、Hydrogen、Astro等。他們還新增了Vite starters：vite.new和vite.new/{template}，並將 Vite 包含在他們的展示頁面中，而且他們現在還是Vite的最大讚助商！

Vitesse

Vitesse是 Vite Starter 的一個很好的例子。這是一個基於 Vue3 的模板專案，@antfu一直在使用這個 starter 來展示Vite生態中的一些最好用的外掛，它還具有以下功能：File based routing、auto imports、PWA、Windi CSS、SSG、critical CSS等… 這也是使用Cypress進行測試的一個很好的例子。

WebExtension Vite Starter

WebExtension是一個基於Vitesse的啟動模板。它是用來展示 Vite 在典型 Web 應用程式之外的使用。這是在其他環境中使用 Vite 的一個例子，以便能夠獲得 Vite 的熱更新功能及外掛。

Awesome Vite Templates

Vite 社群現在正為不同的框架和工具組合來維護模板專案。Awesome Vite Templates中有大量的選擇。如果你更喜歡在本地執行它們，像degit這樣的工具可以讓您使用degit user/repo。

測試

mocha-vite-puppeteer

mocha-vite-puppeteer是由@larsthorup所開發的，它允許使用 Vite 和Puppeteer執行 Mocha 前端測試。它可以以 Vite 一樣快的速度來執行測試。

vite-jest

@sodatea(譯者注：他是 @vue/cli 的主要開發者)正在開發vite-jest這個專案，旨在為Jest提供一流的 Vite 整合。由於Jest 中的阻止程式，導致它目前仍處於開發中的狀態。您可以點選這個issue來檢視詳情，還可以通過加入Vite Land中的#testing頻道來幫助推進這些工作。

Cypress

Cypress一直在將 Vite 整合到他們的產品中去，並且他們在社群中非常活躍。他們正把他們的Cypress 元件測試與 Vite 開發伺服器完美的匹配到一起。他們還使用Vitesse來重構他們的UI。可以點進@_jessicasachs的VueConf US 2021 演講，瞭解更多關於 Cypress 和 Vite 為何能很好地合作的資訊。

Web Test Runner

vite-web-test-runner-plugin是@web/test-runner的一個外掛，用於測試以 Vite 驅動的專案。這個外掛會自動連線到當前目錄下的 Vite 專案，載入專案配置，並用你已經配置好的 Vite build pipeline 來構建每個測試檔案。

其他工具

Storybook

storybook-builder-vite是由@eirikobo、@sasan_farrokh和ianvanschooten他們仨所建立，它允許您使用 Vite 來構建您的 Storybook。Michael Shilman寫了一篇部落格來詳細的解釋了一遍原理，並強調了storybook-builder-vite的好處：顯著提高了構建速度、與 Vite 配置的相容性以及對 Vite 外掛生態系統的訪問。

Tauri

⚠️ 譯者注：這玩意是個類似於 Electron 的東西，但不會像 Electron 那樣把 Chromium 和 Node.js 打包進去，解決了 Electron 的兩大痛點，前端部分使用作業系統的 webview，後端和作業系統整合這塊使用 rust 來實現。

Tauri是一個用前端技術來構建桌面應用程式的框架。他們用vite-plugin-tauri來為 Vite 新增了官方入門模板，這是一個由 Tauri 核心團隊成員@Amr__Bashir維護的外掛。Vite + Tauri 可能是原生應用開發的絕佳組合。來自 Tauri 團隊的一句話：“Vite 在 Tauri 的心中有著特殊的地位”。

TroisJS

troisjs結合了ThreeJS、Vue 3、以及 Vite 為 Vue 構建了一個類似於 react-three-fiber 的庫。可以點選這個連結檢視這個非常炫酷的演示Demo(譯者注：我點進去是404，估計是原作者哪寫錯了)。@Rich_Harris最近推出了Svelte Cubed，它為Svelte提供了基於 3D 元件的宣告性場景。Vite 的熱更新非常適合設計 3D 場景，事實上一些react-three-fiber的示例現在也正在使用 Vite。

Slidev

另一個來自@antfu的專案，Slidev是一個基於 Markdown 的幻燈片生成器，由 Vite、Vue3 和 WindiCSS 提供支援。它功能豐富，Vite 的熱更新機制保證了程式碼的變化會立即對映到幻燈片中。這是 Vite 令新一波工具成為可能的最好例子之一。

Viteshot

Viteshot是由@fwouts建立出來的用於在幾秒鐘之內生成 UI 元件的螢幕截圖的。他還在研究React Preview（將來打算更名為 Preview JS），它在 VSCode 中提供元件和 Storybook 的實時預覽。

Backlight

請新增圖片描述

Backlight是來自\<div>RIOTS的設計系統平臺。他們正在用 Vite 來構建他們的應用程式，用VitePress來寫文件，他們還在開發browser-vite，它是 Vite 的一個分支，可以在瀏覽器中使用Vite（用service worker來啟動服務）。

參與其中！

如果你耐著性子看完了上面那些，那麼相信你肯定會對 Vite 的生態產生了一定的興趣。如果你還沒有加入Vite Land，那麼現在就加入進來吧！來 #contributing 頻道打個招呼，跟大家好好分享一下你的idea，然後和大家一起合作吧！

最終宣告

其實我還可以繼續列舉Vite相關的內容，比方說：Vanilla Extract has an official integration for Vite, Craft CMS integration, Storyblok is using Vite in lib mode for their build setups, Vercel added zero configuration deploys for Vite。但是我必須要在某個內容那裡停下來，因為如果一直寫下去的話這篇文章就會過長，沒人願意看了。正如我所說，Vite現在的生態發展的太龐大了，無法在一篇文章裡把所有內容都列舉出來。

還有很多我沒有提到的人：Vite 核心團隊成員和其他團隊，他們在處理大量問題時做得非常出色。一直在修復 bug 和新增 feature。還有我們的翻譯團隊，是他們幫助更多的人入門Vite。而這樣的例子簡直是數不勝數。我希望能把他們其中一些人寫進這篇文章裡，所以這裡我要寫上一份名單(排名不分先後)：@shinigami，@underfin，@egoist，@Linus_Borg，@posva，@ KiaKing85，@ meteorlxy，@ ygj6，@OneNail，@Niputi_，@CHOYSEN，@ csr632，@nihalgonsalves，@ CAWA-93，@daychongyang，@remorses，@ydcjeff，@iheyunfei，@danielcroe，@ pi0，@threepointone，@khalwat，@hannoeru，@wheatjs，@artursignell，@ jgalbraith64，@pcalloc，@ QC-L ，@ShenQingchuan，@naokie，@周杰倫-ES，@alexjoverm，@puruvjdev以及Vite 核心團隊和Vite 生態的所有其他貢獻者。讓我們一起共同繼續建設美好明天吧！

結語

怎麼樣？看完這篇文章是不是又重新認識了一下Vite呢？之前我本以為Vite只在Vue圈子裡比較火，這篇文章直接重新整理了我的認知。

另一個讓我覺得驚歎的就是這個@antfu，之前就老在Vue相關的專案裡看到他，當時就覺得這個人戰鬥力還蠻強的哈，給Vue貢獻了這麼多專案，看完這篇文章… 這大佬戰鬥力也太強了吧！這到底是同時維護了多少個專案啊！而且每個專案看起來都挺牛B！

順便也給大家介紹下這位大佬：antfu是 Anthony Fu 的簡寫，他姓Fu，我以前一直以為他姓福(福爾康的福)，直到後來有一次在哪個捐贈網站上看到了他的中文名字，時間過的太久了不記得全名了，但記得他的中文姓：傅，如果有人知道他的中文名可以在評論區裡發出來給大家看看。

⚠️ 有的人可能認識姓付的人，那麼傅和付是同一個姓嗎？傅是付的繁體版嗎？好奇的話可以點選知乎這篇：《付姓和傅姓是同一個姓氏嗎？》 看看大家都是怎麼說的

好像有點跑題了哈，這篇文章是介紹Vite的又不是來介紹安東尼·傅的，希望看完這篇文章可以打消掉你的顧慮，讓你不再猶豫新專案到底該不該用Vite(老專案就儘量別折騰了哈)。儘管放心大膽的用吧！這麼多大佬的專案都在用呢，人家的專案不比我們們的專案複雜多了，而且又不僅僅是隻有Vue的那幾個人在維護，還有這麼多大佬都在幫忙呢，怕啥！

本文首發於公眾號：前端學不動

相關文章