前言

之前 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

• 官网：https://vitejs.dev
• Discord(一款国外流行的聊天软件)：https://chat.vitejs.dev
• 推特：https://twitter.com/vite_js
• npm：https://www.npmjs.com/package/vite
• GitHub：https://github.com/vitejs/vite
• 在线运行：https://vite.new

在 Vite2 的第二次大规模发布之后，尤雨溪成立了一个 Vite 团队来对该项目进行维护。现在的Vite是一个由尤雨溪所领导的团队在紧密推进的项目，我们还与其他团队进行了密切的合作，以确保 Vite 能够顺利地用于他们的框架和集成。现在有超过400 名贡献者对 Vite贡献了代码。并且我们目前有一个十分活跃的社区，该项目发展迅速。GitHub 中有超过 7万5千 个项目都在使用 Vite，并且 Vite 每月的 npm 下载量超过了 130 万次：

rollup

• 官网：https://rollupjs.org
• Discord(一款国外流行的聊天软件)：https://is.gd/rollup_chat
• 推特：https://twitter.com/rollupjs
• npm：https://www.npmjs.com/package/rollup
• GitHub：https://github.com/rollup/rollup

Vite 可以被认为是一个开发服务器 + Rollup。Rollup 的核心维护者之一@lukastaegert推荐使用 Vite 来作为 Rollup 的 Web 开发服务器。Vite 兼容 Rollup 的插件系统为 Vite 提供了一个良好的开端。Rollup 的维护者在扩展他们的插件 API 时会与 Vite 及 WMR(译者注：WMR 是 Preact 团队开发出来的一款类似于 Vite 的项目) 的维护者保持联系以确保生态系统能够保持兼容。

esbuild

• 官网：https://esbuild.github.io
• 推特：https://twitter.com/evanwallace
• npm：https://www.npmjs.com/package/esbuild
• GitHub：https://github.com/evanw/esbuild

esbuild是一个用 Go 语言编写的打包构建工具，它突破了构建工具性能的极限。Vite 用 esbuild 来转译单个文件（去除 TS 类型并编译 JSX）并将其作为默认压缩工具（对于 JS 和 CSS 文件）。在开发期间预打包依赖项时，它还会被用作打包工具。@evanwallace(译者注：他是esbuild的作者)一直在做非常出色的工作。esbuild 每天都在改进，它为 Vite 提供了 tsc、babel 和 Rollup 的快速替代方案。

Typescript

• 官网：https://typescriptlang.org
• Discord(一款国外流行的聊天软件)：https://discord.gg/typescript
• 推特：https://twitter.com/TypeScript
• npm：https://www.npmjs.com/package/typescript
• GitHub：https://github.com/microsoft/TypeScript

Typescript 的出现席卷了整个 JS 世界。Vite支持导入.ts文件。在内部，我们会用 esbuild 来去除掉TS类型，这样可以避免在编译成js文件时做很复杂的类型校验。这对于获得最佳的热更新体验而言非常重要。如果您使用的是VS Code之类的现代 IDE，您将在编写代码时通过智能提示来获得大部分信息。您也可以在打包期间运行tsc命令来进行类型校验，或者使用像rollup-plugin-typescript2这样的插件。@fi3ework的vite-plugin-checker是另一个有趣的项目，允许您在 worker 线程中运行 TypeScript。

babel

• 官网：https://babel.dev
• 推特：https://twitter.com/babeljs
• npm：https://www.npmjs.com/package/@babel/core
• GitHub：https://github.com/babel/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

• 官网：https://postcss.org
• 推特：https://twitter.com/postcss
• npm：https://www.npmjs.com/package/postcss
• GitHub：https://github.com/postcss/postcss

Vite 鼓励使用PostCSS，并支持它开箱即用。其他 CSS 预处理器也可以通过手动将它们添加到项目依赖项中来支持。但是 PostCSS 更符合 Vite 的愿景，现在允许使用像postcss-nesting这样的CSS草案插件，让你的 CSS 标准在未来保持兼容。

