vite7.0更新赶紧学起来，Rolldown用起来，更新速览

1、官方地址

还是先附带上我们的官方地址

javascript 复制代码

//vite官网
https://cn.vitejs.dev/


// vite7.0发布日志

https://cn.vitejs.dev/blog/announcing-vite7.html#vite-7-0-is-out

// vite7.0发布升级日志
https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md

// rolldown 官网
https://rolldown.rs/


// vitest3.2 日志版本地址
https://vitest.dev/blog/vitest-3-2.html

// rolldown使用地址（迟早的事）
https://voidzero.dev/posts/announcing-rolldown-vite

2、发布时间2025年6月24日

🍎官方地址

2025年6月24日，Vite 7.0 如闪电般降临，距离 Vite 6 发布仅过去七个月

还等什么，那我们这就开始升vite7了

🍎vite7 版本要求

javascript 复制代码

// Node.js 版本 

20.19+, 22.12+

// 至于Node18 （官方4月已停止维护）

🍎node的版本发布地址

javascript 复制代码

//node 发布版本中文地址
https://nodejs.org/zh-cn/blog/release


// 在我写这篇文章的时候的Node版本
Node v24.4.0 (Current) 2025年7月09日
Node v22.17.0 (LTS)  2025年6月24日

🍎版本选择

本着一定一定得是一个偶数的原则，我本地选择的版本是Node v22.16.0(LTS)

双数，LTS稳定版本，这是我选择的原则，发布日期当然也好记是那个你们都忘不了的日子

javascript 复制代码

Node v22.16.0 (LTS) 2025年5月21日

切换v22.16.0

javascript 复制代码

nvm install v22.16.0
nvm use 22.16.0
nvm list 

//安装yarn 
npm install -g yarn 

ok  开始v22.16.0之旅程吧

3、vite7内容

🍎环境版本升级

看看vite7.0支持的版本和环境

vite7.0支持	版本
node环境	20.19+或22.12+
浏览器（基线升级为baseline-widely-available）	支持版本 + 默认浏览器目标从`'modules'`更改为`'baseline-widely-available'`
Chrome	≥107
Edge	≥107
Firefox	≥104
Safari	≥16.0

✨ 先来看看我们新特性(Features)部分

🍎工具链升级支持Rolldown

Rolldown（Rust最强增程啊）

最为瞩目的肯定是我们的Rolldown，vite7 打包器可以使用Rolldown（替代 Rollup）**，**项目构建速度飙升

之前一直心心念念，没想到这就来了？

no，需要注意这次rolldown 并没有内置在 vite 7 中，但是可以通过rolldown-vite包可替代默认的vite包

javascript 复制代码

 //rolldown解决Vite 的架构痛点

  esbuild：用于开发阶段的依赖预打包、TypeScript/JSX 转换和代码压缩

  Rollup：用于生产环境构建，支持 Rollup 兼容的插件系统

rolldown-vite

vue项目只需要调整package.json即可，调整那个Vite没错

javascript 复制代码

{
  "dependencies": {
    "vite": "npm:rolldown-vite@latest"
  }
}

其他的可以覆盖，具体可以查看官方上面那个地址

预处理器构建解析

预处理器配置在构建时解析（resolve environments plugins at config time）

用过svelet的相信都对于它的构建速度甚为着迷，vue也一直想着力与构建速度的优化，这不，也来了

夸--尤大大真是你想到啥立马给你来啥

解释：

Vite 将在构建过程开始时解析和配置所需的环境变量和插件，而不是在运行时动态解析。

也就是在构建时，所有与环境相关的插件和配置都会被提前加载和解析，提高构建效率也减少运行时的延迟。

比如：

更高的构建效率：在构建过程中，所有的环境和插件配置都已被解析和确定，避免每次构建时重复计算。
更一致的构建行为：所有的环境和插件配置都提前处理过，构建结果完全一致，不会受到运行时环境变化的影响。
便于调试和优化：在构建阶段处理这些配置和插件，更容易地发现配置错误或不兼容的插件，减少了运行时的错误。

🍎配置增强

`buildApp` 钩子构建入口统一

引入了 buildApp 钩子统一处理构建入口的钩子。

通过buildApp钩子可以在构建过程中插入自己的逻辑，控制构建过程中的各种操作，比如调整构建配置、优化插件、监控构建过程等，给了我们更多控制权限

好处：统一构建入口，高灵活性、高配置性，简化构建流程

javascript 复制代码

export default {
  builder: {
    buildApp: async (builder) => { /* 你的骚操作 */ }
  }
}

`vite.createServer()`

vite.createServer()可以利用它传递已解析的配置

能够帮助我们在创建 Vite 开发服务器实例时，传递一个已经解析过的最终配置对象，直接跳过让 Vite 在启动时自动解析配置这一步。

也就是我们可以在开发环境中更加灵活地控制 Vite 的配置，避免在不同生命周期中配置反复解析。

this.meta.viteVersion版本

暴露 **this.meta.viteVersion** 获取当前 Vite 版本，那是不是我们自己写的插件就可以用它来兼容以后不同的vite版本呢

