知海

Vite 4.0 发布公告

vite-main发布与更新日志

title: Vite 4.0 发布公告
author:
name: Vite 团队
date: 2022-12-09
sidebar: false
head:

Vite 4.0 正式发布！

2022 年 12 月 9 日 - 查看 Vite 5.0 发布公告

Vite 3 发布 已经过去了五个月。在此期间，npm 周下载量从 100 万增长到了 250 万。生态系统也在不断成熟和壮大。在今年的 Jamstack Conf 调查 中，社区的 Vite 使用率从 14% 跃升至 32%，同时保持了 9.7 的高满意度评分。我们见证了由 Vite 驱动并持续创新与协作的多个框架的稳定版本发布，包括 Astro 1.0、Nuxt 3，以及 SvelteKit、Solid Start、Qwik City 等。Storybook 宣布将对 Vite 的一流支持作为 Storybook 7.0 的主要特性之一。Deno 现在也支持 Vite。Vitest 的采用率正在爆发式增长，它很快将占 Vite npm 下载量的一半。Nx 也在投资这一生态系统，并正式支持 Vite。

Vite 4 生态系统

作为 Vite 及相关项目增长的一次展示，Vite 生态系统于 10 月 11 日齐聚 ViteConf 2022。我们看到了来自主流 Web 框架和工具的代表分享创新与协作的故事。并且，颇具象征意义的是，Rollup 团队选择在同一天发布了 Rollup 3。

今天，Vite 团队 在生态系统合作伙伴的帮助下，很高兴地宣布 Vite 4 的发布，它在构建时由 Rollup 3 驱动。我们与生态系统合作，确保这一新的主版本能够平滑升级。Vite 现在使用 Rollup 3，这使得我们能够简化 Vite 内部的资源处理，并带来了许多改进。请参阅 Rollup 3 发布说明。

Vite 4 公告封面图

快速链接：

其他语言文档：

如果你最近才开始使用 Vite，我们建议阅读 为什么选择 Vite 指南，并查看 快速开始 和 功能指南。如果你想参与贡献，欢迎前往 GitHub。已有近 700 位贡献者 为 Vite 做出了贡献。关注 Twitter 和 Mastodon 上的更新，或加入我们的 Discord 社区 与他人协作。

开始体验 Vite 4

使用 pnpm create vite 以你偏好的框架搭建一个 Vite 项目，或者通过 vite.new 在线打开一个启动模板来体验 Vite 4。

你也可以运行 pnpm create vite-extra 获取来自其他框架和运行时的模板（Solid、Deno、SSR 和库启动器）。在运行 create vite 时，create vite-extra 的模板也会在 Others 选项下提供。

请注意，Vite 启动模板旨在作为使用不同框架测试 Vite 的游乐场。在构建你的下一个项目时，我们建议使用各框架推荐的启动器。一些框架现在会在 create vite 中重定向到它们的启动器（Vue 的 create-vue 和 Nuxt 3，Svelte 的 SvelteKit）。

使用 SWC 进行开发的新 React 插件

SWC 现在是 Babel 的成熟替代品，尤其是在 React 项目中。SWC 的 React Fast Refresh 实现比 Babel 快得多，对于某些项目来说，它现在是更好的选择。从 Vite 4 开始，React 项目可以使用两个各有优劣的插件。我们相信目前这两种方法都值得支持，并且我们将在未来继续探索对这两个插件的改进。

@vitejs/plugin-react

@vitejs/plugin-react 是一个使用 esbuild 和 Babel 的插件，以较小的包体积实现快速 HMR，并具有使用 Babel 转换管道的灵活性。

@vitejs/plugin-react-swc（新增）

@vitejs/plugin-react-swc 是一个新插件，在构建时使用 esbuild，但在开发时将 Babel 替换为 SWC。对于不需要非标准 React 扩展的大型项目，冷启动和热模块替换（HMR）可以显著加快。

浏览器兼容性

现代浏览器构建现在默认以 safari14 为目标，以实现更广泛的 ES2020 兼容性。这意味着现代构建现在可以使用 BigInt，并且空值合并运算符不再被转译。如果你需要支持旧版浏览器，可以像往常一样添加 @vitejs/plugin-legacy。

将 CSS 作为字符串导入

在 Vite 3 中，导入 .css 文件的默认导出可能会导致 CSS 被重复加载。

