Skip to content
65 changes: 65 additions & 0 deletions config/build-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
2 changes: 1 addition & 1 deletion config/dep-optimization-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <NonInheritBadge /> {#optimizedeps-exclude}

Expand Down
4 changes: 1 addition & 3 deletions config/server-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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 开发服务器。

Expand Down
53 changes: 27 additions & 26 deletions guide/features.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/favicon.ico" />
Expand Down Expand Up @@ -237,8 +237,8 @@ import { defineConfig } from 'vite'
export default defineConfig({
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
},
jsxFragment: 'Fragment'
}
})
```

Expand All @@ -251,8 +251,8 @@ import { defineConfig } from 'vite'

export default defineConfig({
esbuild: {
jsxInject: `import React from 'react'`,
},
jsxInject: `import React from 'react'`
}
})
```

Expand Down Expand Up @@ -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')
}
```

Expand Down Expand Up @@ -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
}
```

Expand All @@ -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')
}
```

Expand All @@ -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)
}
```

Expand All @@ -513,7 +513,7 @@ import 'vite/client'
// ---cut---
const modules = import.meta.glob('./dir/*.js', {
import: 'setup',
eager: true,
eager: true
})
```

Expand All @@ -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
}
```

Expand All @@ -534,7 +534,7 @@ import 'vite/client'
// ---cut---
const modules = import.meta.glob('./dir/*.js', {
import: 'default',
eager: true,
eager: true
})
```

Expand All @@ -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
}
```

Expand All @@ -557,23 +557,23 @@ 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'
})
```

```ts
// 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'])
}
```

Expand All @@ -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 }
})
```

Expand All @@ -595,15 +595,15 @@ const modules = import.meta.glob('./dir/*.js', {
import 'vite/client'
// ---cut---
const modulesWithBase = import.meta.glob('./**/*.js', {
base: './base',
base: './base'
})
```

```ts
// 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')
}
```

Expand All @@ -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}
Expand Down Expand Up @@ -657,8 +657,8 @@ init({
imports: {
someFunc: () => {
/* ... */
},
},
}
}
}).then(() => {
/* ... */
})
Expand All @@ -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
)
/* ... */
}

Expand Down Expand Up @@ -729,7 +730,7 @@ worker 构造函数会接受可以用来创建 “模块” worker 的选项:

```ts
const worker = new Worker(new URL('./worker.js', import.meta.url), {
type: 'module',
type: 'module'
})
```

Expand Down