From 506c2d4a2c893c11ccb86a5eb5559788ca77b393 Mon Sep 17 00:00:00 2001 From: Kylin <1159469891@qq.com> Date: Thu, 23 Oct 2025 19:32:36 +0800 Subject: [PATCH 1/2] docs: update content --- config/build-options.md | 22 +++++++++------------- config/dep-optimization-options.md | 6 +----- config/server-options.md | 12 +----------- guide/features.md | 9 +-------- 4 files changed, 12 insertions(+), 37 deletions(-) diff --git a/config/build-options.md b/config/build-options.md index 17e3502f..afe038ec 100644 --- a/config/build-options.md +++ b/config/build-options.md @@ -185,35 +185,32 @@ export default defineConfig({ }) ``` -<<<<<<< HEAD -## build.manifest {#build-manifest} -======= -## build.license +## build.license {#build-license} - **Type:** `boolean | { fileName?: string }` - **Default:** `false` -When set to `true`, the build will generate a `.vite/license.md` file that includes all bundled dependencies' licenses. It can be hosted to display and acknowledge the dependencies used by the app. When `fileName` is passed, it will be used as the license file name relative to the `outDir`. An example output may look like this: +当设置为 `true` 时,构建过程将生成一个 `.vite/license.md` 文件,其中包含所有打包依赖项的许可证信息。该文件可以被托管,用于展示和确认应用程序所使用的依赖项。当传入 `fileName` 参数时,它将被用作相对于 `outDir` 的许可证文件名。示例输出可能如下所示: ```md -# Licenses +# Licenses {#licenses} -The app bundles dependencies which contain the following licenses: +应用程序打包了包含以下许可证的依赖项: -## dep-1 - 1.2.3 (CC0-1.0) +## dep-1 - 1.2.3 (CC0-1.0) {#dep-1-1-2-3-cc0-1-0} CC0 1.0 Universal ... -## dep-2 - 4.5.6 (MIT) +## dep-2 - 4.5.6 (MIT) {#dep-2-4-5-6-mit} MIT License ... ``` -If the `fileName` ends with `.json`, the raw JSON metadata will be generated instead and can be used for further processing. For example: +如果 `fileName` 以 `.json` 结尾,则会生成原始的 JSON 元数据,可用于进一步处理。例如: ```json [ @@ -233,7 +230,7 @@ If the `fileName` ends with `.json`, the raw JSON metadata will be generated ins ``` ::: tip -If you'd like to reference the license file in the built code, you can use `build.rollupOptions.output.banner` to inject a comment at the top of the files. For example: +如果你希望在构建后的代码中引用许可证文件,可以使用 `build.rollupOptions.output.banner` 在文件顶部注入注释。例如: ```js twoslash [vite.config.js] import { defineConfig } from 'vite' @@ -253,8 +250,7 @@ export default defineConfig({ ::: -## build.manifest ->>>>>>> f90ef5f6e1c48b03dfee6f0c20a04cac7a64e9c0 +## build.manifest {#build-manifest} - **类型:** `boolean | string` - **默认:** `false` diff --git a/config/dep-optimization-options.md b/config/dep-optimization-options.md index 2300ab04..a6f1984b 100644 --- a/config/dep-optimization-options.md +++ b/config/dep-optimization-options.md @@ -10,11 +10,7 @@ 默认情况下,Vite 会抓取你的 `index.html` 来检测需要预构建的依赖项(忽略了`node_modules`、`build.outDir`、`__tests__` 和 `coverage`)。如果指定了 `build.rollupOptions.input`,Vite 将转而去抓取这些入口点。 -<<<<<<< HEAD -如果这两者都不合你意,则可以使用此选项指定自定义条目——该值需要遵循 [tinyglobby 模式](https://github.com/SuperchupuDev/tinyglobby) ,或者是相对于 Vite 项目根目录的匹配模式数组。当显式声明了 `optimizeDeps.entries` 时默认只有 `node_modules` 和 `build.outDir` 文件夹会被忽略。如果还需忽略其他文件夹,你可以在模式列表中使用以 `!` 为前缀的、用来匹配忽略项的模式。对于明确包含字符串 `node_modules` 的模式,不会忽略 `node_modules`。 -======= -If neither of these fit your needs, you can specify custom entries using this option - the value should be a [`tinyglobby` pattern](https://superchupu.dev/tinyglobby/comparison) or array of patterns that are relative from Vite project root. This will overwrite default entries inference. Only `node_modules` and `build.outDir` folders will be ignored by default when `optimizeDeps.entries` is explicitly defined. If other folders need to be ignored, you can use an ignore pattern as part of the entries list, marked with an initial `!`. `node_modules` will not be ignored for patterns that explicitly include the string `node_modules`. ->>>>>>> f90ef5f6e1c48b03dfee6f0c20a04cac7a64e9c0 +如果这两者都不合你意,则可以使用此选项指定自定义条目——该值需要遵循 [tinyglobby 模式](https://superchupu.dev/tinyglobby/comparison) ,或者是相对于 Vite 项目根目录的匹配模式数组。当显式声明了 `optimizeDeps.entries` 时默认只有 `node_modules` 和 `build.outDir` 文件夹会被忽略。如果还需忽略其他文件夹,你可以在模式列表中使用以 `!` 为前缀的、用来匹配忽略项的模式。对于明确包含字符串 `node_modules` 的模式,不会忽略 `node_modules`。 ## optimizeDeps.exclude {#optimizedeps-exclude} diff --git a/config/server-options.md b/config/server-options.md index b2ca47e4..accd5a6b 100644 --- a/config/server-options.md +++ b/config/server-options.md @@ -92,13 +92,7 @@ Vite允许响应的主机名。 启用 TLS + HTTP/2。该值是传递给 `https.createServer()` 的 [options 对象](https://nodejs.org/api/https.html#https_https_createserver_options_requestlistener)。 -<<<<<<< HEAD -请注意,仅当同时使用 [`server.proxy` 选项](#server-proxy) 时,才会降级为 TLS。 - 需要一个合法可用的证书。对基本使用的配置需求来说,你可以添加 [@vitejs/plugin-basic-ssl](https://github.com/vitejs/vite-plugin-basic-ssl) 到项目插件中,它会自动创建和缓存一个自签名的证书。但我们推荐你创建和使用你自己的证书。 -======= -A valid certificate is needed. For a basic setup, you can add [@vitejs/plugin-basic-ssl](https://github.com/vitejs/vite-plugin-basic-ssl) to the project plugins, which will automatically create and cache a self-signed certificate. But we recommend creating your own certificates. ->>>>>>> f90ef5f6e1c48b03dfee6f0c20a04cac7a64e9c0 ## server.open {#server-open} @@ -237,11 +231,7 @@ Direct websocket connection fallback. Check out https://vite.dev/config/server-o 提前转换和缓存文件以进行预热。可以在服务器启动时提高初始页面加载速度,并防止转换瀑布。 -<<<<<<< HEAD -`clientFiles` 是仅在客户端使用的文件,而 `ssrFiles` 是仅在服务端渲染中使用的文件。它们接受相对于 `root` 的文件路径数组或 [`tinyglobby`](https://github.com/SuperchupuDev/tinyglobby) 模式。 -======= -`clientFiles` are files that are used in the client only, while `ssrFiles` are files that are used in SSR only. They accept an array of file paths or [`tinyglobby` patterns](https://superchupu.dev/tinyglobby/comparison) relative to the `root`. ->>>>>>> f90ef5f6e1c48b03dfee6f0c20a04cac7a64e9c0 +`clientFiles` 是仅在客户端使用的文件,而 `ssrFiles` 是仅在服务端渲染中使用的文件。它们接受相对于 `root` 的文件路径数组或 [`tinyglobby` 模式](https://superchupu.dev/tinyglobby/comparison) 。 请确保只添加经常使用的文件,以免在启动时过载 Vite 开发服务器。 diff --git a/guide/features.md b/guide/features.md index 3d54fe79..ba8a46a4 100644 --- a/guide/features.md +++ b/guide/features.md @@ -617,17 +617,10 @@ const modulesWithBase = { 请注意: -<<<<<<< HEAD - 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准 - 该 Glob 模式会被当成导入标识符:必须是相对路径(以 `./` 开头)或绝对路径(以 `/` 开头,相对于项目根目录解析)或一个别名路径(请看 [`resolve.alias` 选项](/config/shared-options.md#resolve-alias))。 -- Glob 匹配是使用 [`tinyglobby`](https://github.com/SuperchupuDev/tinyglobby) 来实现的 —— 阅读它的文档来查阅 [支持的 Glob 模式](https://github.com/mrmlnc/fast-glob#pattern-syntax)。 +- Glob 匹配是使用 [`tinyglobby`](https://github.com/SuperchupuDev/tinyglobby) 来实现的 —— 阅读它的文档来查阅 [支持的 Glob 模式](https://github.com/mrmlnc/fast-glob#pattern-syntax)。- 查看其文档了解 [支持的 glob 模式](https://superchupu.dev/tinyglobby/comparison)。 - 你还需注意,所有 `import.meta.glob` 的参数都必须以字面量传入。你 **不** 可以在其中使用变量或表达式。 -======= -- This is a Vite-only feature and is not a web or ES standard. -- The glob patterns are treated like import specifiers: they must be either relative (start with `./`) or absolute (start with `/`, resolved relative to project root) or an alias path (see [`resolve.alias` option](/config/shared-options.md#resolve-alias)). -- The glob matching is done via [`tinyglobby`](https://github.com/SuperchupuDev/tinyglobby) - check out its documentation for [supported glob patterns](https://superchupu.dev/tinyglobby/comparison). -- You should also be aware that all the arguments in the `import.meta.glob` must be **passed as literals**. You can NOT use variables or expressions in them. ->>>>>>> f90ef5f6e1c48b03dfee6f0c20a04cac7a64e9c0 ## 动态导入 {#dynamic-import} From fbade7f2e6d7ce3926a7848ba03cf1631aa0edb4 Mon Sep 17 00:00:00 2001 From: Kylin <1159469891@qq.com> Date: Thu, 23 Oct 2025 19:46:09 +0800 Subject: [PATCH 2/2] docs: update content --- guide/features.md | 53 ++++++++++++++++++++++++----------------------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/guide/features.md b/guide/features.md index ba8a46a4..a1210185 100644 --- a/guide/features.md +++ b/guide/features.md @@ -196,7 +196,7 @@ HTML 文件位于 Vite 项目的[最前端和中心](/guide/#index-html-and-proj - 或仅当 `property` 属性匹配以下值时:`og:image`,`og:image:url`,`og:image:secure_url`,`og:audio`,`og:audio:secure_url`,`og:video`,或 `og:video:secure_url` ```html {4-5,8-9} - + @@ -237,8 +237,8 @@ import { defineConfig } from 'vite' export default defineConfig({ esbuild: { jsxFactory: 'h', - jsxFragment: 'Fragment', - }, + jsxFragment: 'Fragment' + } }) ``` @@ -251,8 +251,8 @@ import { defineConfig } from 'vite' export default defineConfig({ esbuild: { - jsxInject: `import React from 'react'`, - }, + jsxInject: `import React from 'react'` + } }) ``` @@ -427,7 +427,7 @@ const modules = import.meta.glob('./dir/*.js') // vite 生成的代码 const modules = { './dir/bar.js': () => import('./dir/bar.js'), - './dir/foo.js': () => import('./dir/foo.js'), + './dir/foo.js': () => import('./dir/foo.js') } ``` @@ -457,7 +457,7 @@ import * as __vite_glob_0_0 from './dir/bar.js' import * as __vite_glob_0_1 from './dir/foo.js' const modules = { './dir/bar.js': __vite_glob_0_0, - './dir/foo.js': __vite_glob_0_1, + './dir/foo.js': __vite_glob_0_1 } ``` @@ -484,7 +484,7 @@ const modules = import.meta.glob(['./dir/*.js', '!**/bar.js']) ```js // vite 生成的代码 const modules = { - './dir/foo.js': () => import('./dir/foo.js'), + './dir/foo.js': () => import('./dir/foo.js') } ``` @@ -502,7 +502,7 @@ const modules = import.meta.glob('./dir/*.js', { import: 'setup' }) // vite 生成的代码 const modules = { './dir/bar.js': () => import('./dir/bar.js').then((m) => m.setup), - './dir/foo.js': () => import('./dir/foo.js').then((m) => m.setup), + './dir/foo.js': () => import('./dir/foo.js').then((m) => m.setup) } ``` @@ -513,7 +513,7 @@ import 'vite/client' // ---cut--- const modules = import.meta.glob('./dir/*.js', { import: 'setup', - eager: true, + eager: true }) ``` @@ -523,7 +523,7 @@ import { setup as __vite_glob_0_0 } from './dir/bar.js' import { setup as __vite_glob_0_1 } from './dir/foo.js' const modules = { './dir/bar.js': __vite_glob_0_0, - './dir/foo.js': __vite_glob_0_1, + './dir/foo.js': __vite_glob_0_1 } ``` @@ -534,7 +534,7 @@ import 'vite/client' // ---cut--- const modules = import.meta.glob('./dir/*.js', { import: 'default', - eager: true, + eager: true }) ``` @@ -544,7 +544,7 @@ import { default as __vite_glob_0_0 } from './dir/bar.js' import { default as __vite_glob_0_1 } from './dir/foo.js' const modules = { './dir/bar.js': __vite_glob_0_0, - './dir/foo.js': __vite_glob_0_1, + './dir/foo.js': __vite_glob_0_1 } ``` @@ -557,11 +557,11 @@ import 'vite/client' // ---cut--- const moduleStrings = import.meta.glob('./dir/*.svg', { query: '?raw', - import: 'default', + import: 'default' }) const moduleUrls = import.meta.glob('./dir/*.svg', { query: '?url', - import: 'default', + import: 'default' }) ``` @@ -569,11 +569,11 @@ const moduleUrls = import.meta.glob('./dir/*.svg', { // vite 生成的代码 const moduleStrings = { './dir/bar.svg': () => import('./dir/bar.svg?raw').then((m) => m['default']), - './dir/foo.svg': () => import('./dir/foo.svg?raw').then((m) => m['default']), + './dir/foo.svg': () => import('./dir/foo.svg?raw').then((m) => m['default']) } const moduleUrls = { './dir/bar.svg': () => import('./dir/bar.svg?url').then((m) => m['default']), - './dir/foo.svg': () => import('./dir/foo.svg?url').then((m) => m['default']), + './dir/foo.svg': () => import('./dir/foo.svg?url').then((m) => m['default']) } ``` @@ -583,7 +583,7 @@ const moduleUrls = { import 'vite/client' // ---cut--- const modules = import.meta.glob('./dir/*.js', { - query: { foo: 'bar', bar: true }, + query: { foo: 'bar', bar: true } }) ``` @@ -595,7 +595,7 @@ const modules = import.meta.glob('./dir/*.js', { import 'vite/client' // ---cut--- const modulesWithBase = import.meta.glob('./**/*.js', { - base: './base', + base: './base' }) ``` @@ -603,7 +603,7 @@ const modulesWithBase = import.meta.glob('./**/*.js', { // code produced by vite: const modulesWithBase = { './dir/foo.js': () => import('./base/dir/foo.js'), - './dir/bar.js': () => import('./base/dir/bar.js'), + './dir/bar.js': () => import('./base/dir/bar.js') } ``` @@ -619,7 +619,7 @@ const modulesWithBase = { - 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准 - 该 Glob 模式会被当成导入标识符:必须是相对路径(以 `./` 开头)或绝对路径(以 `/` 开头,相对于项目根目录解析)或一个别名路径(请看 [`resolve.alias` 选项](/config/shared-options.md#resolve-alias))。 -- Glob 匹配是使用 [`tinyglobby`](https://github.com/SuperchupuDev/tinyglobby) 来实现的 —— 阅读它的文档来查阅 [支持的 Glob 模式](https://github.com/mrmlnc/fast-glob#pattern-syntax)。- 查看其文档了解 [支持的 glob 模式](https://superchupu.dev/tinyglobby/comparison)。 +- Glob 匹配是使用 [`tinyglobby`](https://github.com/SuperchupuDev/tinyglobby) 来实现的 —— 阅读它的文档来查阅 [支持的 Glob 模式](https://superchupu.dev/tinyglobby/comparison)。 - 你还需注意,所有 `import.meta.glob` 的参数都必须以字面量传入。你 **不** 可以在其中使用变量或表达式。 ## 动态导入 {#dynamic-import} @@ -657,8 +657,8 @@ init({ imports: { someFunc: () => { /* ... */ - }, - }, + } + } }).then(() => { /* ... */ }) @@ -682,8 +682,9 @@ import wasmUrl from 'foo.wasm?url' const main = async () => { const responsePromise = fetch(wasmUrl) - const { module, instance } = - await WebAssembly.instantiateStreaming(responsePromise) + const { module, instance } = await WebAssembly.instantiateStreaming( + responsePromise + ) /* ... */ } @@ -729,7 +730,7 @@ worker 构造函数会接受可以用来创建 “模块” worker 的选项: ```ts const worker = new Worker(new URL('./worker.js', import.meta.url), { - type: 'module', + type: 'module' }) ```