ts 复制代码 
import cssString from './global.css'

这种重复加载可能发生，因为 .css 文件会被输出，并且 CSS 字符串很可能也会被应用程序代码使用——例如，由框架运行时注入。从 Vite 4 开始，.css 默认导出已被弃用。在这种情况下，需要使用 ?inline 查询后缀修饰符，因为它不会输出导入的 .css 样式。

ts 复制代码 
import stuff from './global.css?inline'

在迁移指南中了解更多信息。

环境变量

Vite 现在使用 dotenv 16 和 dotenv-expand 9（此前是 dotenv 14 和 dotenv-expand 5）。如果你的值中包含 # 或 `，你需要用引号将它们括起来。

diff 复制代码 
-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"

了解更多详情，请参阅 dotenv 和 dotenv-expand 更新日志。

其他特性

  • CLI 快捷键（在开发过程中按 h 查看全部）(#11228)
  • 预打包依赖时支持 patch-package (#10286)
  • 更清晰的构建日志输出 (#10895)，并切换到 kB 以与浏览器开发者工具对齐 (#10982)
  • 改进了 SSR 期间的错误信息 (#11156)

更小的包体积

Vite 关注其体积大小，以加快安装速度，尤其是在文档和复现场景的游乐场中。这一次，这个主版本再次带来了 Vite 包体积的改进。Vite 4 的安装体积比 vite 3.2.5 减少了 23%（14.1 MB vs 18.3 MB）。

Vite 核心的升级

Vite Core 和 vite-ecosystem-ci 持续演进，为维护者和贡献者提供更好的体验，并确保 Vite 的开发能够扩展以应对生态系统的增长。

框架插件移出核心仓库

@vitejs/plugin-vue 和 @vitejs/plugin-react 从 Vite 最初版本起就是 Vite 核心 monorepo 的一部分。这帮助我们建立紧密的反馈循环，因为核心和插件会一起测试和发布。借助 vite-ecosystem-ci，我们可以在这些插件独立仓库开发时获得类似的反馈。因此，从 Vite 4 开始，它们已移出 Vite 核心 monorepo。这对于 Vite 框架无关的定位具有重要意义，并将使我们能够建立独立的团队来维护每个插件。如果你有 bug 要报告或功能要请求，请在新仓库中提交 issue：vitejs/vite-plugin-vue 和 vitejs/vite-plugin-react。

vite-ecosystem-ci 的改进

vite-ecosystem-ci 通过按需提供大多数主要下游项目 CI 状态报告，扩展了 Vite 的 CI。我们每周针对 Vite 的 main 分支运行三次 vite-ecosystem-ci，以便在引入回归之前及时收到报告。Vite 4 即将与大多数使用 Vite 的项目兼容，这些项目已经准备了包含所需更改的分支，并将在未来几天内发布。我们还能够在 PR 上通过评论使用 /ecosystem-ci run 按需运行 vite-ecosystem-ci，这样我们就能在更改进入 main 分支之前了解更改的影响。

致谢

Vite 4 的实现离不开 Vite 贡献者无数小时的辛勤工作，其中许多人是下游项目和插件的维护者，也离不开 Vite 团队 的努力。我们所有人共同协作，再次为每个使用 Vite 的框架和应用提升了 Vite 的开发体验。我们很感激能够为这样一个充满活力的生态系统改进共同的基础。

我们还要感谢赞助 Vite 团队的个人和公司，以及直接投资 Vite 未来的公司：@antfu7 在 Vite 和生态系统上的工作是其 Nuxt Labs 工作的一部分，Astro 资助了 @bluwyoo 的 Vite 核心工作，StackBlitz 雇佣了 @patak_dev 全职从事 Vite 工作。

下一步计划

我们当前的首要任务是整理新提交的 issue，以避免可能的回归造成干扰。如果你想参与并帮助我们改进 Vite，我们建议从 issue 分类开始。加入我们的 Discord，并在 #contributing 频道中联系我们。完善我们的 #docs 文档，并通过 #help 帮助他人。随着 Vite 采用率的持续增长，我们需要继续为下一波用户构建一个乐于助人、欢迎新人的社区。

还有很多待办事项需要持续改善每一位选择 Vite 来驱动其框架和开发应用的人们的开发体验。继续前进！

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。