其他探索

Snowpack

• 官网：https://snowpack.dev
• Discord(一款国外流行的聊天软件)：https://discord.gg/snowpack
• 推特：https://twitter.com/snowpackjs
• npm：https://www.npmjs.com/package/snowpack
• GitHub：https://github.com/snowpackjs/snowpack

Snowpack利用 JavaScript 的原生模块化来避免不必要的工作，无论您的项目有多大，都能保持住非常快的速度。它有助于确立开发工具使用 ESModule 优先的正确性。Snowpack 和 Vite 之间相互影响，他俩讨论了在 CommonJS 和 ESModule 共存的项目中标准化热更新 API 以及加载 packages 等细节。Snowpack 的核心团队成员（@FredKSchott、@drwpow、@matthewcp、@n_moore）现在正在研究astro，这是一个基于 Islands-based SSG 框架，现在由 Vite 来提供开发方面的支持。这俩社区正在合作，在 Snowpack 上学到的经验教训将会用来帮助改进 Vite。

WMR

• 官网：https://wmr.dev
• Slack(国外的一款类似于钉钉的工作软件)：https://chat.preactjs.com/
• npm：https://www.npmjs.com/package/wmr
• GitHub：https://github.com/preactjs/wmr

WMR是一款由Preact团队开发类似于 Vite 的一款工具。@_developit率先使用了 Rollup Plugin API，该方案允许在开发期间使用 Rollup 插件，并在构建时利用丰富的 Rollup 生态系统。Vite 2 Plugin API 是在 WMR 的基础上添加了 Vite 特定的钩子函数。Vite 和 WMR 进行合作统一了 URL 后缀修饰符和其他的一些功能。

Web Dev Server

• 官网：https://modern-web.dev
• Slack(国外的一款类似于钉钉的工作软件)：https://modern-web.dev/discover/slack
• 推特：https://twitter.com/modern_web_dev
• GitHub：https://github.com/modernweb-dev/web

Web Dev Server采用更底层的方法，需要为生产构建手动设置 Rollup 配置。它内置了几个可在 Vite setup 使用的工具，例如一些社区成员正在使用的Web Test Runner、vite-web-test-runner-plugin。

UI 框架

Vue

• 官网：https://v3.vuejs.org
• Discord(一款国外流行的聊天软件)：https://chat.vuejs.org
• 推特：https://twitter.com/vuejs
• npm：https://www.npmjs.com/package/vue
• GitHub：https://github.com/vuejs/vue-next
• 在线运行：https://vite.new/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

• 官网：https://reactjs.org
• Discord(一款国外流行的聊天软件)：https://discord.gg/reactiflux
• 推特：https://twitter.com/reactjs
• npm：https://www.npmjs.com/package/react
• GitHub：https://github.com/facebook/react
• 在线运行：https://vite.new/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

• 官网：https://preactjs.com
• Slack(国外的一款类似于钉钉的工作软件)：https://chat.preactjs.com
• 推特：https://twitter.com/preactjs
• npm：https://www.npmjs.com/package/preact
• GitHub：https://github.com/preactjs/preact
• 在线运行：https://vite.new/preact

随着Preact团队开发WMR，我们可以预料到他们会推荐WMR来作为他们推荐的构建工具。即便如此，他们依然也开发了@preact/preset-vite插件来对 Vite 提供官方支持。@marvinhagemeist是 Preact 核心团队的成员，他一直与 Vite 社区密切合作，并积极参与了与两个生态系统之间的安全性和兼容性相关的讨论（包括调整功能以及确保插件在 Vite 和 WMR 中都能够正常运行）。

Svelte

• 官网：https://svelte.dev
• Discord(一款国外流行的聊天软件)：https://svelte.dev/chat
• 推特：https://twitter.com/sveltejs
• npm：https://www.npmjs.com/package/svelte
• GitHub：https://github.com/sveltejs/svelte
• 在线运行：https://vite.new/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

