今天介绍下最新更新的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 更新日志

相关推荐
zwjapple1 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止5 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall5 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴5 小时前
简单入门Python装饰器
前端·python