今天介绍下最新更新的Vite7

大家好，我是鱼樱！！！

关注公众号【鱼樱AI实验室】持续分享更多前端和AI辅助前端编码新知识~~

写点笔记写点生活~写点经验。

在当前环境下，纯前端开发者可以通过技术深化、横向扩展、切入新兴领域以及产品化思维找到突破口。

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前端最卷的开发语言一点不为过，三天一小更，五天一大更。。。一年一个框架升级~=嗯，要的就是这样感觉！与时俱进~

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热替换（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 是一种具有明确建议的工具，具备合理的默认设置。您可以在功能指南中了解 Vite 的各种可能性。通过插件，Vite 支持与其他框架或工具的集成。如有需要，您可以通过配置部分自定义适应你的项目。

在开发过程中，Vite 假设使用的是现代浏览器。这意味着该浏览器支持大多数最新的 JavaScript 和 CSS 功能。因此，Vite 将 esnext 设置为转换目标。这可以防止语法降低，使 Vite 能够尽可能接近原始源代码提供模块。Vite 会注入一些运行时代码以使开发服务器正常工作。这些代码使用了 Baseline 中包含的功能，该功能在每个主要版本发布时（此主要版本为 2025-05-01）新增。

对于生产环境构建，Vite 默认以 Baseline 广泛可用的浏览器为目标平台。这些浏览器至少发布于两年半之前。您可以通过配置降低目标浏览器版本。此外，可以通过官方 @vitejs/plugin-legacy 支持旧版浏览器。更多详情，请参阅构建生产环境部分。

Vite 需要 Node.js 版本 20.19+, 22.12+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

Vite7 更改了什么

1. Node.js支持变更

要求使用Node.js 20.19+或22.12+
不再支持Node.js 18（已于2025年4月底达到EOL）
新的Node.js版本要求使Vite能够以纯ESM格式发布，同时保持对CJS模块通过require调用的兼容性

2. 浏览器兼容性目标调整

默认浏览器目标从'modules'更改为'baseline-widely-available'
支持的最低浏览器版本更新：
- Chrome: 87 → 107
- Edge: 88 → 107
- Firefox: 78 → 104
- Safari: 14.0 → 16.0
这一变化使浏览器兼容性更具可预测性

3. Environment API增强

保留了Vite 6中引入的实验性Environment API
新增buildApp钩子，使插件能够协调环境的构建过程
为框架提供了更强大的环境API

js 复制代码

export default {
  builder: {
    buildApp: async (builder) => {
      const environments = Object.values(builder.environments)
      return Promise.all(
        environments.map((environment) => builder.build(environment)),
      )
    },
  },
}

4. Rolldown集成

引入基于Rust的下一代打包工具Rolldown
通过rolldown-vite包可替代默认的vite包
未来Rolldown将成为Vite的默认打包工具
能显著减少构建时间，尤其对大型项目

5. Vite DevTools增强

通过VoidZero与NuxtLabs合作开发
为所有基于Vite的项目和框架提供更深入的调试与分析功能

6. 废弃功能移除

移除了Sass的旧版API支持
移除了splitVendorChunkPlugin

7. Vitest支持

Vitest 3.2开始支持Vite 7.0

在 Vite 7 中，我们新增了一个 buildApp 钩子，使插件能够协调环境的构建过程。详情请参阅面向框架的 Environment API 指南。

本次 rolldown 并没有内置在 vite 7 中，如果你想体验由 rolldown 驱动的 vite 体验，请使用 rolldown-vite 包替换 vite 即可。

点击查看 rolldown-vite 使用说明

所有变更的完整列表请见 Vite 7 更新日志。