• 官网：https://markojs.com
• Discord(一款国外流行的聊天软件)：https://discord.gg/marko
• 推特：https://twitter.com/MarkoDevTeam
• npm：https://www.npmjs.com/package/marko
• GitHub：https://github.com/marko-js/marko

marko团队开发了@marko/vite来作为Vite的官方插件，它们还开发了Vite-based starters。@dylan_piercey和@RyanCarniato正在推动Zero JS和SSR streamin等功能。

Solid

• 官网：https://solidjs.com
• Discord(一款国外流行的聊天软件)：https://discord.com/invite/solidjs
• 推特：https://twitter.com/solid_js
• npm：https://www.npmjs.com/package/solid-js
• GitHub：https://github.com/solidjs/solid
• 在线运行：https://stackblitz.com/edit/solid-vite?file=src%2Findex.tsx

Solid 团队也有基于Vite的官方插件：vite-plugin-solid。他们的项目模板SolidStart也在使用 Vite。@RyanCarniato在 Vite 社区中非常活跃，可以看看他在Vercel Edge Functions上用Vite和Solid写的一个Demo。

lit

• 官网：https://lit.dev
• Slack(国外的一款类似于钉钉的工作软件)：https://lit.dev/slack-invite
• 推特：https://twitter.com/buildWithLit
• npm：https://www.npmjs.com/package/lit
• GitHub：https://github.com/lit/lit
• 在线运行：https://vite.new/lit

lit 团队发布了新版本框架。Vite monorepo 中有一个 starter 模板，因此lit可以在 create-vite 中可用。虽然目前还没有在 lit 项目中启用热更新的插件，但 lit 团队有兴趣创建一个。

App 框架

Nuxt

• 官网：https://v3.nuxtjs.org
• Discord(一款国外流行的聊天软件)：https://discord.com/invite/ps2h6QT
• 推特：https://twitter.com/nuxt_js
• npm：https://www.npmjs.com/package/nuxt
• GitHub：https://github.com/nuxt/framework
• 在线运行：https://stackblitz.com/fork/github/nuxt/starter/tree/stackblitz

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

• 官网：https://kit.svelte.dev
• Discord(一款国外流行的聊天软件)：https://svelte.dev/chat
• 推特：https://twitter.com/sveltejs
• npm：https://www.npmjs.com/package/@sveltejs/kit
• GitHub：https://github.com/sveltejs/kit
• 在线运行：https://node.new/sveltekit

SvelteKit是一个由Svelte提供支持的App框架(译者注：类似于Svelte版的Nuxt)，推动了他们对现代 Web 开发的transitional apps的想法。Svelte 和 Vite 团队正在流畅的进行协作，改进 Vite 的 SSR、服务器 API 和总体质量。由于 SvelteKit 不断的优化导致 Vite 有了很大的改进。

Astro

• 官网：https://astro.build
• Discord(一款国外流行的聊天软件)：https://astro.build/chat
• 推特：https://twitter.com/astrodotbuild
• npm：https://www.npmjs.com/package/astro
• GitHub：https://github.com/withastro/astro
• 在线运行：https://stackblitz.com/fork/astro

astro 团队正在使用Vite来重构他们的引擎，他们已经成为Vite生态中的关键一员。Astro 正在多个领域推动 Vite 的发展，这是其他框架以前从未尝试过的，并且他们在探索的过程中一直在进行改进。他们在 ESM 工具方面的经验对于 Vite 的前进至关重要。

iles

• 官网：https://iles-docs.netlify.app
• Discord(一款国外流行的聊天软件)：https://discord.gg/PkbxgzPhJv
• 推特：https://twitter.com/ilesjs
• npm：https://www.npmjs.com/package/iles
• GitHub：https://github.com/ElMassimo/iles
• 在线运行：https://stackblitz.com/fork/iles?file=src%2Fcomponents%2FWelcome.vue

iles是由@MaximoMussini创建出来的一个框架，受到 Astro 和 VitePress 的启发，iles 是由 Vite 来提供支持的一个很好的例子（iles 播客）。Maximo一直是一个活跃的社区成员，同时他也在推动 Vite 在Rails社区中的采用。

