diff --git a/.vitepress/config.ts b/.vitepress/config.ts index a5b0b2c9..422c1b40 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -286,10 +286,6 @@ export default defineConfig({ text: '性能', link: '/guide/performance' }, - { - text: 'Rolldown', - link: '/guide/rolldown' - }, { text: `Migration from v${viteMajorVersion - 1}`, link: '/guide/migration' diff --git a/blog/announcing-vite8-beta.md b/blog/announcing-vite8-beta.md new file mode 100644 index 00000000..57172287 --- /dev/null +++ b/blog/announcing-vite8-beta.md @@ -0,0 +1,163 @@ +--- +title: 'Vite 8 Beta: The Rolldown-powered Vite' +author: + name: The Vite Team +date: 2025-12-03 +sidebar: false +head: + - - meta + - property: og:type + content: website + - - meta + - property: og:title + content: Announcing Vite 8 Beta + - - meta + - property: og:image + content: https://vite.dev/og-image-announcing-vite8-beta.webp + - - meta + - property: og:url + content: https://vite.dev/blog/announcing-vite8-beta + - - meta + - property: og:description + content: Vite 8 Beta Release Announcement + - - meta + - name: twitter:card + content: summary_large_image +--- + +# Vite 8 Beta:由 Rolldown 驱动的 Vite {#vite-8-beta} + +_2025年12月3日_ + +![Vite 8 Beta Announcement Cover Image](/og-image-announcing-vite8-beta.webp) + +摘要:由 [Rolldown](https://rolldown.rs/) 驱动的 Vite 8 首个测试版现已发布。Vite 8 提供了显著更快的生产构建速度,并开启了未来的改进可能性。你可以通过将 `vite` 升级到 `8.0.0-beta.0` 版本并阅读[迁移指南](/guide/migration)来试用这个新版本。 + +--- + +我们很高兴发布 Vite 8 的首个测试版。这个版本统一了底层工具链,带来了更好的一致性行为,以及显著的构建性能提升。Vite 现在使用 [Rolldown](https://rolldown.rs/) 作为其打包器,取代了之前 esbuild 和 Rollup 的组合。 + +## 面向 Web 的全新打包器 {#a-new-bundler-for-the-web} + +Vite 之前依赖两个打包器来满足开发和生产构建的不同需求: + +1. 开发期间使用 esbuild 进行快速编译 +2. 生产构建使用 Rollup 进行打包、分块和优化 + +这种方法让 Vite 能够专注于开发者体验和协调,而无需重新发明解析和打包功能。然而,维护两个独立的打包流水线引入了不一致性:独立的转换流水线、不同的插件系统,以及越来越多的粘合代码来保持开发和生产之间打包行为的一致性。 + +为了解决这个问题,[VoidZero 团队](https://voidzero.dev) 构建了 **Rolldown**,这是一个下一代打包器,目标是在 Vite 中使用。它的设计特点包括: + +- **性能**:Rolldown 使用 Rust 编写,以原生速度运行。它的性能水平与 esbuild 相匹配,并且比 Rollup [快 10-30 倍](https://github.com/rolldown/benchmarks)。 +- **兼容性**:Rolldown 支持与 Rollup 和 Vite 相同的插件 API。大多数 Vite 插件在 Vite 8 中可以开箱即用。 +- **更多功能**:Rolldown 为 Vite 解锁了更多高级功能,包括完整打包模式、更灵活的分块控制、模块级持久缓存、模块联邦等。 + +## 统一工具链 {#unifying-the-toolchain} + +Vite 打包器更换的影响超越了性能范畴。打包器利用解析器、解析器、转换器和压缩器。Rolldown 为此目的使用了由 VoidZero 团队主导的另一个项目 Oxc。 + +**这使得 Vite 成为由同一团队维护的端到端工具链的入口:构建工具(Vite)、打包器(Rolldown)和编译器(Oxc)。** + +这种一致性确保了整个堆栈中的行为一致性,并且随着 JavaScript 的不断发展,使我们能够快速采用并与新的语言规范保持一致。这也解锁了以前仅凭 Vite 无法实现的广泛改进。例如,我们可以利用 Oxc 的语义分析在 Rolldown 中实现更好的 tree-shaking。 + +## Vite 如何迁移到 Rolldown {#how-vite-migrated-to-rolldown} + +迁移到由 Rolldown 驱动的 Vite 是一项基础性变革。因此,我们的团队采取了深思熟虑的步骤来实施这一变革,同时不牺牲稳定性和生态系统兼容性。 + +首先,我们发布了独立的 `rolldown-vite` 包作为[技术预览版](https://voidzero.dev/posts/announcing-rolldown-vite)。这让我们能够在不影响 Vite 稳定版本的情况下与早期采用者合作。早期采用者从 Rolldown 的性能提升中受益,同时提供了宝贵的反馈。亮点包括: + +- Linear 的生产构建时间从 46 秒减少到 6 秒 +- Mercedes-Benz.io 将构建时间减少了高达 38% +- Beehiiv 将构建时间减少了 64% + +接下来,我们建立了一套测试套件,用于验证关键的 Vite 插件与 `rolldown-vite` 的兼容性。这项 CI 任务帮助我们及早发现回归问题和兼容性问题,特别是对于 SvelteKit、react-router 和 Storybook 等框架和元框架。 + +最后,我们构建了一个兼容层,帮助开发者从 Rollup 和 esbuild 选项迁移到相应的 Rolldown 选项。 + +因此,每个人都能顺利迁移到 Vite 8。 + +## 迁移到 Vite 8 Beta {#migrating-to-vite-8-beta} + +由于 Vite 8 涉及核心构建行为,我们专注于保持配置 API 和插件钩子不变。我们创建了[迁移指南](/guide/migration)来帮助您升级。 + +有两种可用的升级路径: + +1. **直接升级**:更新 `package.json` 并运行常规的开发和构建命令。 +2. **渐进式迁移**:从 Vite 7 迁移到 `rolldown-vite` 包,然后再到 Vite 8。这样您可以识别出与 Rolldown 相关的不兼容性或问题,而不会对 Vite 造成其他更改。(推荐用于较大或复杂的项目) + +> [!IMPORTANT] +> 如果你依赖特定的 Rollup 或 esbuild 选项,你可能需要对 Vite 配置进行一些调整。请参考[迁移指南](/guide/migration)获取详细的说明和示例。 +> 与所有非稳定的主版本一样,升级后建议进行全面测试以确保一切按预期工作。请务必报告任何[问题](https://github.com/vitejs/rolldown-vite/issues)。 + +如果你使用的框架或工具将 Vite 作为依赖项,例如 Astro、Nuxt 或 Vitest,你必须在 `package.json` 中覆盖 `vite` 依赖项,这根据你使用的包管理器略有不同: + +:::code-group + +```json [npm] +{ + "overrides": { + "vite": "8.0.0-beta.0" + } +} +``` + +```json [Yarn] +{ + "resolutions": { + "vite": "8.0.0-beta.0" + } +} +``` + +```json [pnpm] +{ + "pnpm": { + "overrides": { + "vite": "8.0.0-beta.0" + } + } +} +``` + +```json [Bun] +{ + "overrides": { + "vite": "8.0.0-beta.0" + } +} +``` + +::: + +添加这些覆盖后,重新安装你的依赖项,然后像往常一样启动开发服务器或构建你的项目。 + +## Vite 8 的附加功能 {#additional-features-in-vite-8} + +除了搭载 Rolldown 之外,Vite 8 还带来了以下功能: + +- **内置 tsconfig `paths` 支持**:开发者可以通过将 [`resolve.tsconfigPaths`](/config/shared-options.md#resolve-tsconfigpaths) 设置为 `true` 来启用此功能。此功能会带来轻微的性能成本,默认情况下未启用。 +- **`emitDecoratorMetadata` 支持**:Vite 8 现在内置了对 TypeScript [`emitDecoratorMetadata` 选项](https://www.typescriptlang.org/tsconfig/#emitDecoratorMetadata)的自动支持。更多详情请参见[功能](/guide/features.md#emitdecoratormetadata)页面。 + +## 展望未来 {#looking-ahead} + +速度一直是 Vite 的标志性特性。与 Rolldown 的集成,以及延伸至 Oxc,意味着 JavaScript 开发者可以从 Rust 的速度中获益。升级到 Vite 8 应该会仅仅因为使用 Rust 而带来性能提升。 + +我们也即将推出 Vite 的完整打包模式,这将大幅提高大型项目的开发服务器速度。初步结果显示,开发服务器启动速度快了 3 倍,完全重新加载快了 40%,网络请求减少了 10 倍。 + +另一个标志性的 Vite 特性是插件生态系统。我们希望 JavaScript 开发者能够继续使用他们熟悉的 JavaScript 语言来扩展和定制 Vite,同时从 Rust 的性能提升中受益。我们的团队正在与 VoidZero 团队合作,以加速这些基于 Rust 系统中的 JavaScript 插件使用。 + +目前正在试验的即将到来的优化包括: + +- [**原始 AST 传输**](https://github.com/oxc-project/oxc/issues/2409)。允许 JavaScript 插件以最小的开销访问 Rust 生成的 AST。 +- [**原生 MagicString 转换**](https://rolldown.rs/in-depth/native-magic-string#native-magicstring)。简单的自定义转换,逻辑在 JavaScript 中但计算在 Rust 中进行。 + +## **联系我们** {#connect-with-us} + +如果你已经尝试过 Vite 8 测试版,我们很希望听到你的反馈!请报告任何问题或分享你的使用体验: + +- **Discord**:加入我们的[社区服务器](https://chat.vite.dev/)进行实时讨论 +- **GitHub**:在 [GitHub 讨论区](https://github.com/vitejs/vite/discussions)分享反馈 +- **问题报告**:在 [rolldown-vite 仓库](https://github.com/vitejs/rolldown-vite/issues)报告 bug 和回归问题 +- **成果分享**:在 [rolldown-vite-perf-wins 仓库](https://github.com/vitejs/rolldown-vite-perf-wins)分享你改善的构建时间 + +我们感谢所有的报告和复现案例。它们帮助我们朝着发布稳定版 8.0.0 的目标前进。 diff --git a/config/build-options.md b/config/build-options.md index ff87de44..88f8bc6c 100644 --- a/config/build-options.md +++ b/config/build-options.md @@ -8,13 +8,13 @@ - **默认:** `'baseline-widely-available'` - **相关内容:** [浏览器兼容性](/guide/build#browser-compatibility) -最终软件包的浏览器兼容性目标。默认值是 Vite 的一个特殊值 `'baseline-widely-available'`,该值针对的是包含在 2025 年 5 月 1 日广泛可用的 [Baseline](https://web-platform-dx.github.io/web-features/) 中的浏览器。具体来说,它是 `['chrome107', 'edge107', 'firefox104', 'safari16']`。 +最终软件包的浏览器兼容性目标。默认值是 Vite 的一个特殊值 `'baseline-widely-available'`,该值针对的是包含在 2026 年 1 月 1 日广泛可用的 [Baseline](https://web-platform-dx.github.io/web-features/) 中的浏览器。具体来说,它是 `['chrome111', 'edge111', 'firefox114', 'safari16.4']`。 另一个特殊值是 `'esnext'` —— 即假设有原生动态导入支持,并只执行最低限度的转译。 -转换过程将会由 esbuild 执行,并且此值应该是一个合法的 [esbuild 目标选项](https://esbuild.github.io/api/#target)。自定义目标也可以是一个 ES 版本(例如:`es2015`)、一个浏览器版本(例如:`chrome58`)或是多个目标组成的一个数组。 +转换过程将会由 Oxc Transformer 执行,并且此值应该是一个合法的 [Oxc Transformer 目标选项](https://oxc.rs/docs/guide/usage/transformer/lowering#target)。自定义目标也可以是一个 ES 版本(例如:`es2015`)、一个浏览器版本(例如:`chrome58`)或是多个目标组成的一个数组。 -注意:如果代码包含不能被 `esbuild` 安全地编译的特性,那么构建将会失败。查看 [esbuild 文档](https://esbuild.github.io/content-types/#javascript) 获取更多细节。 +注意:如果代码包含不能被 `Oxc` 安全地编译的特性,那么构建将会输出警告。查看 [Oxc 文档](https://oxc.rs/docs/guide/usage/transformer/lowering#warnings) 获取更多细节。 ## build.modulePreload {#build-modulepreload} @@ -129,10 +129,16 @@ Git LFS 占位符会自动排除在内联之外,因为它们不包含其所表 ## build.cssMinify {#build-cssminify} -- **类型:** `boolean | 'esbuild' | 'lightningcss'` -- **默认:** 对于客户端,与 [`build.minify`](#build-minify) 相同;对于 SSR,为 `'esbuild'` +- **类型:** `boolean | 'lightningcss' | 'esbuild'` +- **默认:** 对于客户端,与 [`build.minify`](#build-minify) 相同;对于 SSR,为 `'lightningcss'` -此选项允许用户覆盖 CSS 最小化压缩的配置,而不是使用默认的 `build.minify`,这样你就可以单独配置 JS 和 CSS 的最小化压缩方式。Vite 默认使用 `esbuild` 来最小化 CSS。将此选项设置为 `'lightningcss'` 可以改用 [Lightning CSS](https://lightningcss.dev/minification.html) 进行压缩。设置为该项,便可以使用 [`css.lightningcss`](./shared-options.md#css-lightningcss) 选项来进行配置。 +此选项允许用户覆盖 CSS 最小化压缩的配置,而不是使用默认的 `build.minify`,这样你就可以单独配置 JS 和 CSS 的最小压缩方式。Vite 默认使用 [Lightning CSS](https://lightningcss.dev/minification.html) 来压缩 CSS。可以通过 [`css.lightningcss`](./shared-options.md#css-lightningcss) 进行配置。将此选项设置为 `'esbuild'` 可以改用 esbuild 进行压缩。 + +当设置为 `'esbuild'` 时,必须安装 esbuild。 + +```sh +npm add -D esbuild +``` ## build.sourcemap {#build-sourcemap} @@ -141,17 +147,20 @@ Git LFS 占位符会自动排除在内联之外,因为它们不包含其所表 构建后是否生成 source map 文件。如果为 `true`,将会创建一个独立的 source map 文件。如果为 `'inline'`,source map 将作为一个 data URI 附加在输出文件中。`'hidden'` 的工作原理与 `true` 相似,只是 bundle 文件中相应的注释将不被保留。 -## build.rollupOptions {#build-rollupoptions} +## build.rolldownOptions {#build-rolldownoptions} -- **类型:** [`RollupOptions`](https://cn.rollupjs.org/configuration-options/) +- **类型:** [`RolldownOptions`](https://rollupjs.org/configuration-options/) -自定义底层的 Rollup 打包配置。这与从 Rollup 配置文件导出的选项相同,并将与 Vite 的内部 Rollup 选项合并。查看 [Rollup 选项文档](https://cn.rollupjs.org/configuration-options/) 获取更多细节。 + -## build.commonjsOptions {#build-commonjsoptions} +自定义底层的 Rolldown 打包配置。这与从 Rolldown 配置文件导出的选项相同,并将与 Vite 的内部 Rolldown 选项合并。查看 [Rolldown 选项文档](https://cn.rollupjs.org/configuration-options/) 获取更多细节。 -- **类型:** [`RollupCommonJSOptions`](https://github.com/rollup/plugins/tree/master/packages/commonjs#options) +## build.rollupOptions {#build-rollupoptions} + +- **类型:** `RolldownOptions` +- **已弃用** -传递给 [@rollup/plugin-commonjs](https://github.com/rollup/plugins/tree/master/packages/commonjs) 插件的选项。 +此选项是 `build.rolldownOptions` 选项的别名。请使用 `build.rolldownOptions` 选项代替。 ## build.dynamicImportVarsOptions {#build-dynamicimportvarsoptions} @@ -160,6 +169,8 @@ Git LFS 占位符会自动排除在内联之外,因为它们不包含其所表 传递给 [@rollup/plugin-dynamic-import-vars](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars) 的选项。 + + ## build.lib {#build-lib} - **类型:** `{ entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string), cssFileName?: string }` @@ -256,16 +267,19 @@ export default defineConfig({ ## build.minify {#build-minify} -- **类型:** `boolean | 'terser' | 'esbuild'` -- **默认:** 客户端构建默认为`'esbuild'`,SSR构建默认为 `false` +- **类型:** `boolean | 'oxc' | 'terser' | 'esbuild'` +- **默认:** 客户端构建默认为`'oxc'`,SSR构建默认为 `false` -设置为 `false` 可以禁用最小化混淆,或是用来指定使用哪种混淆器。默认为 [Esbuild](https://github.com/evanw/esbuild),它比 terser 快 20-40 倍,压缩率只差 1%-2%。[Benchmarks](https://github.com/privatenumber/minification-benchmarks) +设置为 `false` 可以禁用最小化混淆,或是用来指定使用哪种混淆器。默认使用 [Oxc Minifier](https://oxc.rs/docs/guide/usage/minifier),它比 terser 快 30~90 倍,但压缩率仅差 0.5~2%。[基准测试](https://github.com/privatenumber/minification-benchmarks) + +`build.minify: 'esbuild'` 已弃用,将在未来版本中移除。 注意,在 lib 模式下使用 `'es'` 时,`build.minify` 选项不会缩减空格,因为会移除掉 pure 标注,导致破坏 tree-shaking。 -当设置为 `'terser'` 时必须先安装 Terser。 +当设置为 `'esbuild'` 或 `'terser'` 时,必须分别安装 esbuild 或 Terser。 ```sh +npm add -D esbuild npm add -D terser ``` @@ -314,7 +328,9 @@ npm add -D terser ## build.watch {#build-watch} -- **类型:** [`WatcherOptions`](https://cn.rollupjs.org/configuration-options/#watch)`| null` + + +- **类型:** [`WatcherOptions`](https://rollupjs.org/configuration-options/#watch)`| null` - **默认:** `null` 设置为 `{}` 则会启用 rollup 的监听器。对于只在构建阶段或者集成流程使用的插件很常用。 diff --git a/config/dep-optimization-options.md b/config/dep-optimization-options.md index 221f09af..deca92ec 100644 --- a/config/dep-optimization-options.md +++ b/config/dep-optimization-options.md @@ -51,6 +51,23 @@ export default defineConfig({ }) ``` +## optimizeDeps.rolldownOptions {#optimizedeps-rolldownoptions} + +- **类型:** [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<``RolldownOptions`, `'input' | 'logLevel' | 'output'> & { + output?: [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<` + `RolldownOutputOptions`, + `'format' | 'sourcemap' | 'dir' | 'banner'>` +`}` + + + + +在依赖扫描和优化过程中传递给 Rolldown 的选项。 + +某些选项进行了省略,因为修改它们与 Vite 的优化方案并不兼容。 + +- `plugins` 与 Vite 的 dep 插件合并 + ## optimizeDeps.esbuildOptions {#optimizedeps-esbuildoptions} - **类型:** [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<`[`EsbuildBuildOptions`](https://esbuild.github.io/api/#general-options)`, @@ -64,13 +81,9 @@ export default defineConfig({ | 'outbase' | 'outExtension' | 'metafile'>` +- **已弃用** -在依赖扫描和优化过程中传递给 esbuild 的选项。 - -某些选项进行了省略,因为修改它们与 Vite 的优化方案并不兼容。 - -- 忽略了 `external` 选项,请使用 Vite 的 `optimizeDeps.exclude` 选项 -- `plugins` 与 Vite 的 dep 插件合并 +此选项在内部被转换为 `optimizeDeps.rolldownOptions`。请使用 `optimizeDeps.rolldownOptions` 代替。 ## optimizeDeps.force {#optimizedeps-force} diff --git a/config/index.md b/config/index.md index 4266bf2d..77573552 100644 --- a/config/index.md +++ b/config/index.md @@ -23,7 +23,7 @@ vite --config my-config.js ``` ::: tip 加载配置文件 -默认情况下,Vite 使用 `esbuild` 将配置文件打包到临时文件中并加载它。这可能会在 monorepo 中导入 TypeScript 文件时引发问题。如果你遇到了这种方法问题,可以通过指定 `--configLoader runner` 以改用 [module runner](/guide/api-environment-runtimes.html#modulerunner),它不会创建临时配置并将动态转换任何文件。请注意,module runner 不支持配置文件中的 CJS,但外部 CJS 包应该可以正常工作。 +默认情况下,Vite 使用 [Rolldown](https://rolldown.rs/) 将配置文件打包到临时文件中并加载它。这可能会在 monorepo 中导入 TypeScript 文件时引发问题。如果你遇到了这种方法问题,可以通过指定 `--configLoader runner` 以改用 [module runner](/guide/api-environment-runtimes.html#modulerunner),它不会创建临时配置并将动态转换任何文件。请注意,module runner 不支持配置文件中的 CJS,但外部 CJS 包应该可以正常工作。 另外,如果你正在使用支持TypeScript的环境(例如 `node --experimental-strip-types`),或者只编写纯 JavaScript 代码,你可以指定 `--configLoader native` 以使用环境的本机运行时加载配置文件。请注意,配置文件导入的模块的更新不会被检测到,因此不会自动重启 Vite 服务器。 ::: diff --git a/config/shared-options.md b/config/shared-options.md index 5133062d..9554a29a 100644 --- a/config/shared-options.md +++ b/config/shared-options.md @@ -40,7 +40,7 @@ 定义全局常量替换方式。其中每项在开发环境下会被定义在全局,而在构建时被静态替换。 -Vite 使用 [esbuild define](https://esbuild.github.io/api/#define) 来进行替换,因此值的表达式必须是一个包含 JSON 可序列化值(null、boolean、number、string、array 或 object)或单一标识符的字符串。对于非字符串值,Vite 将自动使用 `JSON.stringify` 将其转换为字符串。 +Vite 使用 [Oxc's define feature](https://oxc.rs/docs/guide/usage/transformer/global-variable-replacement#define) 来进行替换,因此值的表达式必须是一个包含 JSON 可序列化值(null、boolean、number、string、array 或 object)或单一标识符的字符串。对于非字符串值,Vite 将自动使用 `JSON.stringify` 将其转换为字符串。 **示例:** @@ -96,6 +96,8 @@ declare const __APP_VERSION__: string 将会被传递到 `@rollup/plugin-alias` 作为 [entries 的选项](https://github.com/rollup/plugins/tree/master/packages/alias#entries)。也可以是一个对象,或一个 `{ find, replacement, customResolver }` 的数组。 + + 当使用文件系统路径的别名时,请始终使用绝对路径。相对路径的别名值会原封不动地被使用,因此无法被正常解析。 更高级的自定义解析方法可以通过 [插件](/guide/api-plugin) 实现。 @@ -164,6 +166,13 @@ declare const __APP_VERSION__: string - **相关:** [esbuild#preserve-symlinks](https://esbuild.github.io/api/#preserve-symlinks),[webpack#resolve.symlinks ](https://webpack.js.org/configuration/resolve/#resolvesymlinks) +## resolve.tsconfigPaths + +- **类型:** `boolean` +- **默认:** `false` + +启用 tsconfig 路径解析功能。[tsconfig.json](file:///Users/liuxin/Project/开源/vite-docs-cn/tsconfig.json) 中的 `paths` 选项将用于解析导入。更多详情请参见[功能](/guide/features.md#paths)。 + ## html.cspNonce - **类型:** `string` @@ -353,36 +362,44 @@ import type { 如果设置为 `'auto'`,只有当 [数据大于 10kB 时](https://v8.dev/blog/cost-of-javascript-2019#json:~:text=A%20good%20rule%20of%20thumb%20is%20to%20apply%20this%20technique%20for%20objects%20of%2010%20kB%20or%20larger),才会对数据进行字符串化处理。 -## esbuild {#esbuild} +## oxc {#oxc} -- **类型:** `ESBuildOptions | false` +- **类型:** `OxcOptions | false` -`ESBuildOptions` 继承自 [esbuild 转换选项](https://esbuild.github.io/api/#transform)。最常见的用例是自定义 JSX: +`OxcOptions` 继承自 [Oxc 转换选项](https://oxc.rs/docs/guide/usage/transformer)。最常见的用例是自定义 JSX: ```js export default defineConfig({ - esbuild: { - jsxFactory: 'h', - jsxFragment: 'Fragment', + oxc: { + jsx: { + runtime: 'classic', + pragma: 'h', + pragmaFrag: 'Fragment', + }, }, }) ``` -默认情况下,esbuild 会被应用在 `ts`、`jsx`、`tsx` 文件。你可以通过 `esbuild.include` 和 `esbuild.exclude` 对要处理的文件类型进行配置,这两个配置的值可以是一个正则表达式、一个 [picomatch](https://github.com/micromatch/picomatch#globbing-features) 模式,或是一个值为这两种类型的数组。 +默认情况下,Oxc转换 会被应用在 `ts`、`jsx`、`tsx` 文件。你可以通过 `oxc.include` 和 `oxc.exclude` 对要处理的文件类型进行配置,这两个配置的值可以是一个正则表达式、一个 [picomatch](https://github.com/micromatch/picomatch#globbing-features) 模式,或是一个值为这两种类型的数组。 -此外,你还可以通过 `esbuild.jsxInject` 来自动为每一个被 esbuild 转换的文件注入 JSX helper。 +此外,你还可以通过 `oxc.jsxInject` 来自动为每一个被 Oxc 转换的文件注入 JSX helper。 ```js export default defineConfig({ - esbuild: { + oxc: { jsxInject: `import React from 'react'`, }, }) ``` -当 [`build.minify`](./build-options.md#build-minify) 为 `true` 时,所有最小化的优化过程都会被默认应用,要禁用它的 [某些特定方面](https://esbuild.github.io/api/#minify),请设置 `esbuild.minifyIdentifiers`、`esbuild.minifySyntax` 或 `esbuild.minifyWhitespace` 三种选项其中任意一种为 `false`。注意 `esbuild.minify` 选项无法用于覆盖 `build.minify`。 +设置为 `false` 来禁用 Oxc 转换。 + +## esbuild {#esbuild} + +- **类型:** `ESBuildOptions | false` +- **已弃用** -设置为 `false` 来禁用 esbuild 转换。 +此选项在内部被转换为 `oxc` 选项。请使用 `oxc` 选项代替。 ## assetsInclude {#assetsinclude} diff --git a/config/worker-options.md b/config/worker-options.md index fe954b59..280038f8 100644 --- a/config/worker-options.md +++ b/config/worker-options.md @@ -18,6 +18,15 @@ worker 打包时的输出类型。 ## worker.rollupOptions -- **类型:** [`RollupOptions`](https://cn.rollupjs.org/configuration-options/) + + +- **类型:** [`RolldownOptions`](https://rollupjs.org/configuration-options/) 用于打包 worker 的 Rollup 配置项。 + +## worker.rollupOptions + +- **类型:** `RolldownOptions` +- **已弃用** + +此选项是 `worker.rolldownOptions` 选项的别名。请使用 `build.rolldownOptions` 选项代替。 diff --git a/guide/api-javascript.md b/guide/api-javascript.md index d3d0b185..6bda0e09 100644 --- a/guide/api-javascript.md +++ b/guide/api-javascript.md @@ -387,6 +387,21 @@ function normalizePath(id: string): string 规范化路径,以便在 Vite 插件之间互操作。 +## `transformWithOxc` + +**Type Signature:** + +```ts +async function transformWithOxc( + code: string, + filename: string, + options?: OxcTransformOptions, + inMap?: object, +): Promise & { warnings: string[] }> +``` + +使用 [Oxc Transformer](https://oxc.rs/docs/guide/usage/transformer) 转换 JavaScript 或 TypeScript 文件。对于希望与 Vite 内部的 Oxc Transformer 转换相匹配的插件非常有用。 + ## `transformWithEsbuild` **类型签名:** @@ -400,6 +415,8 @@ async function transformWithEsbuild( ): Promise ``` +**已弃用:** 请使用 `transformWithOxc` 代替。 + 通过 esbuild 转换 JavaScript 或 TypeScript 文件。对于更想要匹配 Vite 内部 esbuild 转换的插件很有用。 ## `loadConfigFromFile` diff --git a/guide/api-plugin.md b/guide/api-plugin.md index ced3f45a..ba34bfaf 100644 --- a/guide/api-plugin.md +++ b/guide/api-plugin.md @@ -4,6 +4,8 @@ Vite 插件扩展了设计出色的 Rollup 接口,带有一些 Vite 独有的 **推荐在阅读下面的章节之前,首先阅读下 [Rollup 插件文档](https://cn.rollupjs.org/plugin-development/)** + + ## 致插件创作者 {#authoring-a-plugin} Vite 努力秉承开箱即用的原则,因此在创作一款新插件前,请确保已经阅读过 [Vite 的功能指南](/guide/features),避免重复劳作。同时还应查看社区是否存在可用插件,包括 [兼容 Rollup 的插件](https://github.com/rollup/awesome) 以及 [Vite 的专属插件](https://github.com/vitejs/awesome-vite#plugins)。 diff --git a/guide/build.md b/guide/build.md index 5d283c1e..9211ce72 100644 --- a/guide/build.md +++ b/guide/build.md @@ -8,10 +8,10 @@ -- Chrome >=107 -- Edge >=107 -- Firefox >=104 -- Safari >=16 +- Chrome >=111 +- Edge >=111 +- Firefox >=114 +- Safari >=16.4 你也可以通过 [`build.target` 配置项](/config/build-options.md#build-target) 指定构建目标,最低支持 `es2015`。如果设置较低的目标值,Vite 仍然需要这些最低的浏览器支持范围,因为它依赖于[原生的 ESM 动态导入](https://caniuse.com/es6-module-dynamic-import)和 [`import.meta`](https://caniuse.com/mdn-javascript_operators_import_meta): @@ -50,23 +50,25 @@ ## 自定义构建 {#customizing-the-build} -构建过程可以通过多种 [构建配置选项](/config/#build-options) 来自定义构建。具体来说,你可以通过 `build.rollupOptions` 直接调整底层的 [Rollup 选项](https://cn.rollupjs.org/configuration-options/): +构建过程可以通过多种 [构建配置选项](/config/#build-options) 来自定义构建。具体来说,你可以通过 `build.rolldownOptions` 直接调整底层的 [Rolldown 选项](https://cn.rollupjs.org/configuration-options/): + + ```js [vite.config.js] export default defineConfig({ build: { - rollupOptions: { - // https://cn.rollupjs.org/configuration-options/ + rolldownOptions: { + // https://rollupjs.org/configuration-options/ }, }, }) ``` -例如,你可以使用仅在构建期间应用的插件来指定多个 Rollup 输出。 +例如,你可以使用仅在构建期间应用的插件来指定多个 Rolldown 输出。 ## 产物分块策略 {#chunking-strategy} -你可以通过配置 `build.rollupOptions.output.manualChunks` 来自定义 chunk 分割策略(查看 [Rollup 相应文档](https://cn.rollupjs.org/configuration-options/#output-manualchunks))。如果你使用的是一个框架,那么请参考他们的文档来了解如何配置分割 chunk。 +你可以通过配置 `build.rolldownOptions.output.advancedChunks` 来自定义 chunk 分割策略(查看 [Rolldown 相应文档](https://rolldown.rs/in-depth/advanced-chunks))。如果你使用的是一个框架,那么请参考他们的文档来了解如何配置分割 chunk。 ## 处理加载报错 {#load-error-handling} @@ -84,6 +86,8 @@ window.addEventListener('vite:preloadError', (event) => { 你可以使用 `vite build --watch` 来启用 rollup 的监听器。或者,你可以直接通过 `build.watch` 调整底层的 [`WatcherOptions`](https://cn.rollupjs.org/configuration-options/#watch) 选项: + + ```js [vite.config.js] export default defineConfig({ build: { @@ -123,7 +127,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url)) export default defineConfig({ build: { - rollupOptions: { + rolldownOptions: { input: { main: resolve(__dirname, 'index.html'), nested: resolve(__dirname, 'nested/index.html'), @@ -135,7 +139,7 @@ export default defineConfig({ 如果你指定了另一个根目录,请记住,在解析输入路径时,`__dirname` 的值将仍然是 vite.config.js 文件所在的目录。因此,你需要把对应入口文件的 `root` 的路径添加到 `resolve` 的参数中。 -请注意,在 HTML 文件中,Vite 忽略了 `rollupOptions.input` 对象中给定的入口名称,而是在生成 dist 文件夹中的 HTML 资源文件时,使用了文件已解析的路径 ID。这确保了与开发服务器的工作方式保持一致的结构。 +请注意,在 HTML 文件中,Vite 忽略了 `rolldownOptions.input` 对象中给定的入口名称,而是在生成 dist 文件夹中的 HTML 资源文件时,使用了文件已解析的路径 ID。这确保了与开发服务器的工作方式保持一致的结构。 ## 库模式 {#library-mode} @@ -160,7 +164,7 @@ export default defineConfig({ // 将添加适当的扩展名后缀 fileName: 'my-lib', }, - rollupOptions: { + rolldownOptions: { // 确保外部化处理那些 // 你不想打包进库的依赖 external: ['vue'], @@ -306,7 +310,7 @@ dist/my-lib.umd.cjs 0.30 kB / gzip: 0.16 kB ::: ::: warning 进阶用法 -库模式包括了一种简单而又有见地的配置,适用于面向浏览器和 JS 框架的库。如果你正在构建非面向浏览器的库,或需要高级构建流程,可以直接使用 [Rollup](https://cn.rollupjs.org) 或 [esbuild](https://esbuild.github.io)。 +库模式包括了一种简单而又有见地的配置,适用于面向浏览器和 JS 框架的库。如果你正在构建非面向浏览器的库,或需要高级构建流程,可以直接使用 [tsdown](https://tsdown.dev/) 或 [Rolldown](https://rolldown.rs/)。 ::: ## 进阶基础路径选项 {#advanced-base-options} diff --git a/guide/cli.md b/guide/cli.md index 097977b4..b987156e 100644 --- a/guide/cli.md +++ b/guide/cli.md @@ -26,7 +26,7 @@ vite [root] | `--base ` | 公共基础路径(默认为:`/`)(`string`) | | `-l, --logLevel ` | info \| warn \| error \| silent (`string`) | | `--clearScreen` | 允许或禁用打印日志时清除屏幕 (`boolean`) | -| `--configLoader ` | 使用 `bundle` 来采用 esbuild 打包配置,或是 `runner`(实验性)来在运行时处理,默认是 `bundle` | +| `--configLoader ` | 使用 `bundle` 来采用 Rolldown 打包配置,或是 `runner`(实验性)来在运行时处理,默认是 `bundle` | | `--profile` | 启动内置的 Node.js 调试器(查看 [性能瓶颈](/guide/troubleshooting#performance-bottlenecks)) | | `-d, --debug [feat]` | 显示调试日志 (`string \| boolean`) | | `-f, --filter ` | 过滤调试日志 (`string`) | @@ -65,7 +65,7 @@ vite build [root] | `--base ` | 公共基础路径(默认为:`/`)(`string`) | | `-l, --logLevel ` | Info \| warn \| error \| silent (`string`) | | `--clearScreen` | 允许或禁用打印日志时清除屏幕 (`boolean`) | -| `--configLoader ` | 使用 `bundle` 来采用 esbuild 打包配置,或是 `runner`(实验性)来在运行时处理,或者使用原生运行时加载 `native`(实验性),默认是 `bundle` | +| `--configLoader ` | 使用 `bundle` 来采用 Rolldown 打包配置,或是 `runner`(实验性)来在运行时处理,或者使用原生运行时加载 `native`(实验性),默认是 `bundle` | | `--profile` | 启动内置的 Node.js 调试器(查看 [性能瓶颈](/guide/troubleshooting#performance-bottlenecks)) | | `-d, --debug [feat]` | 显示调试日志 (`string \| boolean`) | | `-f, --filter ` | 过滤调试日志 (`string`) | @@ -96,7 +96,7 @@ vite optimize [root] | `--base ` | 公共基础路径(默认为:`/`)(`string`) | | `-l, --logLevel ` | Info \| warn \| error \| silent (`string`) | | `--clearScreen` | 允许或禁用打印日志时清除屏幕 (`boolean`) | -| `--configLoader ` | 使用 `bundle` 来采用 esbuild 打包配置,或是 `runner`(实验性)来在运行时处理,默认是 `bundle` | +| `--configLoader ` | 使用 `bundle` 来采用 Rolldown 打包配置,或是 `runner`(实验性)来在运行时处理,默认是 `bundle` | | `-d, --debug [feat]` | 显示调试日志 (`string \| boolean`) | | `-f, --filter ` | 过滤调试日志 (`string`) | | `-m, --mode ` | 设置环境模式 (`string`) | @@ -127,7 +127,7 @@ vite preview [root] | `--base ` | 公共基础路径(默认为:`/`)(`string`) | | `-l, --logLevel ` | Info \| warn \| error \| silent (`string`) | | `--clearScreen` | 允许或禁用打印日志时清除屏幕 (`boolean`) | -| `--configLoader ` | 使用 `bundle` 来采用 esbuild 打包配置,或是 `runner`(实验性)来在运行时处理,默认是 `bundle` | +| `--configLoader ` | 使用 `bundle` 来采用 Rolldown 打包配置,或是 `runner`(实验性)来在运行时处理,默认是 `bundle` | | `-d, --debug [feat]` | 显示调试日志 (`string \| boolean`) | | `-f, --filter ` | 过滤调试日志 (`string`) | | `-m, --mode ` | 设置环境模式 (`string`) | diff --git a/guide/dep-pre-bundling.md b/guide/dep-pre-bundling.md index 7d8e1985..bce80d89 100644 --- a/guide/dep-pre-bundling.md +++ b/guide/dep-pre-bundling.md @@ -22,12 +22,12 @@ 通过将 `lodash-es` 预构建成单个模块,现在我们只需要一个HTTP请求! ::: tip 注意 -依赖预构建仅适用于开发模式,并使用 `esbuild` 将依赖项转换为 ES 模块。在生产构建中,将使用 `@rollup/plugin-commonjs`。 +依赖预构建仅适用于开发模式。 ::: ## 自动依赖搜寻 {#automatic-dependency-discovery} -如果没有找到现有的缓存,Vite 会扫描您的源代码,并自动寻找引入的依赖项(即 "bare import",表示期望从 `node_modules` 中解析),并将这些依赖项作为预构建的入口点。预打包使用 `esbuild` 执行,因此通常速度非常快。 +如果没有找到现有的缓存,Vite 会扫描您的源代码,并自动寻找引入的依赖项(即 "bare import",表示期望从 `node_modules` 中解析),并将这些依赖项作为预构建的入口点。预打包使用 [Rolldown](https://rolldown.rs/) 执行,因此通常速度非常快。 在服务器已经启动后,如果遇到尚未在缓存中的新依赖项导入,则 Vite 将重新运行依赖项构建过程,并在需要时重新加载页面。 @@ -35,7 +35,7 @@ 在一个 monorepo 启动中,该仓库中的某个包可能会成为另一个包的依赖。Vite 会自动侦测没有从 `node_modules` 解析的依赖项,并将链接的依赖视为源码。它不会尝试打包被链接的依赖,而是会分析被链接依赖的依赖列表。 -然而,这需要被链接的依赖被导出为 ESM 格式。如果不是,那么你可以在配置里将此依赖添加到 [`optimizeDeps.include`](/config/dep-optimization-options.md#optimizedeps-include) 和 [`build.commonjsOptions.include`](/config/build-options.md#build-commonjsoptions) 这两项中。 +然而,这需要被链接的依赖被导出为 ESM 格式。如果不是,那么你可以在配置里将此依赖添加到 [`optimizeDeps.include`](/config/dep-optimization-options.md#optimizedeps-include) 中。 ```js twoslash [vite.config.js] import { defineConfig } from 'vite' @@ -44,11 +44,6 @@ export default defineConfig({ optimizeDeps: { include: ['linked-dep'], }, - build: { - commonjsOptions: { - include: [/linked-dep/, /node_modules/], - }, - }, }) ``` @@ -64,6 +59,8 @@ export default defineConfig({ 你可以通过 [`optimizeDeps.esbuildOptions` 选项](/config/dep-optimization-options.md#optimizedeps-esbuildoptions) 进一步自定义 esbuild。例如,添加一个 esbuild 插件来处理依赖项中的特殊文件,或者更改 [build `target`](https://esbuild.github.io/api/#target)。 + + ## 缓存 {#caching} ### 文件系统缓存 {#file-system-cache} diff --git a/guide/features.md b/guide/features.md index 4060fb83..0efc9e94 100644 --- a/guide/features.md +++ b/guide/features.md @@ -98,6 +98,20 @@ Vite 忽略 `tsconfig.json` 中的 `target` 值,遵循与 `esbuild` 相同的 因此,建议将 `target` 设置为 `ESNext` 或 `ES2022` 或更新版本,或者在配置 `tsconfig.json` 时将 `useDefineForClassFields` 显式设置为 `true`。 ::: +#### `emitDecoratorMetadata` {#emitDecoratorMetadata} + +- [TypeScript 文档](https://www.typescriptlang.org/tsconfig#emitDecoratorMetadata) + +此选项仅被部分支持。完全支持需要 TypeScript 编译器进行类型推断,而这是不受支持的。详情请参见 [Oxc Transformer 的文档](https://oxc.rs/docs/guide/usage/transformer/typescript#decorators)。 + +#### `paths` {#paths} + +- [TypeScript 文档](https://www.typescriptlang.org/tsconfig/#paths) + +可以指定 `resolve.tsconfigPaths: true` 来告诉 Vite 使用 [tsconfig.json](file:///Users/liuxin/Project/开源/vite-docs-cn/tsconfig.json) 中的 `paths` 选项来解析导入。 + +需要注意的是,这个功能会有性能损耗,并且 [TypeScript 团队不建议使用这个选项来改变外部工具的行为](https://www.typescriptlang.org/tsconfig/#paths:~:text=Note%20that%20this%20feature%20does%20not%20change%20how%20import%20paths%20are%20emitted%20by%20tsc%2C%20so%20paths%20should%20only%20be%20used%20to%20inform%20TypeScript%20that%20another%20tool%20has%20this%20mapping%20and%20will%20use%20it%20at%20runtime%20or%20when%20bundling.)。 + #### 影响构建结果的其他编译器选项 {#other-compiler-options-affecting-the-build-result} - [`extends`](https://www.typescriptlang.org/tsconfig#extends) @@ -109,7 +123,6 @@ Vite 忽略 `tsconfig.json` 中的 `target` 值,遵循与 `esbuild` 相同的 - [`jsxFragmentFactory`](https://www.typescriptlang.org/tsconfig#jsxFragmentFactory) - [`jsxImportSource`](https://www.typescriptlang.org/tsconfig#jsxImportSource) - [`experimentalDecorators`](https://www.typescriptlang.org/tsconfig#experimentalDecorators) -- [`alwaysStrict`](https://www.typescriptlang.org/tsconfig#alwaysStrict) ::: tip `skipLibCheck` Vite 启动模板默认情况下会设置 `"skipLibCheck": "true"`,以避免对依赖项进行类型检查,因为它们可能只支持特定版本和配置的 TypeScript。你可以在 [vuejs/vue-cli#5688](https://github.com/vuejs/vue-cli/pull/5688) 了解更多信息。 diff --git a/guide/index.md b/guide/index.md index c03e92b5..b20ae6e2 100644 --- a/guide/index.md +++ b/guide/index.md @@ -20,7 +20,7 @@ Vite 还提供了强大的扩展性,可通过其 [插件 API](./api-plugin) ## 浏览器支持 {#browser-support} -在开发过程中,Vite 假设使用的是现代浏览器。这意味着该浏览器支持大多数最新的 JavaScript 和 CSS 功能。因此,Vite 将 [`esnext` 设置为转换目标](https://esbuild.github.io/api/#target)。这可以防止语法降低,使 Vite 能够尽可能接近原始源代码提供模块。Vite 会注入一些运行时代码以使开发服务器正常工作。这些代码使用了 [Baseline](https://web-platform-dx.github.io/web-features/) 中包含的功能,该功能在每个主要版本发布时(此主要版本为 2025-05-01)新增。 +在开发过程中,Vite 假设使用的是现代浏览器。这意味着该浏览器支持大多数最新的 JavaScript 和 CSS 功能。因此,Vite 将 [`esnext` 设置为转换目标](https://esbuild.github.io/api/#target)。这可以防止语法降低,使 Vite 能够尽可能接近原始源代码提供模块。Vite 会注入一些运行时代码以使开发服务器正常工作。这些代码使用了 [Baseline](https://web-platform-dx.github.io/web-features/) 中包含的功能,该功能在每个主要版本发布时(此主要版本为 2026-01-01)新增。 对于生产环境构建,Vite 默认以 [Baseline](https://web-platform-dx.github.io/web-features/) 广泛可用的浏览器为目标平台。这些浏览器至少发布于两年半之前。您可以通过配置降低目标浏览器版本。此外,可以通过官方 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 支持旧版浏览器。更多详情,请参阅 [构建生产环境](./build) 部分。 diff --git a/guide/migration-from-v6.md b/guide/migration-from-v6.md new file mode 100644 index 00000000..da8ad761 --- /dev/null +++ b/guide/migration-from-v6.md @@ -0,0 +1,58 @@ +# 从 v6 迁移 {#migration-from-v6} + +## Node.js 支持 {#node-js-support} + +Vite 不再支持已结束生命周期(EOL)的 Node.js 18。现在需要使用 Node.js 20.19+ 或 22.12+。 + +## 浏览器兼容性目标变更 {#default-browser-target-change} + +`build.target` 的默认浏览器值已更新为较新的浏览器版本。 + +- Chrome 107 → 111 +- Edge 107 → 111 +- Firefox 104 → 114 +- Safari 16.0 → 16.4 + +这些浏览器版本符合 [Baseline](https://web-platform-dx.github.io/web-features/) 在 2025-05-01 时定义的“广泛可用”功能集标准。换句话说,它们的发布日期都在 2022-11-01 之前。 + +在 Vite 5 中,默认目标名为 `'modules'`,但现在该选项已不再可用。取而代之的是引入了一个新的默认目标 `'baseline-widely-available'`。 + +## 总体变化 {#general-changes} + +### 移除了 Sass 旧版 API 支持 {#removed-sass-legacy-api-support} + +如计划所述,Sass 旧版 API 的支持已被移除。Vite 现在仅支持现代 API。你可以移除 `css.preprocessorOptions.sass.api` 和 `css.preprocessorOptions.scss.api` 配置选项。 + +## 移除了已弃用的功能 {#removed-deprecated-features} + +- `splitVendorChunkPlugin`(在 v5.2.7 中弃用) + - 该插件最初是为了方便迁移到 Vite v2.9 而提供的。 + - 如有需要,可以使用 `build.rollupOptions.output.manualChunks` 选项来控制分块行为。 +- `transformIndexHtml` 的 hook 级别 `enforce` / `transform`(在 v4.0.0 中弃用) + - 此更改是为了与 [Rollup 的对象型 hooks](https://rollupjs.org/plugin-development/#build-hooks:~:text=Instead%20of%20a%20function%2C%20hooks%20can%20also%20be%20objects.) 接口保持一致。 + - 应使用 `order` 替代 `enforce`,使用 `handler` 替代 `transform`。 + +## 进阶 {#advanced} + +还有其他一些只影响少数用户的破坏性更改。 + +- [[#19979] chore: declare version range for peer dependencies](https://github.com/vitejs/vite/pull/19979) + - 为 CSS 预处理器指定了 peerDependencies 的版本范围。 +- [[#20013] refactor: remove no-op `legacy.proxySsrExternalModules`](https://github.com/vitejs/vite/pull/20013) + - `legacy.proxySsrExternalModules` 属性自 Vite 6 起已无实际作用,现已移除。 +- [[#19985] refactor!: remove deprecated no-op type only properties](https://github.com/vitejs/vite/pull/19985) + - 以下未使用的属性现已移除:`ModuleRunnerOptions.root`、`ViteDevServer._importGlobMap`、`ResolvePluginOptions.isFromTsImporter`、`ResolvePluginOptions.getDepsOptimizer`、`ResolvePluginOptions.shouldExternalize`、`ResolvePluginOptions.ssrConfig` +- [[#19986] refactor: remove deprecated env api properties](https://github.com/vitejs/vite/pull/19986) + - 这些属性从一开始就被标记为弃用,现已移除。 +- [[#19987] refactor!: remove deprecated `HotBroadcaster` related types](https://github.com/vitejs/vite/pull/19987) + - 这些类型是作为现已弃用的 Runtime API 的一部分引入的,现已被移除:`HMRBroadcaster`、`HMRBroadcasterClient`、`ServerHMRChannel`、`HMRChannel`。 +- [[#19996] fix(ssr)!: don't access `Object` variable in ssr transformed code](https://github.com/vitejs/vite/pull/19996) + - `__vite_ssr_exportName__` 现在是模块运行时上下文中的必需字段。 +- [[#20045] fix: treat all `optimizeDeps.entries` values as globs](https://github.com/vitejs/vite/pull/20045) + - `optimizeDeps.entries` 不再接收字面量字符串路径,而是始终接收 glob 模式。 +- [[#20222] feat: apply some middlewares before `configureServer` hook](https://github.com/vitejs/vite/pull/20222), [[#20224] feat: apply some middlewares before `configurePreviewServer` hook](https://github.com/vitejs/vite/pull/20224) + - 某些中间件现在会在 `configureServer` / `configurePreviewServer` 钩子之前被应用。请注意,如果你不希望某个路由应用 [`server.cors`](../config/server-options.md#server-cors) / [`preview.cors`](../config/preview-options.md#preview-cors) 配置,请务必从响应中移除相关的请求头。 + +## 从 v5 迁移 {#migration-from-v5} + +请先查阅 Vite v6 文档中的 [从 v5 迁移指南](https://v6.vite.dev/guide/migration.html)([中文版](/guide/migration-from-v5.md)),了解如何将你的应用迁移到 Vite 6 所需的变更,然后再继续执行本页中的相关更改。 diff --git a/guide/migration.md b/guide/migration.md index 7d72c7ab..dc65194a 100644 --- a/guide/migration.md +++ b/guide/migration.md @@ -1,58 +1,377 @@ -# 从 v6 迁移 {#migration-from-v6} +# 从 v7 迁移 {#migration-from-v7} -## Node.js 支持 {#node-js-support} +## 浏览器兼容性目标变更 {#default-browser-target-change} -Vite 不再支持已结束生命周期(EOL)的 Node.js 18。现在需要使用 Node.js 20.19+ 或 22.12+。 +`build.target` 和 `'baseline-widely-available'` 的默认浏览器值已更新为较新的浏览器版本: -## 浏览器兼容性目标变更 {#default-browser-target-change} +- Chrome 107 → 111 +- Edge 107 → 111 +- Firefox 104 → 114 +- Safari 16.0 → 16.4 -`build.target` 的默认浏览器值已更新为较新的浏览器版本。 +这些浏览器版本符合 [Baseline](https://web-platform-dx.github.io/web-features/) 在 2026-01-01 时定义的“广泛可用”功能集标准。换句话说,它们都是大约两年半前发布的。 -- Chrome 87 → 107 -- Edge 88 → 107 -- Firefox 78 → 104 -- Safari 14.0 → 16.0 +## Rolldown {#rolldown} -这些浏览器版本符合 [Baseline](https://web-platform-dx.github.io/web-features/) 在 2025-05-01 时定义的“广泛可用”功能集标准。换句话说,它们的发布日期都在 2022-11-01 之前。 +Vite 8 使用基于 Rolldown 和 Oxc 的工具,而不是 esbuild 和 Rollup。 -在 Vite 5 中,默认目标名为 `'modules'`,但现在该选项已不再可用。取而代之的是引入了一个新的默认目标 `'baseline-widely-available'`。 +### 渐进式迁移 {#gradual-migration} -## 总体变化 {#general-changes} +`rolldown-vite` 包实现了使用 Rolldown 的 Vite 7,但不包含其他 Vite 8 的变更。这可以作为迁移到 Vite 8 的中间步骤。请参阅 Vite 7 文档中的 [Rolldown 集成指南](https://v7.vite.dev/guide/rolldown) 了解如何从 Vite 7 切换到 `rolldown-vite`。 + +对于从 `rolldown-vite` 迁移到 Vite 8 的用户,你可以撤销 `package.json` 中的依赖变更并更新到 Vite 8: + +```json +{ + "dependencies": { + "vite": "npm:rolldown-vite@7.2.2" // [!code --] + "vite": "^8.0.0" // [!code ++] + } +} +``` + +### 依赖优化器现在使用 Rolldown {#dependency-optimizer-now-uses-rolldown} + +现在依赖优化使用 Rolldown 而不是 esbuild。Vite 仍然通过自动将 [`optimizeDeps.esbuildOptions`](/config/dep-optimization-options#optimizedeps-esbuildoptions) 转换为 [`optimizeDeps.rolldownOptions`](/config/dep-optimization-options#optimizedeps-rolldownoptions) 来支持向后兼容。`optimizeDeps.esbuildOptions` 现在已被弃用,将来会被移除,我们鼓励您迁移到 `optimizeDeps.rolldownOptions`。 + +以下选项会自动转换: + +- [`esbuildOptions.minify`](https://esbuild.github.io/api/#minify) -> `rolldownOptions.output.minify` +- [`esbuildOptions.treeShaking`](https://esbuild.github.io/api/#tree-shaking) -> `rolldownOptions.treeshake` +- [`esbuildOptions.define`](https://esbuild.github.io/api/#define) -> `rolldownOptions.transform.define` +- [`esbuildOptions.loader`](https://esbuild.github.io/api/#loader) -> `rolldownOptions.moduleTypes` +- [`esbuildOptions.preserveSymlinks`](https://esbuild.github.io/api/#preserve-symlinks) -> `!rolldownOptions.resolve.symlinks` +- [`esbuildOptions.resolveExtensions`](https://esbuild.github.io/api/#resolve-extensions) -> `rolldownOptions.resolve.extensions` +- [`esbuildOptions.mainFields`](https://esbuild.github.io/api/#main-fields) -> `rolldownOptions.resolve.mainFields` +- [`esbuildOptions.conditions`](https://esbuild.github.io/api/#conditions) -> `rolldownOptions.resolve.conditionNames` +- [`esbuildOptions.keepNames`](https://esbuild.github.io/api/#keep-names) -> `rolldownOptions.output.keepNames` +- [`esbuildOptions.platform`](https://esbuild.github.io/api/#platform) -> `rolldownOptions.platform` +- [`esbuildOptions.plugins`](https://esbuild.github.io/plugins/) -> `rolldownOptions.plugins` (partial support) + + + +你可以从 `configResolved` 钩子中获取由兼容层设置的选项: + +```js +const plugin = { + name: 'log-config', + configResolved(config) { + console.log('options', config.optimizeDeps.rolldownOptions) + }, +}, +``` + +### 使用 Oxc 转换 JavaScript {#javascript-transforms-by-oxc} + +现在使用 Oxc 进行 JavaScript 转换,而不是 esbuild。Vite 仍然通过自动将 [`esbuild`](/config/shared-options#esbuild) 选项转换为 [`oxc`](/config/shared-options#oxc) 来支持向后兼容。`esbuild` 现在已被弃用,将来会被移除,我们鼓励您迁移到 `oxc`。 + +以下选项会自动转换: + +- `esbuild.jsxInject` -> `oxc.jsxInject` +- `esbuild.include` -> `oxc.include` +- `esbuild.exclude` -> `oxc.exclude` +- [`esbuild.jsx`](https://esbuild.github.io/api/#jsx) -> [`oxc.jsx`](https://oxc.rs/docs/guide/usage/transformer/jsx) + - `esbuild.jsx: 'preserve'` -> `oxc.jsx: 'preserve'` + - `esbuild.jsx: 'automatic'` -> `oxc.jsx: { runtime: 'automatic' }` + - [`esbuild.jsxImportSource`](https://esbuild.github.io/api/#jsx-import-source) -> `oxc.jsx.importSource` + - `esbuild.jsx: 'transform'` -> `oxc.jsx: { runtime: 'classic' }` + - [`esbuild.jsxFactory`](https://esbuild.github.io/api/#jsx-factory) -> `oxc.jsx.pragma` + - [`esbuild.jsxFragment`](https://esbuild.github.io/api/#jsx-fragment) -> `oxc.jsx.pragmaFrag` + - [`esbuild.jsxDev`](https://esbuild.github.io/api/#jsx-dev) -> `oxc.jsx.development` + - [`esbuild.jsxSideEffects`](https://esbuild.github.io/api/#jsx-side-effects) -> `oxc.jsx.pure` +- [`esbuild.define`](https://esbuild.github.io/api/#define) -> [`oxc.define`](https://oxc.rs/docs/guide/usage/transformer/global-variable-replacement#define) +- [`esbuild.banner`](https://esbuild.github.io/api/#banner) -> 使用 transform 钩子的自定义插件 +- [`esbuild.footer`](https://esbuild.github.io/api/#footer) -> 使用 transform 钩子的自定义插件 + +[`esbuild.supported`](https://esbuild.github.io/api/#supported) 选项不被 Oxc 支持。如果你需要这个选项,请查看 [oxc-project/oxc#15373](https://github.com/oxc-project/oxc/issues/15373)。 + +你可以从 `configResolved` 钩子中获取由兼容层设置的选项: + +```js +const plugin = { + name: 'log-config', + configResolved(config) { + console.log('options', config.oxc) + }, +}, +``` + + + +目前,Oxc 转换器不支持降低原生装饰器,因为我们正在等待规范的进展,参见 ([oxc-project/oxc#9170](https://github.com/oxc-project/oxc/issues/9170))。 + +:::: details 降低原生装饰器的解决方法 + +目前你可以使用 [Babel](https://babeljs.io/) 或 [SWC](https://swc.rs/) 来降低原生装饰器。虽然 SWC 比 Babel 更快,但它**不支持 esbuild 支持的最新装饰器规范**。 + +自从装饰器规范达到第 3 阶段以来,已经更新了多次。每个工具支持的版本如下: + +- `"2023-11"`(esbuild、TypeScript 5.4+ 和 Babel 支持此版本) +- `"2023-05"`(TypeScript 5.2+ 支持此版本) +- `"2023-01"`(TypeScript 5.0+ 支持此版本) +- `"2022-03"`(SWC 支持此版本) + +请参阅 [Babel 装饰器版本指南](https://babeljs.io/docs/babel-plugin-proposal-decorators#version) 了解各版本之间的差异。 + +**使用 Babel:** + +::: code-group + +```bash [npm] +$ npm install -D @rollup/plugin-babel @babel/plugin-proposal-decorators +``` + +```bash [Yarn] +$ yarn add -D @rollup/plugin-babel @babel/plugin-proposal-decorators +``` + +```bash [pnpm] +$ pnpm add -D @rollup/plugin-babel @babel/plugin-proposal-decorators +``` + +```bash [Bun] +$ bun add -D @rollup/plugin-babel @babel/plugin-proposal-decorators +``` + +```bash [Deno] +$ deno add -D npm:@rollup/plugin-babel npm:@babel/plugin-proposal-decorators +``` + +::: + +```ts [vite.config.ts] +import { defineConfig, withFilter } from 'vite' +import { babel } from '@rollup/plugin-babel' + +export default defineConfig({ + plugins: [ + withFilter( + babel({ + configFile: false, + plugins: [ + ['@babel/plugin-proposal-decorators', { version: '2023-11' }], + ], + }), + // Only run this transform if the file contains a decorator. + { transform: { code: '@' } }, + ), + ], +}) +``` + +**使用 SWC:** + +::: code-group + +```bash [npm] +$ npm install -D @rollup/plugin-swc @swc/core +``` + +```bash [Yarn] +$ yarn add -D @rollup/plugin-swc @swc/core +``` + +```bash [pnpm] +$ pnpm add -D @rollup/plugin-swc @swc/core +``` + +```bash [Bun] +$ bun add -D @rollup/plugin-swc @swc/core +``` + +```bash [Deno] +$ deno add -D npm:@rollup/plugin-swc npm:@swc/core +``` + +::: + +```js +import { defineConfig, withFilter } from 'vite' + +export default defineConfig({ + // ... + plugins: [ + withFilter( + swc({ + swc: { + jsc: { + parser: { decorators: true, decoratorsBeforeExport: true }, + // NOTE: SWC doesn't support the '2023-11' version yet. + transform: { decoratorVersion: '2022-03' }, + }, + }, + }), + // Only run this transform if the file contains a decorator. + { transform: { code: '@' } }, + ), + ], +}) +``` + +:::: + +#### esbuild 回退机制 {#esbuild-fallbacks} -### 移除了 Sass 旧版 API 支持 {#removed-sass-legacy-api-support} +`esbuild` 不再被 Vite 直接使用,现在是一个可选依赖。如果你正在使用一个使用 `transformWithEsbuild` 函数的插件,你需要将 `esbuild` 安装为 `devDependency`。`transformWithEsbuild` 函数已被弃用,将来会被移除。我们建议迁移到新的 `transformWithOxc` 函数。 -如计划所述,Sass 旧版 API 的支持已被移除。Vite 现在仅支持现代 API。你可以移除 `css.preprocessorOptions.sass.api` 和 `css.preprocessorOptions.scss.api` 配置选项。 +### 使用 Oxc 进行 JavaScript 压缩 {#javascript-minification-by-oxc} + +现在使用 Oxc 压缩器进行 JavaScript 压缩,而不是 esbuild。你可以使用已弃用的 [`build.minify: 'esbuild'`](/config/build-options#minify) 选项切换回 esbuild。这个配置选项将来会被移除,你需要将 `esbuild` 安装为 `devDependency`,因为 Vite 不再直接依赖 esbuild。 + +如果你之前使用 `esbuild.minify*` 选项来控制压缩行为,现在可以改用 `build.rolldownOptions.output.minify`。如果你之前使用 `esbuild.drop` 选项,现在可以改用 [`build.rolldownOptions.output.minify.compress.drop*` 选项](https://oxc.rs/docs/guide/usage/minifier/dead-code-elimination)。 + +Oxc 不支持属性混淆及其相关选项([`mangleProps`、`reserveProps`、`mangleQuoted`、`mangleCache`](https://esbuild.github.io/api/#mangle-props))。如果你需要这些选项,请查看 [oxc-project/oxc#15375](https://github.com/oxc-project/oxc/issues/15375)。 + +esbuild 和 Oxc 压缩器对源代码做出了略微不同的假设。如果你怀疑压缩器导致了代码损坏,可以在此处比较这些假设: + +- [esbuild 压缩假设](https://esbuild.github.io/api/#minify-considerations) +- [Oxc 压缩器假设](https://oxc.rs/docs/guide/usage/minifier.html#assumptions) + +请报告你在 JavaScript 应用程序中发现的任何与压缩相关的问题。 + +### 使用 Lightning CSS 进行 CSS 压缩 {#css-minification-by-lightning-css} + +现在默认使用 [Lightning CSS](https://lightningcss.dev/) 进行 CSS 压缩。你可以使用 [`build.cssMinify: 'esbuild'`](/config/build-options#cssminify) 选项切换回 esbuild。请注意,你需要将 `esbuild` 安装为 `devDependency`。 + +Lightning CSS 支持更好的语法降级,你的 CSS 包大小可能会略有增加。 + +### 一致的 CommonJS 互操作性 {#consistent-commonjs-interop} + +现在以一致的方式处理来自 CommonJS (CJS) 模块的 `default` 导入。 + +如果符合以下条件之一,则 `default` 导入是被导入的 CJS 模块的 `module.exports` 值。否则,`default` 导入是被导入的 CJS 模块的 `module.exports.default` 值: + +- 导入者是 `.mjs` 或 `.mts` 文件。 +- 导入者最近的 `package.json` 文件中 `type` 字段设置为 `module`。 +- 被导入的 CJS 模块的 `module.exports.__esModule` 值未设置为 true。 + +::: details 之前的行为 + +在开发环境中,如果符合以下条件之一,则 `default` 导入是被导入的 CJS 模块的 `module.exports` 值。否则,`default` 导入是被导入的 CJS 模块的 `module.exports.default` 值: + +- _导入者包含在依赖优化中_ 且为 `.mjs` 或 `.mts` 文件。 +- _导入者包含在依赖优化中_ 且导入者最近的 `package.json` 文件中 `type` 字段设置为 `module`。 +- 被导入的 CJS 模块的 `module.exports.__esModule` 值未设置为 true。 + +在构建时,条件为: + +- 被导入的 CJS 模块的 `module.exports.__esModule` 值未设置为 true。 +- _`module.exports` 的 `default` 属性不存在_。 + +(假设 [`build.commonjsOptions.defaultIsModuleExports`](https://github.com/rollup/plugins/tree/master/packages/commonjs#defaultismoduleexports) 未从默认的 `'auto'` 更改) + +::: + +有关此问题的更多详细信息,请参阅 Rolldown 的文档:[CJS 模块中不明确的 `default` 导入 - 打包 CJS | Rolldown](https://rolldown.rs/in-depth/bundling-cjs#ambiguous-default-import-from-cjs-modules)。 + +此更改可能会破坏一些现有的导入 CJS 模块的代码。你可以使用已弃用的 `legacy.inconsistentCjsInterop: true` 选项临时恢复之前的行为。如果你发现某个包受此更改影响,请向包作者报告或发送拉取请求。请确保链接上面的 Rolldown 文档,以便作者能够理解上下文。 + +### 使用格式嗅探移除模块解析 {#removed-module-resolution-using-format-sniffing} + +当 `package.json` 中同时存在 `browser` 和 `module` 字段时,Vite 以前会根据文件内容来解析字段,并为浏览器选择 ESM 文件。引入这一机制是因为一些包使用 `module` 字段指向 Node.js 的 ESM 文件,而其他包使用 `browser` 字段指向浏览器的 UMD 文件。鉴于现代 `exports` 字段解决了这个问题并且现在被许多包采用,Vite 不再使用这种启发式方法,而是始终遵循 [`resolve.mainFields`](/config/shared-options#resolve-mainfields) 选项的顺序。如果你依赖此行为,可以使用 [`resolve.alias`](/config/shared-options#resolve-alias) 选项将字段映射到所需的文件,或使用包管理器应用补丁(例如 `patch-package`、`pnpm patch`)。 + +### 外部化模块的 Require 调用 {#require-calls-for-externalized-modules} + +现在外部化模块的 `require` 调用会被保留为 `require` 调用,而不会被转换为 `import` 语句。这是为了保持 `require` 调用的语义。如果你想将它们转换为 `import` 语句,可以使用 Rolldown 内置的 `esmExternalRequirePlugin`,该插件由 `vite` 重新导出。 + +```js +import { defineConfig, esmExternalRequirePlugin } from 'vite' + +export default defineConfig({ + // ... + plugins: [ + esmExternalRequirePlugin({ + external: ['react', 'vue', /^node:/], + }), + ], +}) +``` + +有关更多详细信息,请参阅 Rolldown 的文档:[`require` 外部模块 - 打包 CJS | Rolldown](https://rolldown.rs/in-depth/bundling-cjs#require-external-modules)。 + +### `import.meta.url` in UMD / IIFE {#import-meta-url-in-umd-iife} + +在 UMD / IIFE 输出格式中不再对 `import.meta.url` 进行 polyfill。默认情况下它将被替换为 `undefined`。如果你更喜欢之前的行为,可以使用 `define` 选项配合 `build.rolldownOptions.output.intro` 选项。有关更多详细信息,请参阅 Rolldown 的文档:[知名的 `import.meta` 属性 - 非 ESM 输出格式 | Rolldown](https://rolldown.rs/in-depth/non-esm-output-formats#well-known-import-meta-properties)。 + +### 移除了 `build.rollupOptions.watch.chokidar` 选项 {#removed-build-rollupoptions-watch-chokidar-option} + +`build.rollupOptions.watch.chokidar` 选项已被移除。请迁移到 `build.rolldownOptions.watch.notify` 选项。 + + + +### 弃用 `build.rollupOptions.output.manualChunks` {#deprecate-build-rollupoptions-output-manualchunks} + +`output.manualChunks` 选项已被弃用。Rolldown 提供了更灵活的 `advancedChunks` 选项。有关 `advancedChunks` 的更多详情,请参阅 Rolldown 的文档:[高级分块 - Rolldown](https://rolldown.rs/in-depth/advanced-chunks)。 + + + +### 模块类型支持和自动检测 {#module-type-support-and-auto-detection} + +_此更改仅影响插件作者。_ + +Rolldown 对[模块类型](https://rolldown.rs/guide/notable-features#module-types)提供了实验性支持,类似于[esbuild 的 `loader` 选项](https://esbuild.github.io/api/#loader)。因此,Rolldown 会根据解析后的 ID 扩展名自动设置模块类型。如果你在 `load` 或 `transform` 钩子中将其他模块类型的内容转换为 JavaScript,你可能需要在返回值中添加 `moduleType: 'js'`: + +```js +const plugin = { + name: 'txt-loader', + load(id) { + if (id.endsWith('.txt')) { + const content = fs.readFile(id, 'utf-8') + return { + code: `export default ${JSON.stringify(content)}`, + moduleType: 'js', // [!code ++] + } + } + }, +} +``` + +### 其他相关弃用 {#other-related-deprecations} + +以下选项已被弃用,将在未来被移除: + +- `build.rollupOptions`:重命名为 `build.rolldownOptions` +- `worker.rollupOptions`:重命名为 `worker.rolldownOptions` +- `build.commonjsOptions`:现在无操作效果 + +## 总体变化 {#general-changes} ## 移除了已弃用的功能 {#removed-deprecated-features} -- `splitVendorChunkPlugin`(在 v5.2.7 中弃用) - - 该插件最初是为了方便迁移到 Vite v2.9 而提供的。 - - 如有需要,可以使用 `build.rollupOptions.output.manualChunks` 选项来控制分块行为。 -- `transformIndexHtml` 的 hook 级别 `enforce` / `transform`(在 v4.0.0 中弃用) - - 此更改是为了与 [Rollup 的对象型 hooks](https://rollupjs.org/plugin-development/#build-hooks:~:text=Instead%20of%20a%20function%2C%20hooks%20can%20also%20be%20objects.) 接口保持一致。 - - 应使用 `order` 替代 `enforce`,使用 `handler` 替代 `transform`。 +**_TODO:此更改尚未实现,但将在稳定版发布前实现。_** ## 进阶 {#advanced} 还有其他一些只影响少数用户的破坏性更改。 -- [[#19979] chore: declare version range for peer dependencies](https://github.com/vitejs/vite/pull/19979) - - 为 CSS 预处理器指定了 peerDependencies 的版本范围。 -- [[#20013] refactor: remove no-op `legacy.proxySsrExternalModules`](https://github.com/vitejs/vite/pull/20013) - - `legacy.proxySsrExternalModules` 属性自 Vite 6 起已无实际作用,现已移除。 -- [[#19985] refactor!: remove deprecated no-op type only properties](https://github.com/vitejs/vite/pull/19985) - - 以下未使用的属性现已移除:`ModuleRunnerOptions.root`、`ViteDevServer._importGlobMap`、`ResolvePluginOptions.isFromTsImporter`、`ResolvePluginOptions.getDepsOptimizer`、`ResolvePluginOptions.shouldExternalize`、`ResolvePluginOptions.ssrConfig` -- [[#19986] refactor: remove deprecated env api properties](https://github.com/vitejs/vite/pull/19986) - - 这些属性从一开始就被标记为弃用,现已移除。 -- [[#19987] refactor!: remove deprecated `HotBroadcaster` related types](https://github.com/vitejs/vite/pull/19987) - - 这些类型是作为现已弃用的 Runtime API 的一部分引入的,现已被移除:`HMRBroadcaster`、`HMRBroadcasterClient`、`ServerHMRChannel`、`HMRChannel`。 -- [[#19996] fix(ssr)!: don't access `Object` variable in ssr transformed code](https://github.com/vitejs/vite/pull/19996) - - `__vite_ssr_exportName__` 现在是模块运行时上下文中的必需字段。 -- [[#20045] fix: treat all `optimizeDeps.entries` values as globs](https://github.com/vitejs/vite/pull/20045) - - `optimizeDeps.entries` 不再接收字面量字符串路径,而是始终接收 glob 模式。 -- [[#20222] feat: apply some middlewares before `configureServer` hook](https://github.com/vitejs/vite/pull/20222), [[#20224] feat: apply some middlewares before `configurePreviewServer` hook](https://github.com/vitejs/vite/pull/20224) - - 某些中间件现在会在 `configureServer` / `configurePreviewServer` 钩子之前被应用。请注意,如果你不希望某个路由应用 [`server.cors`](../config/server-options.md#server-cors) / [`preview.cors`](../config/preview-options.md#preview-cors) 配置,请务必从响应中移除相关的请求头。 - -## 从 v5 迁移 {#migration-from-v5} - -请先查阅 Vite v6 文档中的 [从 v5 迁移指南](https://v6.vite.dev/guide/migration.html)([中文版](/guide/migration-from-v5.md)),了解如何将你的应用迁移到 Vite 6 所需的变更,然后再继续执行本页中的相关更改。 +- **[TODO: 这将在稳定版发布前修复]** https://github.com/rolldown/rolldown/issues/5726 (affects nuxt, qwik) +- **[TODO: 这将在稳定版发布前修复]** https://github.com/rolldown/rolldown/issues/3403 (affects sveltekit) +- **[TODO: 这将在稳定版发布前修复]** 由于缺少预构建块输出功能([rolldown#4304](https://github.com/rolldown/rolldown/issues/4034)),旧版块现在作为资源文件而不是块文件输出。这意味着块相关选项不适用于旧版块,清单文件也不会将旧版块包含为块文件。 +- **[TODO: 这将在稳定版发布前修复]** 解析器缓存在 Vitest 中破坏了一些边缘情况 ([rolldown-vite#466](https://github.com/vitejs/rolldown-vite/issues/466), [vitest#8754](https://github.com/vitest-dev/vitest/issues/8754#issuecomment-3441115032)) +- **[TODO: 这将在稳定版发布前修复]** 解析器无法与 yarn pnp 配合使用 ([rolldown-vite#324](https://github.com/vitejs/rolldown-vite/issues/324), [rolldown-vite#392](https://github.com/vitejs/rolldown-vite/issues/392)) +- **[TODO: 这将在稳定版发布前修复]** 原生插件排序问题 ([rolldown-vite#373](https://github.com/vitejs/rolldown-vite/issues/373)) +- **[TODO: 这将在稳定版发布前修复]** `@vite-ignore` 注释边缘情况 ([rolldown-vite#426](https://github.com/vitejs/rolldown-vite/issues/426)) +- **[TODO: 这将在稳定版发布前修复]** https://github.com/rolldown/rolldown/issues/3403 +- [Extglobs](https://github.com/micromatch/picomatch/blob/master/README.md#extglobs) 尚未得到支持 ([rolldown-vite#365](https://github.com/vitejs/rolldown-vite/issues/365)) +- `define` 不共享对象引用:当你传递一个对象作为 `define` 的值时,每个变量都会有一个单独的对象副本。详见 [Oxc 转换器文档](https://oxc.rs/docs/guide/usage/transformer/global-variable-replacement#define)。 +- `bundle` 对象变更(`bundle` 是在 `generateBundle` / `writeBundle` 钩子中传递的对象,由 `build` 函数返回): + - 不支持赋值给 `bundle[foo]`。Rollup 也不鼓励这样做。请使用 `this.emitFile()` 代替。 + - 引用在钩子之间不共享 ([rolldown-vite#410](https://github.com/vitejs/rolldown-vite/issues/410)) + - `structuredClone(bundle)` 会出现 `DataCloneError: # could not be cloned` 错误。这不再被支持。请使用 `structuredClone({ ...bundle })` 来克隆。([rolldown-vite#128](https://github.com/vitejs/rolldown-vite/issues/128)) +- Rollup 中的所有并行钩子现在都作为串行钩子工作。详见 [Rolldown 的文档](https://rolldown.rs/apis/plugin-api#sequential-hook-execution)。 +- `"use strict";` 有时不会被注入。详见 [Rolldown 的文档](https://rolldown.rs/in-depth/directives)。 +- 使用 plugin-legacy 转换到低于 ES5 的版本不受支持 ([rolldown-vite#452](https://github.com/vitejs/rolldown-vite/issues/452)) +- 向 `build.target` 选项传递同一浏览器的多个版本现在会报错:esbuild 会选择最新的版本,这可能不是你的本意。 +- Rolldown 缺少支持:以下功能不受 Rolldown 支持,Vite 也不再支持这些功能。 + - `build.rollupOptions.output.format: 'system'` ([rolldown#2387](https://github.com/rolldown/rolldown/issues/2387)) + - `build.rollupOptions.output.format: 'amd'` ([rolldown#2387](https://github.com/rolldown/rolldown/issues/2528)) + - 完整的 TypeScript 遗留命名空间支持 ([oxc-project/oxc#14227](https://github.com/oxc-project/oxc/issues/14227)) + - `shouldTransformCachedModule` 钩子 ([rolldown#4389](https://github.com/rolldown/rolldown/issues/4389)) + - `resolveImportMeta` 钩子 ([rolldown#1010](https://github.com/rolldown/rolldown/issues/1010)) + - `renderDynamicImport` 钩子 ([rolldown#4532](https://github.com/rolldown/rolldown/issues/4532)) + - `resolveFileUrl` 钩子 +- `parseAst` / `parseAstAsync` 函数现在已被弃用,推荐使用功能更多的 `parse` / `parseAsync` 函数。 + +## 从 v6 迁移 {#migration-from-v6} + +请先查阅 Vite v7 文档中的 [从 v6 迁移指南](https://v7.vite.dev/guide/migration)([中文版](/guide/migration-from-v6.md)),了解如何将你的应用迁移到 Vite 7 所需的变更,然后再继续执行本页中的相关更改。 diff --git a/guide/performance.md b/guide/performance.md index c5649204..fb826bbb 100644 --- a/guide/performance.md +++ b/guide/performance.md @@ -122,6 +122,5 @@ export default defineConfig({ 使用更原生化的工具链往往会带来更大的安装大小,因此在启动新的 Vite 项目时不是默认的。但对于较大的应用程序来说,这可能是值得的。 -- 使用 [Rolldown 而不是 Rollup 和 esbuild](./rolldown) 以获得更快的构建速度和在开发和构建之间更一致的体验。 - 尝试实验性的 [LightningCSS](https://github.com/vitejs/vite/discussions/13835) - 使用 [`@vitejs/plugin-react-swc`](https://github.com/vitejs/vite-plugin-react-swc) 代替 `@vitejs/plugin-react`。 diff --git a/guide/philosophy.md b/guide/philosophy.md index 4b061e43..6b55c50f 100644 --- a/guide/philosophy.md +++ b/guide/philosophy.md @@ -16,7 +16,7 @@ Vite 提供了一系列推动编写现代代码的特定功能。例如: ## 旨在高性能的实用解决方案 {#a-pragmatic-approach-to-performance} -Vite 自其诞生之初(详见:[为什么选 Vite](./why.md))就一直致力于性能优化。其开发服务器架构设计确保了随着项目规模扩大,模块热替换(HMR)仍能保持高速运行。Vite 采用类似 [esbuild](https://esbuild.github.io/) 和 [SWC](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc) 这样的原生工具处理复杂的任务,同时将其他部分代码保留在 JavaScript 中,以实现速度与灵活性之间的平衡。在需要时,框架插件会利用 [Babel](https://babeljs.io/) 来编译用户代码。构建阶段,Vite 当前使用的是 [Rollup](https://cn.rollupjs.org/) ,此时包体积大小以及能够接入广泛生态系统的插件比原始速度更重要。Vite 将持续内部改进和发展,在新库出现时适时采用以提升开发者体验(DX),同时保持 API 的稳定性。 +Vite 自其诞生之初(详见:[为什么选 Vite](./why.md))就一直致力于性能优化。其开发服务器架构设计确保了随着项目规模扩大,模块热替换(HMR)仍能保持高速运行。Vite 基于 [Oxc toolchain](https://oxc.rs/) 和 [Rolldown](https://rolldown.rs/) 这样的原生工具处理复杂的任务,同时将其他部分代码保留在 JavaScript 中,以实现速度与灵活性之间的平衡。在需要时,框架插件会利用 [Babel](https://babeljs.io/) 来编译用户代码。得益于 Rolldown 对 Rollup 插件的兼容性,Vite 能够访问广泛的插件生态系统。 ## 基于 Vite 构建框架 {#building-frameworks-on-top-of-vite} diff --git a/guide/troubleshooting.md b/guide/troubleshooting.md index bbc9e2d1..7b4e1080 100644 --- a/guide/troubleshooting.md +++ b/guide/troubleshooting.md @@ -187,7 +187,7 @@ import './Foo.js' // 应该为 './foo.js' 该错误也可能由浏览器扩展程序(如广告拦截器)阻止该请求导致。 -可以通过修改 [`build.rollupOptions.output.chunkFileNames`](../config/build-options.md#build-rollupoptions) 中的块文件名来绕过此问题,因为这些扩展程序通常会根据文件名(例如包含 `ad` 或 `track` 的文件名)来阻止请求。 +可以通过修改 [`build.rolldownOptions.output.chunkFileNames`](../config/build-options.md#build-rolldownoptions) 中的块文件名来绕过此问题,因为这些扩展程序通常会根据文件名(例如包含 `ad` 或 `track` 的文件名)来阻止请求。 ## 优化依赖 {#optimized-dependencies} diff --git a/plugins/index.md b/plugins/index.md index 439929fc..eb1b24ad 100644 --- a/plugins/index.md +++ b/plugins/index.md @@ -18,11 +18,11 @@ Vite 旨在为常见的 web 开发工作提供开箱即用的支持。在搜索 ### [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react) {#vitejs-plugin-react} -使用 esbuild 和 Babel,以较小的软件包占用空间和使用 Babel 转换管道的灵活性实现快速 HMR。如果没有额外的 Babel 插件,在构建过程中只能使用 esbuild。 +使用 [Oxc 转换器](https://oxc.rs/docs/guide/usage/transformer) and [Babel](https://babeljs.io/),以较小的软件包占用空间和使用 Babel 转换管道的灵活性实现快速 HMR。如果没有额外的 Babel 插件,在构建过程中只能使用 Oxc 转换器 ### [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc) -在开发时会将 Babel 替换为 SWC。在生产环境构建期间,若使用了插件则会使用 SWC+esbuild,若没有使用插件则仅会用到 esbuild。对不需要非标准 React 扩展的大型项目,冷启动和模块热替换(HMR)将会有显著提升。 +在开发时会将 Babel 替换为 [SWC](https://swc.rs/)。在生产环境构建期间,若使用了插件则会使用 SWC+Oxc 转换器,若没有使用插件则仅会用到 Oxc 转换器。对于需要自定义插件的大型项目,如果该插件在 SWC 中也可用,冷启动和模块热替换(HMR)将会有显著提升。 ### [@vitejs/plugin-rsc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc) @@ -42,6 +42,12 @@ npm create vite@latest -- --template rsc 查看 [awesome-vite](https://github.com/vitejs/awesome-vite#plugins) - 你也可以通过 PR 的方式将你的插件添加到此列表中。 +## Rolldown Builtin Plugins {#rolldown-builtin-plugins} + +Vite 在底层使用 [Rolldown](https://rolldown.rs/),它为常见用例提供了一些内置插件。 + +阅读 [Rolldown 内置插件章节](https://rolldown.rs/builtin-plugins/) 了解更多信息。 + ## Rollup 插件 {#rollup-plugins} [Vite 插件](../guide/api-plugin) 是 Rollup 插件接口的一种扩展。查看 [Rollup 插件兼容性章节](../guide/api-plugin#rollup-plugin-compatibility) 获取更多信息。 diff --git a/public/_redirects b/public/_redirects index 90e24246..6952951a 100644 --- a/public/_redirects +++ b/public/_redirects @@ -7,6 +7,8 @@ https://cn.vitejs.dev/* https://cn.vite.dev/:splat 301! /guide/api-vite-environment.html /guide/api-environment 301 /guide/comparisons /guide/why#how-vite-relates-to-other-unbundled-build-tools 301 /guide/comparisons.html /guide/why#how-vite-relates-to-other-unbundled-build-tools 301 +/guide/rolldown https://v7.vite.dev/guide/rolldown 301 +/guide/rolldown.html https://v7.vite.dev/guide/rolldown 301 # llms.txt /*.txt /:splat.md 301 diff --git a/public/og-image-announcing-vite8-beta.webp b/public/og-image-announcing-vite8-beta.webp new file mode 100644 index 00000000..f3674757 Binary files /dev/null and b/public/og-image-announcing-vite8-beta.webp differ diff --git a/releases.md b/releases.md index 09a86e3d..60605462 100644 --- a/releases.md +++ b/releases.md @@ -43,10 +43,6 @@ Vite 没有固定的发布周期。 - 偶尔我们可能需要采用仅在更新版本的 TypeScript 中可用的功能,这会提高最低要求的 TypeScript 版本。 - 如果你使用 TypeScript,可以使用一个锁定当前次要版本的 semver 范围,并在 Vite 发布新次要版本时手动升级。 -### esbuild - -[esbuild](https://esbuild.github.io/) 目前是 pre-1.0.0,有时它会有主要版本更新,我们可能需要包含这些变化以使用新的功能和性能改进,并可能会在 Vite 次要版本中提升 esbuild 的版本。 - ### Node.js 非 LTS 版本 {#node-js-non-lts-versions} 非 LTS 的 Node.js 版本(奇数版本)不在 Vite 的 CI 测试范围内,但在其 [生命周期终止](https://endoflife.date/nodejs) 之前应该仍然可以工作。