今天介绍下最新更新的Vite7

大家好,我是鱼樱!!!

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

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

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

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

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

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

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 更新日志

相关推荐
伍哥的传说39 分钟前
React & Immer 不可变数据结构的处理
前端·数据结构·react.js·proxy·immutable·immer·redux reducers
90后的晨仔1 小时前
从传统 CSS 到 Vue 的 Class 与 Style 动态绑定全解
前端·vue.js
拾光拾趣录1 小时前
前端灵魂拷问:10道题
前端·面试
阿丽塔~2 小时前
【vue3+vue-pdf-embed】实现PDF+图片预览
javascript·vue.js·pdf
独泪了无痕2 小时前
Vite 模块动态导入之Glob导入
前端·vue.js·vite
xdpcxq10292 小时前
Docker用Web应用实例深入容器
前端·docker·容器
超浪的晨3 小时前
JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
java·开发语言·前端·javascript·后端·学习·个人开发
tianchang3 小时前
React Hook 解析(二):`useEffect` 与 `useLayoutEffect`
前端·react.js
codervibe3 小时前
使用 Vue3 + Axios 与 Spring Boot 高效对接(含 token 处理)
前端·vue.js
云边散步3 小时前
《校园生活平台从 0 到 1 的搭建》第五篇:商品后端
前端·后端