diff --git a/config/build-options.md b/config/build-options.md index b95f8e16..2c7a2b8e 100644 --- a/config/build-options.md +++ b/config/build-options.md @@ -185,6 +185,71 @@ export default defineConfig({ }) ``` +## build.license {#build-license} + +- **类型：** `boolean | { fileName?: string }` +- **默认：** `false` + +当设置为 `true` 时，构建过程将生成一个 `.vite/license.md` 文件，其中包含所有打包依赖项的许可证信息。该文件可以被托管，用于展示和确认应用程序所使用的依赖项。当传入 `fileName` 参数时，它将被用作相对于 `outDir` 的许可证文件名。示例输出可能如下所示： + +```md +# Licenses + +The app bundles dependencies which contain the following licenses: + +## dep-1 - 1.2.3 (CC0-1.0) + +CC0 1.0 Universal + +... + +## dep-2 - 4.5.6 (MIT) + +MIT License + +... +``` + +如果 `fileName` 以 `.json` 结尾，则会生成原始的 JSON 元数据，可用于进一步处理。例如： + +```json +[ + { + "name": "dep-1", + "version": "1.2.3", + "identifier": "CC0-1.0", + "text": "CC0 1.0 Universal\n\n..." + }, + { + "name": "dep-2", + "version": "4.5.6", + "identifier": "MIT", + "text": "MIT License\n\n..." + } +] +``` + +::: tip +如果你希望在构建后的代码中引用许可证文件，可以使用 `build.rollupOptions.output.banner` 在文件顶部注入注释。例如： + +```js twoslash [vite.config.js] +import { defineConfig } from 'vite' + +export default defineConfig({ + build: { + license: true, + rollupOptions: { + output: { + banner: + '/* See licenses of bundled dependencies at https://example.com/license.md */', + }, + }, + }, +}) +``` + +::: + ## build.manifest {#build-manifest} - **类型：** `boolean | string` diff --git a/config/dep-optimization-options.md b/config/dep-optimization-options.md index 454d6e5d..a6f1984b 100644 --- a/config/dep-optimization-options.md +++ b/config/dep-optimization-options.md @@ -10,7 +10,7 @@ 默认情况下，Vite 会抓取你的 `index.html` 来检测需要预构建的依赖项（忽略了`node_modules`、`build.outDir`、`__tests__` 和 `coverage`）。如果指定了 `build.rollupOptions.input`，Vite 将转而去抓取这些入口点。 -如果这两者都不合你意，则可以使用此选项指定自定义条目——该值需要遵循 [tinyglobby 模式](https://github.com/SuperchupuDev/tinyglobby) ，或者是相对于 Vite 项目根目录的匹配模式数组。当显式声明了 `optimizeDeps.entries` 时默认只有 `node_modules` 和 `build.outDir` 文件夹会被忽略。如果还需忽略其他文件夹，你可以在模式列表中使用以 `!` 为前缀的、用来匹配忽略项的模式。对于明确包含字符串 `node_modules` 的模式，不会忽略 `node_modules`。 +如果这两者都不合你意，则可以使用此选项指定自定义条目——该值需要遵循 [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 289529b9..accd5a6b 100644 --- a/config/server-options.md +++ b/config/server-options.md @@ -92,8 +92,6 @@ Vite允许响应的主机名。 启用 TLS + HTTP/2。该值是传递给 `https.createServer()` 的 [options 对象](https://nodejs.org/api/https.html#https_https_createserver_options_requestlistener)。 -请注意，仅当同时使用 [`server.proxy` 选项](#server-proxy) 时，才会降级为 TLS。 - 需要一个合法可用的证书。对基本使用的配置需求来说，你可以添加 [@vitejs/plugin-basic-ssl](https://github.com/vitejs/vite-plugin-basic-ssl) 到项目插件中，它会自动创建和缓存一个自签名的证书。但我们推荐你创建和使用你自己的证书。 ## server.open {#server-open} @@ -233,7 +231,7 @@ Direct websocket connection fallback. Check out https://vite.dev/config/server-o 提前转换和缓存文件以进行预热。可以在服务器启动时提高初始页面加载速度，并防止转换瀑布。 -`clientFiles` 是仅在客户端使用的文件，而 `ssrFiles` 是仅在服务端渲染中使用的文件。它们接受相对于 `root` 的文件路径数组或 [`tinyglobby`](https://github.com/SuperchupuDev/tinyglobby) 模式。 +`clientFiles` 是仅在客户端使用的文件，而 `ssrFiles` 是仅在服务端渲染中使用的文件。它们接受相对于 `root` 的文件路径数组或 [`tinyglobby` 模式](https://superchupu.dev/tinyglobby/comparison) 。 请确保只添加经常使用的文件，以免在启动时过载 Vite 开发服务器。 diff --git a/guide/features.md b/guide/features.md index 722f2a08..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 匹配是使用 [`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' }) ```