VitePress

• 官网：https://vitepress.vuejs.org
• npm：https://www.npmjs.com/package/vitepress
• GitHub：https://www.npmjs.com/package/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的下半部分是白色的，跟白色底色的网页放在一起会导致图片看起来不明显，如果好奇的话可以手动把此网页的背景色换个颜色就能看出来了

• 官网：https://slinkity.dev
• Discord(一款国外流行的聊天软件)：https://discord.gg/GBkBy9u
• 推特：https://twitter.com/slinkitydotdev
• npm：https://www.npmjs.com/package/slinkity
• GitHub：https://github.com/slinkity/slinkity
• 在线运行：https://stackblitz.com/edit/node-v8mqfv

@bholmesdev等人正在研究Slinkity，这是一个将Eleventy和 Vite 结合到一起的 SSG 框架。受到@Snugug在vite-plugin-eleventy和Astro等框架的早期工作的启发，Slinkity为 110 位用户打开了 Vite 生态系统的大门。它允许 Eleventy 项目利用 Vite 的 UI 框架支持、快速的 HMR 和 Vite 丰富的插件生态系统。

Hydrogen

• 官网：https://hydrogen.shopify.dev
• Discord(一款国外流行的聊天软件)：https://discord.gg/ppSbThrFaS
• 推特：https://twitter.com/shopifydevs
• npm：https://www.npmjs.com/package/@shopify/hydrogen
• GitHub：https://github.com/Shopify/hydrogen
• 在线运行：https://hydrogen.new

Shopify 在其新的 React Store Front 框架Hydrogen中选择了 Vite。Hydrogen 团队正在与 React 团队进行合作，在 Vite 中支持React Server Components和带有suspense的服务端渲染。@jplhomer在 Vite 社区中非常活跃。他合作改进了 Vite 的核心部分以及 Vite 对 React 的支持。

rakkas

• 官网：https://rakkasjs.org
• 推特：https://twitter.com/cyco130
• npm：https://www.npmjs.com/package/rakkasjs
• GitHub：https://github.com/rakkasjs/rakkasjs
• 在线运行：https://stackblitz.com/edit/rakkas-demo-ts?file=src%2Fpages%2Fpage.tsx

rakkas是一个由 Vite 来提供支持的 React SSR 框架，受到 Next.js 和 SvelteKit 的启发。作者@cyco130一直活跃在 Vite 社区中，与其他人一起努力改进 Vite 中的 SSR。

vite-plugin-ssr

• 官网：https://vite-plugin-ssr.com
• Discord(一款国外流行的聊天软件)：https://discord.com/invite/qTq92FQzKb
• 推特：https://twitter.com/brillout
• npm：https://www.npmjs.com/package/vite-plugin-ssr
• GitHub：https://github.com/brillout/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

• 官网：https://github.com/frandiox/vite-ssr#readme
• Discord(一款国外流行的聊天软件)：https://discord.gg/PkbxgzPhJv
• npm：https://www.npmjs.com/package/vite-ssr
• GitHub：https://github.com/frandiox/vite-ssr

vite-ssr是由@frandiox来创建的，作为 Node.js 中 Vite 的一个简单而又强大的 SSR 解决方案。这是将 Vite 的 SSR API 作为高级解决方案公开的另一种方式。他还是vitedge的创建者，这是一个在Cloudflare Workers上运行的全栈 Vite 框架。

集成

vite-ruby

• 官网：https://vite-ruby.netlify.app
• Discord(一款国外流行的聊天软件)：https://discord.gg/pC5sG7Gqh7
• npm：https://www.npmjs.com/package/vite-ruby
• GitHub：https://github.com/ElMassimo/vite_ruby

@MaximoMussini创建了第一个与后端集成的项目：vite-ruby，这让 Vite 成功挺进了 Ruby 社区。可以点击这个链接来详细了解一下vite-ruby背后的故事。Vite Land中的rails频道已经开始活跃了起来，这个项目启发了其他人将 Vite 集成到他们的项目中。

