大家好，我是农村程序员，独立开发者，编程记者，前端之虎陈随易。

我会在这里分享代码技术，编程资讯，行业热点等内容，欢迎关注。

• 个人网站 1️⃣：https://chensuiyi.me
• 个人网站 2️⃣：https://me.yicode.tech
• 技术群，搞钱群，闲聊群，自驾群，想入群的在我个人网站联系我。

如果你觉得本文有用，一键三连 (点赞、评论、转发)，就是对我最大的支持~

---

本文可随意转发或转载，保留署名信息即可。

大家好，我是编程记者，前端之虎陈随易，据最新消息，前端构建工具 Vite v7.0 已正式发布。

很难想象，从 vite 宣布开发到现在成为大多数前端知名项目的脚手架，已经过去了5年时间，也很令人惊叹，仅仅5年时间，Vite 已经成为尤大继 Vue 之后的又一影响全球前端开发者的利器，为这些在背后创造，贡献，维护的同行们致敬。

通过 https://vite.new，我们可以非常方便地体验 Vite 项目构建的流程和体验。

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

点击查看 rolldown-vite 使用说明

下面分享本次更新的主要内容：

更新文章访问地址：https://vite.dev/blog/announcing-vite7.html

Node.js 支持版本提升

Vite 现在需要 Node.js 20.19+、22.12+ 版本。

由于 Node.js 18 将于 2025 年 4 月底达到 EOL 级别，Vite 已将其弃用。

浏览器支持版本提升

在 Vite 7 中，默认浏览器目标将从 modules 更改为新的默认值：baseline-widely-available。

build.target 默认浏览器值在 Vite 7.0 中有所变化：

• Chrome 87 → 107
• Edge 88 → 107
• Firefox 78 → 104
• Safari 14.0 → 16.0

Vitest 支持

从 Vitest 3.2，默认提供对 Vite 7 的支持。

增加 buildApp 钩子

在 Vite 7 中，添加了一个新的 buildApp 钩子，允许插件协调环境的构建。

用法如下：

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

移除 scss 的 api 选项

css.preprocessorOptions.{sass,scss}.api 被移除了，统一使用 modern-compiler。

推荐安装 sass-embedded，而不是 sass，最主要区别如下：

特性	sass-embedded	sass
编译器引擎	Dart Sass	JavaScript
性能	更快	较慢
内存使用	更低	较高
功能完整性	完整	基本功能
启动时间	稍慢（需要启动进程）	快
平台支持	需要二进制文件	纯 JavaScript

移除代码分割插件

splitVendorChunkPlugin 已经在 Vite 7 中移除，如果我们要使用代码分块，请使用 build.rollupOptions 参数设置 output.manualChunks，如下所示：

function manualChunks(id, { getModuleInfo }) {
    const match = /.*\.strings\.(\w+)\.js/.exec(id);
    if (match) {
        const language = match[1]; // e.g. "en"
        const dependentEntryPoints = [];

        // 我们在这里使用 Set 集合，这样每个模块最多处理一次。
        // 这可以防止循环依赖情况下的无限循环
        const idsToHandle = new Set(getModuleInfo(id).dynamicImporters);

        for (const moduleId of idsToHandle) {
            const { isEntry, dynamicImporters, importers } = getModuleInfo(moduleId);
            if (isEntry || dynamicImporters.length > 0) dependentEntryPoints.push(moduleId);

            // Set 迭代器足够智能，可以迭代迭代过程中添加的元素
            for (const importerId of importers) idsToHandle.add(importerId);
        }

        // 如果有唯一条目，我们会根据条目名称将其放入一个块中
        if (dependentEntryPoints.length === 1) {
            return `${dependentEntryPoints[0].split('/').slice(-1)[0].split('.')[0]}.strings.${language}`;
        }
        // 对于多个条目，我们将其放入“共享”块中
        if (dependentEntryPoints.length > 1) {
            return `shared.strings.${language}`;
        }
    }
}

这就是本次 Vite 7 更新的主要内容，更详细的更新内容请 👉 点此了解。