插件也更加灵活了

🍎多框架合作

自动化测试Vitest深度集合

与测试工具Vitest 3.2+无缝集成，不用在构建与测试间反复了

那，是不是你不测试再也没有任何理由不学Vitest 3.2+了

Vite DevTools增强

在vite领域的广度进行扩充了

通过VoidZero与NuxtLabs合作开发

为所有基于Vite的项目和框架提供更深入的调试与分析功能

🍎保留Vite6实验性Environment API

上面的buildApp就是其中的一种

🍎废弃功能移除

移除了Sass的旧版API支持

移除了`splitVendorChunkPlugin`

采用vite7构建项目

接下来就使用22.16.0版本开始构建我们的vite7版本吧

整个构建变更一览

javascript 复制代码

Rolldown 用于构建（之前使用 Rollup）
Rolldown 用于 optimizer（之前使用 esbuild）
Rolldown 处理 CommonJS 支持（之前使用 @rollup/plugin-commonjs）
Oxc 用于语法降级（之前使用 esbuild）
Lightning CSS 默认用于 CSS 压缩（之前使用 esbuild）
Oxc minifier 默认用于 JS 压缩（之前使用 esbuild）
Rolldown 用于打包配置（之前使用 esbuild）

🍎创建项目

javascript 复制代码

yarn create vite NexusVuePro --template vue

// 使用vue-ts的模板进行创建（我采用的这个）
yarn create vite@latest NexusVuePro --template vue-ts

这个时候我们可以看到官方给我们的提示，vite已经采用的最新vite7.0了

大概4秒钟左右已经完成了

javascript 复制代码

//
success Installed "create-vite@7.0.1" with binaries:
      - create-vite
      - cva
Done in 4.46s.

看看我们的配置文件,ts版本的和js版本的有些依赖不同以外，其他没什么区别

javascript 复制代码

// 采用vue
{
  "name": "nexusvuepro",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.17"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.0",
    "vite": "^7.0.3"
  }
}


// 采用vue-ts
{
  "name": "nexusvuepro",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.17"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.0",
    "@vue/tsconfig": "^0.7.0",
    "typescript": "~5.8.3",
    "vite": "^7.0.3",
    "vue-tsc": "^2.2.12"
  }
}

🍎运行打包

运行打包一下，整个构建3秒多完成

javascript 复制代码

yarn 

yarn dev

yarn build
// Done in 3.96s.

🍎切换rolldown-vite打包测试

vue3 项目使用(开源-成功)

这里我们对比了vitepress，vue3项目还没来得及对比。

javascript 复制代码

"vite": "^7.0.3",
  
=> 直接替换成下面这个就行

"vite":"npm:rolldown-vite@latest",

// 替换以后
//第一次构建
Done in 3.71s.

//第一次打包构建
Done in 1.37s.

vitepress使用(博客-失败)

javascript 复制代码

// vitepress使用 
{
  "resolutions": {
    "vite": "npm:rolldown-vite@latest"
  }
}

// vitepress现在我的项目打包：
build complete in 43.57s.
Done in 44.12s.

//切换以后 
暂使用失败

替换以后报错如下

transformWithEsbuild在最新的vite7之中已经移除了

javascript 复制代码

build error:
Failed to load `transformWithEsbuild`. It is deprecated and it now requires esbuild to be installed separately. If you are a package author, please migrate to `transformWithOxc` instead.
Error: Failed to load `transformWithEsbuild`. It is deprecated and it now requires esbuild to be installed separately. If you are a package author, please migrate to `transformWithOxc` instead.
    at transformWithEsbuild (file:///D:/LTB-2025/note/nexusnote/node_modules/vite/dist/node/chunks/dep-R2BQz-iD.js:4132:9)
    at async file:///D:/LTB-2025/note/nexusnote/node_modules/vitepress/dist/node/chunk-Zsoi3j4v.js:49524:24
    at async Promise.all (index 1)
    at async renderHead (file:///D:/LTB-2025/note/nexusnote/node_modules/vitepress/dist/node/chunk-Zsoi3j4v.js:49519:16)
    at async renderPage (file:///D:/LTB-2025/note/nexusnote/node_modules/vitepress/dist/node/chunk-Zsoi3j4v.js:49475:7)
    at async pMap.concurrency (file:///D:/LTB-2025/note/nexusnote/node_modules/vitepress/dist/node/chunk-Zsoi3j4v.js:49624:11)
    at async file:///D:/LTB-2025/note/nexusnote/node_modules/vitepress/dist/node/chunk-Zsoi3j4v.js:4505:20
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

transformWithEsbuild作用

使用 esbuild 进行自定义的代码转换

javascript 复制代码

// VITE6 旧的写法 

import { transformWithEsbuild } from 'vite';

transformWithEsbuild(code, 'myfile.js', { loader: 'js' }).then(transformedCode => {
  console.log(transformedCode);
});

这里也不建议朋友们使用，暂时等等吧。也可能我失败是别的原因，有成功的也可以留言或者艾特我啊！！

vite7.0更新赶紧学起来，Rolldown用起来，更新速览