laravel-vite

• 官网：https://laravel-vite.innocenzi.dev
• Discord(一款国外流行的聊天软件)：https://discord.gg/Td4us2BSaX
• npm：https://www.npmjs.com/package/laravel-vite
• GitHub：https://github.com/innocenzi/laravel-vite

laravel-vite由@enzoinnocenzi所创建，它是用来将 Vite 和 Laravel 生态结合在一起的。它紧跟着vite-ruby的脚步，Enzo 的工作一直是促进 Vite 在 Laravel 社区被采用的关键因素。

fastify-vite

• 官网：https://fastify-vite.dev
• Discord(一款国外流行的聊天软件)：https://discord.gg/9gcAHEzKaX
• npm：https://www.npmjs.com/package/fastify-vite
• GitHub：https://github.com/fastify/fastify-vite

fastify-vite是一款类似于 Nuxt 和 Next 等成熟 SSR 框架的迷你版。@anothergalvez将 fastify-vite 构建为fastify-first的解决方案。fastify 和 Vite 社区之间有很多协同合作。fastify-vite 正在推动这两个项目。

CSS 框架

Tailwind CSS

• 官网：https://tailwindcss.com
• Discord(一款国外流行的聊天软件)：https://tailwindcss.com/discord
• 推特：https://twitter.com/tailwindcss
• npm：https://www.npmjs.com/package/tailwindcss
• GitHub：https://github.com/tailwindlabs/tailwindcss

Tailwind Labs是最早意识到 Vite 潜力的团队之一，他们很早就为 Vite 提供了官方集成示例，并开始赞助Vite。他们还发布了Just-in-Time Mode，这是Tailwind v2.1+的JIT引擎，与Vite HMR搭配使用时提供出色的体验。随着Hydrogen等框架推动 Vite 和 Tailwind CSS 组合，Tailwind 用户将迎来新的 Vite 浪潮。

Windi CSS

• 官网：https://windicss.org
• Discord(一款国外流行的聊天软件)：https://chat.windicss.org
• 推特：https://twitter.com/windi_css
• npm：https://www.npmjs.com/package/windicss
• GitHub：https://github.com/windicss/windicss

WindiCSS是由@satireven所创建的，这是一个基于 Tailwind 的JIT引擎，@antfu用它创建了vite-plugin-windicss，它在加载和 HMR 的速度等方面具有一定的优势。现在该项目已经发展成为了一个活跃的社区。WindiCSS 现在被用于为Nuxt 3和Slidev等文档页面。

UnoCSS

• 官网：https://unocss.antfu.me
• npm：https://www.npmjs.com/package/@unocss/core
• GitHub：https://github.com/antfu/unocss

在用了一段时间的 WindiCSS 之后，@antfu创建了UnoCSS，这是一个原子化 CSS 引擎的工具包。它再次表明我们原子化CSS究竟还有多大的改进空间。UnoCSS 可以比 Windi CSS 快 200 倍，比最快的引擎快两个数量级。您可以点击阅读《重新构想原子化 CSS》和《聊聊纯 CSS 图标》。@antfu创建了UnoCSS 开始这个项目时只是为了给 Vite 提供解决方案，但现在它也可用于其他打包程序。UnoCSS 将为下一代 WindiCSS 引擎提供动力。

插件

Awesome Vite Plugins

• 官网：https://github.com/vitejs/awesome-vite#plugins
• GitHub：https://github.com/vitejs/awesome-vite

在Awesome Vite中有很多很棒的Vite 插件。不过由于每天都有新项目、新模板和新插件提交到Awesome Vite的仓库中，所以由@Scrum_来负责维护这个仓库。这里有大量的插件，并且数量每天都在增加。以下是一些示例：

