关于前端:译Vue官方成员Vite生态发展的怎么样了

之前 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 的生态：

官网：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 万次：

官网：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 的我的项目) 的维护者保持联系以确保生态系统可能放弃兼容。

官网：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 的疾速代替计划。

官网：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。

官网：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）。

官网：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 规范在将来放弃兼容。

官网：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。

官网：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 后缀修饰符和其余的一些性能。

官网：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。

官网：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）

官网：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。

官网：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 中都可能失常运行）。

官网：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 的更高级框架之一，两个团队始终在密切合作。

官网：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 等性能。

官网：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。

官网：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 团队有趣味创立一个。

官网：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 团队进行工作。

官网：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 有了很大的改良。

官网：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 的后退至关重要。

官网：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 社区中的采纳。

官网：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 的反对。

⚠️译者注 ：这个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 丰盛的插件生态系统。

官网：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 的反对。

官网：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。

官网：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。

官网：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 框架。

官网：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 集成到他们的我的项目中。

官网：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 社区被采纳的关键因素。

官网：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 正在推动这两个我的项目。

官网：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 浪潮。

官网：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 等文档页面。

官网：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 引擎提供能源。

官网：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：查看插件的两头态

官网：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

官网：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

官网：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 为每个框架都构建了完满且无缝的体验。

官网：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 启动之前就曾经开始运行了。”

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

glitch 在他们的 Starter 我的项目中采纳了 Vite。他们应用 Vite 来实现沉重的工作。keithkurson 说：“和它一起工作真是太令人愉悦了，它让咱们所有的初学者都领有类似的构建模式，并且 Rollup 插件对于程序员来说将是一个微小的附加值。”

官网：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 的最大赞助商！

官网：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 进行测试的一个很好的例子。

官网：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 的热更新性能及插件。

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

Vite 社区当初正为不同的框架和工具组合来保护模板我的项目。Awesome Vite Templates 中有大量的抉择。如果你更喜爱在本地运行它们，像 degit 这样的工具能够让您应用degit user/repo。

官网：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 一样快的速度来运行测试。

官网：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 频道来帮忙推动这些工作。

官网：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 为何能很好地单干的信息。

官网：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 来构建每个测试文件。

官网：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 插件生态系统的拜访。

官网：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 的心中有着非凡的位置”。

官网：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。

官网：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 令新一波工具成为可能的最好例子之一。

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

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

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

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

前言

注释

站在伟人的肩膀

vite

rollup

esbuild

Typescript

babel

PostCSS

其余摸索

Snowpack

WMR

Web Dev Server

UI 框架

Vue

React

Preact

Svelte

marko

Solid

lit

App 框架

Nuxt

SvelteKit

Astro

iles

VitePress

Slinkity

Hydrogen

rakkas

vite-plugin-ssr

vite-ssr

集成

vite-ruby

laravel-vite

fastify-vite

CSS 框架

Tailwind CSS

Windi CSS

UnoCSS

插件

Awesome Vite Plugins

awesome-rollup

unplugin

vite-plugin-pwa

Starters

Replit

Glitch

StackBlitz

Vitesse

WebExtension Vite Starter

Awesome Vite Templates

测试

mocha-vite-puppeteer

vite-jest

Cypress

Web Test Runner

其余工具

Storybook

Tauri

TroisJS

Slidev

Viteshot

Backlight

参加其中！

最终申明

结语