[译]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 还新增了许多 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

[译]Vue官方成员:Vite生态发展的怎么样了_第1张图片

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

[译]Vue官方成员:Vite生态发展的怎么样了_第2张图片

rollup

[译]Vue官方成员:Vite生态发展的怎么样了_第3张图片

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

esbuild

[译]Vue官方成员:Vite生态发展的怎么样了_第4张图片

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

Typescript

[译]Vue官方成员:Vite生态发展的怎么样了_第5张图片

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

babel

[译]Vue官方成员:Vite生态发展的怎么样了_第6张图片

在大多数情况下,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

[译]Vue官方成员:Vite生态发展的怎么样了_第7张图片

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

其他探索

Snowpack

[译]Vue官方成员:Vite生态发展的怎么样了_第8张图片

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

WMR

[译]Vue官方成员:Vite生态发展的怎么样了_第9张图片

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

Web Dev Server

[译]Vue官方成员:Vite生态发展的怎么样了_第10张图片

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

UI 框架

Vue

[译]Vue官方成员:Vite生态发展的怎么样了_第11张图片

尤雨溪作为创建者和项目负责人,Vue 以及 Vite 核心团队中的另外两名核心成员(@antfu@sodatea)共同维护,Vue 团队现在推荐使用 Vite 驱动的create-vue作为新项目的脚手架工具。Vue3 使用@vitejs/plugin-vue插件来提供支持,而 Vue2 则是使用vite-plugin-vue2插件来实现支持。Vite 将在 Vue 生态中被大规模采用,大多数项目计划或已经实施了对 Vite 的支持,并在某些情况下默认提供Vite来作为开发构建工具(如:NuxtVuetifyQuasar)。也有直接基于 ViteVue 新项目(VitePressilesSlidev

React

[译]Vue官方成员:Vite生态发展的怎么样了_第12张图片

Vite 通过@vitejs/plugin-react插件来提供对React的支持。@alecdotbiz(Vite 的核心维护者之一)一直在努力将体验做的更加丝滑。我们从 React 生态中看到了许多用法,主要用于原型设计和库的文档。例如:React Router Docs。而Next.js则是押注于 WebpackSWC 的未来。因此,对于复杂的 SSR React 应用程序,Vite 使用得并不多。但是有一些基于 ViteNext-inspired 框架开始出现,比如rakkasvitext

Preact

[译]Vue官方成员:Vite生态发展的怎么样了_第13张图片

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

Svelte

Svelte团队是Vite最活跃的贡献者之一。对 Svelte 的支持是通过vite-plugin-svelte插件实现的。SvelteKitVite 提供支持,我们可以预料到Vite将会在他们的生态中普及开来。@Rich_Harris(译者注Svelte的创始人)为 SvelteKit提出了一个通用的 SSR 方案,后来尤雨溪把它移植到了 Vite 上去。能够共享 SSR 方案对于促进当前基于 ViteSSGSSR 框架的创新起到了至关重要的作用。@GrygrFlzr@benmccann@dominikg@bluwyoo 非常关注该项目,并且 SvelteKit 是使用 Vite 的更高级框架之一,两个团队一直在密切合作。

marko

[译]Vue官方成员:Vite生态发展的怎么样了_第14张图片

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

Solid

[译]Vue官方成员:Vite生态发展的怎么样了_第15张图片

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

lit

[译]Vue官方成员:Vite生态发展的怎么样了_第16张图片

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

App 框架

Nuxt

[译]Vue官方成员:Vite生态发展的怎么样了_第17张图片

Nuxt 团队正与Vite团队紧密合作,以确保Vite的工程能够顺利的融入进Nuxt。他们创建了将 ViteNuxt 2 集成的nuxt-vite插件。Nuxt 3将默认使用 ViteNuxt 团队在构建工具方面采用了一种有趣的方法:使用的构建工具中抽象出框架。用户将能够在 ViteWebpack 5之间进行选择。Nuxt 3 将允许 Vue 生态系统中的其他项目如:Vue Storefront享受 Vite 的红利。值得一提的是,@antfu负责生态系统中很大一部分创新,而且他现在正在 Nuxt 团队进行工作。

SvelteKit

[译]Vue官方成员:Vite生态发展的怎么样了_第18张图片

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

Astro

[译]Vue官方成员:Vite生态发展的怎么样了_第19张图片

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

iles

[译]Vue官方成员:Vite生态发展的怎么样了_第20张图片

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

VitePress

[译]Vue官方成员:Vite生态发展的怎么样了_第21张图片

VitePress是对VuePress的全新诠释,它是用 Vue3Vite 来驱动的静态站点生成器。现在已经有很多使用VitePress的项目了:Vite 官网Vue 博客VueUsePiniavite-rubyvite-plugin-pwaSlidevwindilaravel-vite等… VuePress 通过@vuepress/bundler-vite这个插件实现了对 Vite 的支持。

Slinkity

[译]Vue官方成员:Vite生态发展的怎么样了_第22张图片

⚠️ 译者注:这个 Logo的下半部分是白色的,跟白色底色的网页放在一起会导致图片看起来不明显,如果好奇的话可以手动把此网页的背景色换个颜色就能看出来了

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

Hydrogen

[译]Vue官方成员:Vite生态发展的怎么样了_第23张图片

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

rakkas

[译]Vue官方成员:Vite生态发展的怎么样了_第24张图片

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

vite-plugin-ssr

[译]Vue官方成员:Vite生态发展的怎么样了_第25张图片

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

[译]Vue官方成员:Vite生态发展的怎么样了_第26张图片

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

集成

vite-ruby

[译]Vue官方成员:Vite生态发展的怎么样了_第27张图片

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

laravel-vite

[译]Vue官方成员:Vite生态发展的怎么样了_第28张图片

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

fastify-vite

[译]Vue官方成员:Vite生态发展的怎么样了_第29张图片

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

CSS 框架

Tailwind CSS

[译]Vue官方成员:Vite生态发展的怎么样了_第30张图片

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

Windi CSS

[译]Vue官方成员:Vite生态发展的怎么样了_第31张图片

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

UnoCSS

[译]Vue官方成员:Vite生态发展的怎么样了_第32张图片

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

插件

Awesome Vite Plugins

[译]Vue官方成员:Vite生态发展的怎么样了_第33张图片

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

awesome-rollup

[译]Vue官方成员:Vite生态发展的怎么样了_第34张图片

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

unplugin

[译]Vue官方成员:Vite生态发展的怎么样了_第35张图片

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

vite-plugin-pwa

[译]Vue官方成员:Vite生态发展的怎么样了_第36张图片

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

Starters

Replit

[译]Vue官方成员:Vite生态发展的怎么样了_第37张图片

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

Glitch

[译]Vue官方成员:Vite生态发展的怎么样了_第38张图片

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

StackBlitz

[译]Vue官方成员:Vite生态发展的怎么样了_第39张图片

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

StackBlitz在他们的浏览器 IDE 里把 Vite 变成了一等公民。他们努力使 ViteWebContainers兼容(包括支持esbuild)。他们还与Vite生态中的团队进行合作,以确保最流行的那些 Vite 框架能够顺利运行,如:SvelteKitHydrogenAstro等。他们还添加了Vite startersvite.newvite.new/{template},并将 Vite 包含在他们的展示页面中,而且他们现在还是Vite的最大赞助商!

Vitesse

[译]Vue官方成员:Vite生态发展的怎么样了_第40张图片

VitesseVite Starter 的一个很好的例子。这是一个基于 Vue3 的模板项目,@antfu一直在使用这个 starter 来展示Vite生态中的一些最好用的插件,它还具有以下功能File based routingauto importsPWAWindi CSSSSGcritical CSS等… 这也是使用Cypress进行测试的一个很好的例子。

WebExtension Vite Starter

[译]Vue官方成员:Vite生态发展的怎么样了_第41张图片

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

Awesome Vite Templates

[译]Vue官方成员:Vite生态发展的怎么样了_第42张图片

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

测试

mocha-vite-puppeteer

[译]Vue官方成员:Vite生态发展的怎么样了_第43张图片

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

vite-jest

[译]Vue官方成员:Vite生态发展的怎么样了_第44张图片

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

Cypress

[译]Vue官方成员:Vite生态发展的怎么样了_第45张图片

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

Web Test Runner

[译]Vue官方成员:Vite生态发展的怎么样了_第46张图片

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

其他工具

Storybook

[译]Vue官方成员:Vite生态发展的怎么样了_第47张图片

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

Tauri

[译]Vue官方成员:Vite生态发展的怎么样了_第48张图片

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

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

TroisJS

[译]Vue官方成员:Vite生态发展的怎么样了_第49张图片

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

Slidev

[译]Vue官方成员:Vite生态发展的怎么样了_第50张图片

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

Viteshot

[译]Vue官方成员:Vite生态发展的怎么样了_第51张图片

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

Backlight

[译]Vue官方成员:Vite生态发展的怎么样了_第52张图片

Backlight是来自\

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!

顺便也给大家介绍下这位大佬:antfuAnthony Fu 的简写,他姓Fu,我以前一直以为他姓福(福尔康的福),直到后来有一次在哪个捐赠网站上看到了他的中文名字,时间过的太久了不记得全名了,但记得他的中文姓:,如果有人知道他的中文名可以在评论区里发出来给大家看看。

⚠️ 有的人可能认识姓付的人,那么傅和付是同一个姓吗?傅是付的繁体版吗?好奇的话可以点击知乎这篇: 《付姓和傅姓是同一个姓氏吗?》 看看大家都是怎么说的

好像有点跑题了哈,这篇文章是介绍Vite的又不是来介绍安东尼·傅的,希望看完这篇文章可以打消掉你的顾虑,让你不再犹豫新项目到底该不该用Vite(老项目就尽量别折腾了哈)。尽管放心大胆的用吧!这么多大佬的项目都在用呢,人家的项目不比咱们的项目复杂多了,而且又不仅仅是只有Vue的那几个人在维护,还有这么多大佬都在帮忙呢,怕啥!

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

你可能感兴趣的:([译]Vue官方成员:Vite生态发展的怎么样了)