• vite-plugin-pages：基于文件系统的路由支持
• vite-plugin-mpa：Vite 开箱即用的多页面应用支持
• vite-plugin-federation：支持 Webpack 之类的模块
• vite-plugin-node：使用 Vite 作为 Node 开发服务器
• vite-plugin-comlink：带有comlink的 WebWorker
• vite-plugin-rsw：支持wasm-pack
• vite-plugin-elm：在项目中编译 Elm 应用程序/文档/元素
• vite-plugin-qrcode：显示一个二维码，扫了就能在手机上调试了
• vite-plugin-full-reload：修改文件时自动重新加载页面
• vite-plugin-compress：用于压缩项目中的 bundle 和 assets
• vite-plugin-checker：在 worker 线程中运行 TypeScript、VLS、vue-tsc、ESLint
• vite-plugin-inspect：检查插件的中间态

awesome-rollup

• 官网：https://github.com/rollup/awesome#readme
• GitHub：https://github.com/rollup/awesome

Rollup 的核心插件由Rollup团队来维护，并且在Awesome Rollup中有一个社区插件的列表。Vite的插件API大多都与Rollup兼容。我们还在维护一个 Vite 与 Rollup 的插件兼容性列表。由于 Rollup 生态系统越来越接近 Vite，所以希望我们将来能在 Rollup 插件文档中看到“Works in Vite”的徽章。一些兼容插件的示例：

• @rollup/plugin-yaml：将 YAML 文件转换为 ES6 模块
• rollup-plugin-typescript2：运行 TS (含编译期报错功能)
• rollup-plugin-critical：生成 critical CSS

unplugin

• 官网：https://github.com/unjs/unplugin#readme
• npm：https://www.npmjs.com/package/unplugin
• GitHub：https://github.com/unjs/unplugin

unplugin是@antfu的另一个开源项目，这是一个用于 Vite、Rollup、Webpack 以及未来可能会出现的其他打包工具的统一插件系统。@antfu一直在用这个库来迁移他的插件，这样的话他给 Vite 写的很大一部分插件就可以用在其他的构建工具上。这个项目是unjs umbrella的一部分，这是 Nuxt 团队从 Nuxt 的构建工具里提取出来的一个库。列举几个例子：

• unplugin-icons：可以按需引入数以千计的 icon 图标
• unplugin-vue-components：自动 import Vue 组件
• unplugin-auto-import：自动引入一些 TS API

vite-plugin-pwa

• 官网：https://vite-plugin-pwa.netlify.app
• npm：https://www.npmjs.com/package/vite-plugin-pwa
• GitHub：https://github.com/antfu/vite-plugin-pwa

vite-plugin-pwa是Vite的一款的零配置PWA 插件，它通过Workbox启用离线支持。@antfu和@userquin为每个框架都构建了完美且无缝的体验。

Starters

Replit

• 官网：https://replit.com
• Discord(一款国外流行的聊天软件)：https://discord.util.repl.co/join
• 推特：https://twitter.com/replit

Replit是最早利用Vite来为用户提供更好体验的公司之一，他们将React Starter Template切换到 Vite。@amasad的推文将 React Starter Template 与 create-react-app 进行了比较，后来还在许多博客文章和演讲中提及，以说明加载速度的差异；“Vite 甚至在 CRA 启动之前就已经开始运行了。”

Glitch

• 官网：https://glitch.com
• 推特：https://twitter.com/glitchdevs

glitch在他们的Starter项目中采用了 Vite。他们使用 Vite 来完成繁重的工作。keithkurson说：“和它一起工作真是太令人愉悦了，它让我们所有的初学者都拥有相似的构建模式，并且 Rollup 插件对于程序员来说将是一个巨大的附加值。”

StackBlitz

• 官网：https://stackblitz.com
• Discord(一款国外流行的聊天软件)：https://discordapp.com/invite/stackblitz
• 推特：https://twitter.com/stackblitz
• GitHub：https://github.com/stackblitz/core

⚠️ 译者注：这个StackBlitz就是前面有的项目链接里的在线运行这一项

