Vite 4.0 发布！
2022 年 12 月 9 日 - 查看 Vite 5.0 发布公告
Vite 3 发布 五个月前。从那时起，每周的 npm 下载量从 100 万次增加到 250 万次。生态系统也日趋成熟，并持续增长。在今年的 Jamstack Conf 调查 中，社区中的使用率从 14% 上升到 32%，同时保持了 9.7 的高满意度评分。我们见证了 Astro 1.0、Nuxt 3 以及其他由 Vite 提供支持的框架的稳定发布，这些框架正在不断创新和协作：SvelteKit、Solid Start、Qwik City。Storybook 宣布了对 Vite 的一流支持，作为其 Storybook 7.0 主要功能之一。Deno 现在 支持 Vite。Vitest 的采用率正在爆炸式增长，它很快将占到 Vite npm 下载量的一半。Nx 也在投资生态系统，并 正式支持 Vite。
作为 Vite 及其相关项目所经历的增长的展示，Vite 生态系统于 10 月 11 日在 ViteConf 2022 上集结。我们看到了来自主要 Web 框架和工具的代表讲述了创新和协作的故事。在象征性的举动中，Rollup 团队选择在同一天发布了 Rollup 3。
今天，Vite 团队 在我们生态系统合作伙伴的帮助下，很高兴地宣布发布 Vite 4，它在构建时由 Rollup 3 提供支持。我们与生态系统合作，确保了此新主要版本的平滑升级路径。Vite 现在使用 Rollup 3，这使我们能够简化 Vite 的内部资产处理，并带来了许多改进。请查看 Rollup 3 发布说明。
快速链接
其他语言的文档
如果您最近开始使用 Vite，我们建议您阅读 为什么选择 Vite 指南，并查看 入门 和 功能指南。如果您想参与其中，欢迎您在 GitHub 上贡献代码。近 700 位贡献者 为 Vite 做出了贡献。在 推特 和 Mastodon 上关注更新，或加入我们的 Discord 社区 与其他人协作。
开始使用 Vite 4
使用 pnpm create vite 使用您首选的框架搭建一个 Vite 项目，或在线打开一个已启动的模板，使用 vite.new 体验 Vite 4。
您还可以运行 pnpm create vite-extra 以访问来自其他框架和运行时的模板（Solid、Deno、SSR 和库启动器）。当您在 Others 选项下运行 create vite 时，create vite-extra 模板也可用。
请注意，Vite 启动模板旨在用作测试 Vite 与不同框架的游乐场。在构建您的下一个项目时，我们建议您联系每个框架推荐的启动器。一些框架现在在 create vite 中也重定向到它们的启动器（Vue 的 create-vue 和 Nuxt 3，以及 Svelte 的 SvelteKit）。
新的 React 插件在开发期间使用 SWC
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，但在开发期间用 SWC 替换 Babel。对于不需要非标准 React 扩展的大型项目，冷启动和热模块替换 (HMR) 可以显著加快。
浏览器兼容性
现代浏览器构建现在默认情况下以 safari14 为目标，以实现更广泛的 ES2020 兼容性。这意味着现代构建现在可以使用 BigInt，并且 空值合并运算符 不再被转译。如果您需要支持旧版浏览器，您可以像往常一样添加 @vitejs/plugin-legacy。
将 CSS 作为字符串导入
在 Vite 3 中，导入 .css 文件的默认导出可能会导致 CSS 的双重加载。
import cssString from './global.css'这种双重加载可能会发生，因为 .css 文件将被发出，并且 CSS 字符串也可能被应用程序代码使用 - 例如，由框架运行时注入。从 Vite 4 开始，.css 默认导出 已弃用。在这种情况下，需要使用 ?inline 查询后缀修饰符，因为这样不会发出导入的 .css 样式。
import stuff from './global.css?inline'在 迁移指南 中了解更多信息。
环境变量
Vite 现在使用 dotenv 16 和 dotenv-expand 9（以前是 dotenv 14 和 dotenv-expand 5）。如果您有一个包含 # 或 ` 的值，您需要用引号将其括起来。
-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 对比 18.3 MB）。
升级到 Vite Core
Vite Core 和 vite-ecosystem-ci 继续发展，为维护者和合作者提供更好的体验，并确保 Vite 开发能够扩展以应对生态系统的发展。
框架插件脱离核心
@vitejs/plugin-vue 和 @vitejs/plugin-react 从 Vite 的第一个版本开始就一直是 Vite 核心单仓库的一部分。这帮助我们在进行更改时获得了一个紧密的反馈循环，因为我们同时对核心和插件进行了测试和发布。有了 vite-ecosystem-ci，我们可以在这些插件在独立的仓库中开发的情况下获得这种反馈，因此从 Vite 4 开始，它们已从 Vite 核心单仓库中移出。这对 Vite 的框架无关性故事意义重大，并将使我们能够建立独立的团队来维护每个插件。如果您有错误要报告或功能要请求，请在新的仓库中创建问题：vitejs/vite-plugin-vue 和 vitejs/vite-plugin-react。
vite-ecosystem-ci 改进
vite-ecosystem-ci 通过提供对 大多数主要下游项目 的 CI 状态的按需状态报告来扩展 Vite 的 CI。我们每周三次针对 Vite 的主分支运行 vite-ecosystem-ci，并在引入回归之前及时收到报告。Vite 4 将很快与大多数使用 Vite 的项目兼容，这些项目已经准备了包含必要更改的分支，并将在这几天内发布。我们还能够在 PR 上按需运行 vite-ecosystem-ci，在评论中使用 /ecosystem-ci run，使我们能够了解 更改的影响，然后再将其合并到主分支。
致谢
没有 Vite 贡献者（其中许多是下游项目和插件的维护者）的无数工作时间以及 Vite 团队 的努力，Vite 4 就不可能实现。我们所有人共同努力，再次改善了 Vite 的 DX，适用于使用它的每个框架和应用程序。我们很高兴能够为如此充满活力的生态系统改进一个共同的基础。
我们也感谢赞助 Vite 团队的个人和公司，以及直接投资 Vite 未来的公司：@antfu7 在 Vite 和生态系统上的工作是他 Nuxt Labs 工作的一部分，Astro 为 @bluwyoo 的 Vite 核心工作提供资金，而 StackBlitz 雇佣了 @patak_dev 全职为 Vite 工作。
下一步
我们目前的重点将是处理新打开的问题，以避免可能的回归造成干扰。如果您想参与进来并帮助我们改进 Vite，我们建议您从问题分类开始。加入 我们的 Discord 并联系 #contributing 频道。完善我们的 #docs 故事，并 #help 其他人。我们需要继续为下一波用户建立一个有帮助和友好的社区，因为 Vite 的采用率正在继续增长。
有很多开放的方面可以继续改善所有选择 Vite 来为其框架提供动力并开发其应用程序的人的 DX。前进！