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

語言: CN / TW / HK

theme: channing-cyan

前言

之前 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 還新增了許多 featureVite 公開了一個靈活的JavaScript API,允許與RailsLaravel等後端框架或其他開發工具整合,如CypressStorybookVite 的外掛 APIRollup 相容,使 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

vite

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

WX20211208-153137.png

rollup

rollup

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

esbuild

esbuild

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

Typescript

typescript

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

babel

babel

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

PostCSS

postcss

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

其他探索

Snowpack

snowpack

⚠️譯者注:由於SnowpackLogo就是白色的(畢竟snow是雪的意思嘛,所以Logo也要做成雪的顏色),但當它跟白色底色的網頁放在一起會導致圖片看起來不明顯,如果好奇的話可以手動把此網頁的背景色換個顏色就能看出來了

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

WMR

WMR

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

Web Dev Server

Web Dev Server

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

UI 框架

Vue

vue

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

React

react

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

Preact

preact.svg

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

Svelte

svelte

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

marko

marko

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

Solid

solid

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

lit

lit

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

App 框架

Nuxt

nuxt.svg

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

SvelteKit

sveltekit

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

Astro

astro

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

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

iles

iles

iles是由@MaximoMussini創建出來的一個框架,受到 AstroVitePress 的啟發,iles 是由 Vite 來提供支援的一個很好的例子(iles 播客)。Maximo一直是一個活躍的社群成員,同時他也在推動 ViteRails社群中的採用。

VitePress

vitepress

VitePress是對VuePress的全新詮釋,它是用 Vue3Vite 來驅動的靜態站點生成器。現在已經有很多使用VitePress的專案了:Vite 官網Vue 部落格VueUsePiniavite-rubyvite-plugin-pwaSlidevwindilaravel-vite等… VuePress 通過@vuepress/bundler-vite這個外掛實現了對 Vite 的支援。

Slinkity

slinkity

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

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

Hydrogen

hydrogen

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

rakkas

rakkas

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

vite-plugin-ssr

vite-plugin-ssr

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

vite-ssr

vite-ssr

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

整合

vite-ruby

vite-ruby

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

laravel-vite

laravel-vite

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

fastify-vite

fastify

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

CSS 框架

Tailwind CSS

tailwind

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

Windi CSS

windicss

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

UnoCSS

unocss

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

外掛

Awesome Vite Plugins

awesome-vite

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

awesome-rollup

awesome-rollup

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

unplugin

unplugin

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

vite-plugin-pwa

vite-plugin-pwa

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

Starters

Replit

replit

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

Glitch

glitch

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

StackBlitz

stackblitz

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

StackBlitz在他們的瀏覽器 IDE 裡把 Vite 變成了一等公民。他們努力使 ViteWebContainers相容(包括支援esbuild)。他們還與Vite生態中的團隊進行合作,以確保最流行的那些 Vite 框架能夠順利執行,如:SvelteKitHydrogenAstro等。他們還添加了Vite startersvite.newvite.new/{template},並將 Vite 包含在他們的展示頁面中,而且他們現在還是Vite的最大讚助商!

Vitesse

vitesse

VitesseVite Starter 的一個很好的例子。這是一個基於 Vue3 的模板專案,@antfu一直在使用這個 starter 來展示Vite生態中的一些最好用的外掛,它還具有以下功能File based routingauto importsPWAWindi CSSSSGcritical CSS等… 這也是使用Cypress進行測試的一個很好的例子。

WebExtension Vite Starter

vitesse-webext

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

Awesome Vite Templates

awesome-vite

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

測試

mocha-vite-puppeteer

mocha-vite-puppeteer

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

vite-jest

vite-jest

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

Cypress

cypress

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

Web Test Runner

Web Dev Server

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

其他工具

Storybook

storybook

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

Tauri

tauri

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

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

TroisJS

trois

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

Slidev

slidev

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

Viteshot

viteshot

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

Backlight

backlight

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

Backlight是來自\

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

參與其中!

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

最終宣告

其實我還可以繼續列舉Vite相關的內容,比方說:Vanilla Extract has an official integration for ViteCraft CMS integrationStoryblok is using Vite in lib mode for their build setupsVercel 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!

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

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

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

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

往期精彩文章