StackBlitz在他们的浏览器 IDE 里把 Vite 变成了一等公民。他们努力使 Vite 与WebContainers兼容（包括支持esbuild）。他们还与Vite生态中的团队进行合作，以确保最流行的那些 Vite 框架能够顺利运行，如：SvelteKit、Hydrogen、Astro等。他们还添加了Vite starters：vite.new和vite.new/{template}，并将 Vite 包含在他们的展示页面中，而且他们现在还是Vite的最大赞助商！

Vitesse

• 官网：https://github.com/antfu/vitesse#readme
• 推特：https://twitter.com/antfu7
• npm：https://www.npmjs.com/package/vitesse
• GitHub：https://github.com/antfu/vitesse

Vitesse是 Vite Starter 的一个很好的例子。这是一个基于 Vue3 的模板项目，@antfu一直在使用这个 starter 来展示Vite生态中的一些最好用的插件，它还具有以下功能：File based routing、auto imports、PWA、Windi CSS、SSG、critical CSS等… 这也是使用Cypress进行测试的一个很好的例子。

WebExtension Vite Starter

• 官网：https://github.com/antfu/vitesse-webext#readme
• 推特：https://twitter.com/antfu7
• npm：https://www.npmjs.com/package/vitesse-webext
• GitHub：https://github.com/antfu/vitesse-webext

WebExtension是一个基于Vitesse的启动模板。它是用来展示 Vite 在典型 Web 应用程序之外的使用。这是在其他环境中使用 Vite 的一个例子，以便能够获得 Vite 的热更新功能及插件。

Awesome Vite Templates

• 官网：https://github.com/vitejs/awesome-vite#templates
• GitHub：https://github.com/vitejs/awesome-vite

Vite 社区现在正为不同的框架和工具组合来维护模板项目。Awesome Vite Templates中有大量的选择。如果你更喜欢在本地运行它们，像degit这样的工具可以让您使用degit user/repo。

测试

mocha-vite-puppeteer

• 官网：https://larsthorup/mocha-vite-puppeteer#readme
• npm：https://www.npmjs.com/package/mocha-vite-puppeteer
• GitHub：https://github.com/larsthorup/mocha-vite-puppeteer

mocha-vite-puppeteer是由@larsthorup所开发的，它允许使用 Vite 和Puppeteer运行 Mocha 前端测试。它可以以 Vite 一样快的速度来运行测试。

vite-jest

• 官网：https://github.com/sodatea/vite-jest#readme
• npm：https://www.npmjs.com/package/vite-jest
• GitHub：https://github.com/sodatea/vite-jest

@sodatea(译者注：他是 @vue/cli 的主要开发者)正在开发vite-jest这个项目，旨在为Jest提供一流的 Vite 集成。由于Jest 中的阻止程序，导致它目前仍处于开发中的状态。您可以点击这个issue来查看详情，还可以通过加入Vite Land中的#testing频道来帮助推进这些工作。

Cypress

• 官网：https://cypress.io
• Discord(一款国外流行的聊天软件)：https://on.cypress.io/chat
• 推特：https://twitter.com/Cypress_io
• npm：https://www.npmjs.com/package/cypress
• GitHub：https://github.com/cypress-io/cypress

Cypress一直在将 Vite 集成到他们的产品中去，并且他们在社区中非常活跃。他们正把他们的Cypress 组件测试与 Vite 开发服务器完美的匹配到一起。他们还使用Vitesse来重构他们的UI。可以点进@_jessicasachs的VueConf US 2021 演讲，了解更多关于 Cypress 和 Vite 为何能很好地合作的信息。

Web Test Runner

• 官网：https://github.com/material-svelte/vite-web-test-runner-plugin#readme
• npm：https://www.npmjs.com/package/vite-web-test-runner-plugin
• GitHub：https://github.com/material-svelte/vite-web-test-runner-plugin

vite-web-test-runner-plugin是@web/test-runner的一个插件，用于测试以 Vite 驱动的项目。这个插件会自动连接到当前目录下的 Vite 项目，加载项目配置，并用你已经配置好的 Vite build pipeline 来构建每个测试文件。

其他工具

Storybook

• 官网：https://github.com/eirslett/storybook-builder-vite#readme
• Discord(一款国外流行的聊天软件)：https://discord.gg/storybook
• 推特：https://twitter.com/storybookjs
• npm：https://www.npmjs.com/package/storybook
• GitHub：https://github.com/eirslett/storybook-builder-vite

storybook-builder-vite是由@eirikobo、@sasan_farrokh和ianvanschooten他们仨所创建，它允许您使用 Vite 来构建您的 Storybook。Michael Shilman写了一篇博客来详细的解释了一遍原理，并强调了storybook-builder-vite的好处：显著提高了构建速度、与 Vite 配置的兼容性以及对 Vite 插件生态系统的访问。

Tauri

• 官网：https://tauri.studio
• Discord(一款国外流行的聊天软件)：https://discord.com/invite/tauri
• 推特：https://twitter.com/TauriApps
• npm：https://www.npmjs.com/package/@tauri-apps/tauri
• GitHub：https://github.com/tauri-apps/tauri

⚠️ 译者注：这玩意是个类似于 Electron 的东西，但不会像 Electron 那样把 Chromium 和 Node.js 打包进去，解决了 Electron 的两大痛点，前端部分使用操作系统的 webview，后端和操作系统集成这块使用 rust 来实现。

Tauri是一个用前端技术来构建桌面应用程序的框架。他们用vite-plugin-tauri来为 Vite 添加了官方入门模板，这是一个由 Tauri 核心团队成员@Amr__Bashir维护的插件。Vite + Tauri 可能是原生应用开发的绝佳组合。来自 Tauri 团队的一句话：“Vite 在 Tauri 的心中有着特殊的地位”。

TroisJS

• 官网：https://troisjs.github.io
• 推特：https://twitter.com/soju22
• npm：https://www.npmjs.com/package/troisjs
• GitHub：https://github.com/troisjs/trois
• 在线运行：https://stackblitz.com/edit/troisjs-cannonjs

troisjs结合了ThreeJS、Vue 3、以及 Vite 为 Vue 构建了一个类似于 react-three-fiber 的库。可以点击这个链接查看这个非常炫酷的演示Demo(译者注：我点进去是404，估计是原作者哪写错了)。@Rich_Harris最近推出了Svelte Cubed，它为Svelte提供了基于 3D 组件的声明性场景。Vite 的热更新非常适合设计 3D 场景，事实上一些react-three-fiber的示例现在也正在使用 Vite。

Slidev

• 官网：https://sli.dev
• Discord(一款国外流行的聊天软件)：https://chat.sli.dev
• 推特：https://twitter.com/Slidevjs
• npm：https://www.npmjs.com/package/slidev
• GitHub：https://github.com/slidevjs/slidev
• 在线运行：https://sli.dev/new

另一个来自@antfu的项目，Slidev是一个基于 Markdown 的幻灯片生成器，由 Vite、Vue3 和 WindiCSS 提供支持。它功能丰富，Vite 的热更新机制保证了代码的变化会立即映射到幻灯片中。这是 Vite 令新一波工具成为可能的最好例子之一。

Viteshot

• 官网：https://viteshot.com
• 推特：https://twitter.com/fwouts
• GitHub：https://github.com/zenclabs/viteshot

Viteshot是由@fwouts创建出来的用于在几秒钟之内生成 UI 组件的屏幕截图的。他还在研究React Preview（将来打算更名为 Preview JS），它在 VSCode 中提供组件和 Storybook 的实时预览。

Backlight

• 官网：https://backlight.dev
• Discord(一款国外流行的聊天软件)：https://discord.gg/XkQxSU9
• 推特：https://twitter.com/backlight_dev
• GitHub：https://github.com/divriots/browser-vite

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的那几个人在维护，还有这么多大佬都在帮忙呢，怕啥！

本文首发于公众号：前端学不动