release: v2.4.4

Author: QC-L

.vitepress/config.js

@@ -74,6 +74,10 @@ module.exports = {
             text: 'English',
             link: 'https://vitejs.dev'
           },
+          {
+            text: '日本語',
+            link: 'https://ja.vitejs.dev'
+          }
         ]
       }
     ],

config/index.md

@@ -55,7 +55,7 @@ Vite 也直接支持 TS 配置文件。你可以在 `vite.config.ts` 中使用 `
 如果配置文件需要基于（`serve` 或 `build`）命令或者不同的 [模式](/guide/env-and-mode) 来决定选项，则可以选择导出这样一个函数：
 
 ```js
-export default ({ command, mode }) => {
+export default defineConfig(({ command, mode }) => {
   if (command === 'serve') {
     return {
       // serve 独有配置
@@ -65,15 +65,15 @@ export default ({ command, mode }) => {
       // build 独有配置
     }
   }
-}
+})
 ```
 
 ### 异步配置 {#async-config}
 
 如果配置需要调用一个异步函数，也可以转而导出一个异步函数：
 
 ```js
-export default async ({ command, mode }) => {
+export default defineConfig(async ({ command, mode }) => {
   const data = await asyncFunction()
   return {
     // 构建模式所需的特有配置
@@ -242,15 +242,15 @@ export default async ({ command, mode }) => {
   指定传递给 CSS 预处理器的选项。例如:
 
   ```js
-  export default {
+  export default defineConfig({
     css: {
       preprocessorOptions: {
         scss: {
           additionalData: `$injectedColor: orange;`
         }
       }
     }
-  }
+  })
   ```
 
 ### json.namedExports {#json-namedexports}
@@ -276,24 +276,24 @@ export default async ({ command, mode }) => {
   `ESBuildOptions` 继承自 [ESbuild 转换选项](https://esbuild.github.io/api/#transform-api)。最常见的用例是自定义 JSX：
 
   ```js
-  export default {
+  export default defineConfig({
     esbuild: {
       jsxFactory: 'h',
       jsxFragment: 'Fragment'
     }
-  }
+  })
   ```
 
   默认情况下，ESbuild 会被应用在 `ts`、`jsx`、`tsx` 文件。你可以通过 `esbuild.include` 和 `esbuild.exclude` 对要处理的文件类型进行配置，这两个配置的类型应为 `string | RegExp | (string | RegExp)[]`。
 
   此外，你还可以通过 `esbuild.jsxInject` 来自动为每一个被 ESbuild 转换的文件注入 JSX helper。
 
   ```js
-  export default {
+  export default defineConfig({
     esbuild: {
       jsxInject: `import React from 'react'`
     }
-  }
+  })
   ```
 
   设置为 `false` 来禁用 ESbuild 转换。
@@ -374,11 +374,11 @@ export default async ({ command, mode }) => {
   **示例：**
 
   ```js
-  export default {
+  export default defineConfig({
     server: {
       open: '/docs/index.html'
     }
-  }
+  })
   ```
 
 ### server.proxy {#server-proxy}
@@ -392,7 +392,7 @@ export default async ({ command, mode }) => {
   **示例：**
 
   ```js
-  export default {
+  export default defineConfig({
     server: {
       proxy: {
         // 字符串简写写法
@@ -419,7 +419,7 @@ export default async ({ command, mode }) => {
         }
       }
     }
-  }
+  })
   ```
 
 ### server.cors {#server-cors}
@@ -514,14 +514,14 @@ createServer()
   接受一个路径作为自定义工作区的 root 目录。可以是绝对路径或是相对于 [项目 root 目录](/guide/#index-html-and-project-root) 的相对路径。示例如下：
 
   ```js
-  export default {
+  export default defineConfig({
     server: {
       fs: {
         // 可以为项目根目录的上一级提供服务
         allow: ['..']
       }
     }
-  }
+  })
   ```
 
 ## 构建选项 {#build-options}
@@ -543,23 +543,6 @@ createServer()
 
   注意：如果代码包含不能被 `esbuild` 安全地编译的特性，那么构建将会失败。查看 [esbuild 文档](https://esbuild.github.io/content-types/#javascript) 获取更多细节。
 
-### build.polyfillDynamicImport {#build-polyfilldynamicimport}
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-  设置是否自动注入 [动态导入 polyfill](https://github.com/GoogleChromeLabs/dynamic-import-polyfill)。
-
-  如果设置为 `true`，该 polyfill 会被自动注入到每一个 `index.html` 入口的代理模块中。若将本次构建使用 `build.rollupOptions.input` 配置为使用非 html 的自定义入口，则需要在你的自定义的入口手动导入该 polyfill：
-
-  ```js
-  import 'vite/dynamic-import-polyfill'
-  ```
-
-  当使用 [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 时，该插件会将本选项自动配置为 `true`。
-
-  注意：本 polyfill **无法**应用到 [库模式](/guide/build#library-mode) 中。如果你需要支持没有原生动态导入功能的浏览器，你可能需要避免在你的库中使用本功能。
-
 ### build.outDir {#build-outdir}
 
 - **类型：** `string`
@@ -599,7 +582,7 @@ createServer()
 - **类型：** `boolean | 'inline'` | 'hidden'`
 - **默认：** `false`
 
-  构建后是否生成 source map 文件。
+  构建后是否生成 source map 文件。如果为 `true`，将会创建一个独立的 source map 文件。如果为 `'inline'`，source map 将作为一个 data URI 附加在输出文件中。`'hidden'` 的工作原理与 `'true'` 相似，只是 bundle 文件中相应的注释将不被保留。
 
 ### build.rollupOptions {#build-rollupoptions}
 
@@ -621,10 +604,10 @@ createServer()
 
 ### build.lib {#build-lib}
 
-- **类型：** `{ entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string }`
+- **类型：** `{ entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat) => string) }`
 - **相关内容：** [库模式](/guide/build#library-mode)
 
-  构建为库。`entry` 是必须的因为库不能使用 HTML 作为入口。`name` 则是暴露的全局变量，在 `formats` 包含 `'umd'` 或 `'iife'` 时是必须的。默认 `formats` 是 `['es', 'umd']` 。`fileName` 是输出的包文件名，默认 `fileName` 是 `package.json` 的 `name` 选项。
+  构建为库。`entry` 是必须的因为库不能使用 HTML 作为入口。`name` 则是暴露的全局变量，在 `formats` 包含 `'umd'` 或 `'iife'` 时是必须的。默认 `formats` 是 `['es', 'umd']` 。`fileName` 是输出的包文件名，默认 `fileName` 是 `package.json` 的 `name` 选项，同时，它还可以被定义为参数为 `format` 的函数。
 
 ### build.manifest {#build-manifest}
 

guide/api-javascript.md

@@ -4,13 +4,13 @@ Vite 的 JavaScript API 是完全类型化的，我们推荐使用 TypeScript 
 
 ## `createServer` {#createserver}
 
-**类型签名**
+**类型签名：**
 
 ```ts
 async function createServer(inlineConfig?: InlineConfig): Promise<ViteDevServer>
 ```
 
-**使用示例**
+**使用示例：**
 
 ```js
 const { createServer } = require('vite')
@@ -119,15 +119,15 @@ interface ViteDevServer {
 
 ## `build`
 
-**类型校验**
+**类型校验：**
 
 ```ts
 async function build(
   inlineConfig?: InlineConfig
 ): Promise<RollupOutput | RollupOutput[]>
 ```
 
-**使用示例**
+**使用示例：**
 
 ```js
 const path = require('path')
@@ -148,12 +148,12 @@ const { build } = require('vite')
 
 ## `resolveConfig` {#resolveconfig}
 
-**类型校验**
+**类型校验：**
 
 ```ts
 async function resolveConfig(
   inlineConfig: InlineConfig,
   command: 'build' | 'serve',
   defaultMode?: string
 ): Promise<ResolvedConfig>
-```
+```

guide/api-plugin.md

@@ -34,9 +34,9 @@ Vite 插件扩展了设计出色的 Rollup 接口，带有一些 Vite 独有的
 import vitePlugin from 'vite-plugin-feature'
 import rollupPlugin from 'rollup-plugin-feature'
 
-export default {
+export default defineConfig({
   plugins: [vitePlugin(), rollupPlugin()]
-}
+})
 ```
 
 假值的插件将被忽略，可以用来轻松地启用或停用插件。
@@ -55,11 +55,12 @@ export default function framework(config) {
 
 ```js
 // vite.config.js
+import { defineConfig } from 'vite'
 import framework from 'vite-plugin-framework'
 
-export default {
+export default defineConfig({
   plugins: [framework()]
-}
+})
 ```
 
 ## 简单示例 {#simple-examples}
@@ -429,16 +430,17 @@ function myPlugin() {
 ```js
 // vite.config.js
 import example from 'rollup-plugin-example'
+import { defineConfig } from 'vite'
 
-export default {
+export default defineConfig({
   plugins: [
     {
       ...example(),
       enforce: 'post',
       apply: 'build'
     }
   ]
-}
+})
 ```
 
 查看 [Vite Rollup 插件](https://vite-rollup-plugins.patak.dev) 获取兼容的官方 Rollup 插件列表及其使用指南。

guide/backend-integration.md

@@ -8,7 +8,7 @@
 
    ```js
    // vite.config.js
-   export default {
+   export default defineConfig({
      build: {
        // 在 outDir 中生成 manifest.json
        manifest: true,
@@ -17,14 +17,7 @@
          input: '/path/to/main.js'
        }
      }
-   }
-   ```
-
-   如果你使用了 [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 插件或者手动开启 [`build.dynamicImportPolyfill` 选项](/config/#build-polyfilldynamicimport)，请记得将 [dynamic import polyfill](/config/#build-polyfilldynamicimport) 添加到入口处，因为它并不会被自动注入：
-
-   ```js
-   // 添加到你应用入口文件的开头
-   import 'vite/dynamic-import-polyfill'
+   })
    ```
 
 2. 在开发环境中，在服务器的 HTML 模板中注入以下内容（用正在运行的本地 URL 替换 `http://localhost:3000`）：

guide/build.md

@@ -32,13 +32,13 @@ defaults and supports es6-module and supports es6-module-dynamic-import, not ope
 
 ```js
 // vite.config.js
-module.exports = {
+module.exports = defineConfig({
   build: {
     rollupOptions: {
       // https://rollupjs.org/guide/en/#big-list-of-options
     }
   }
-}
+})
 ```
 
 例如，你可以使用仅在构建期间应用的插件来指定多个 Rollup 输出。
@@ -49,13 +49,13 @@ module.exports = {
 
 ```js
 // vite.config.js
-module.exports = {
+module.exports = defineConfig({
   build: {
     watch: {
       // https://rollupjs.org/guide/en/#watch-options
     }
   }
-}
+})
 ```
 
 ## 多页面应用模式 {#multi-page-app}
@@ -79,8 +79,9 @@ module.exports = {
 ```js
 // vite.config.js
 const { resolve } = require('path')
+const { defineConfig } = require('vite')
 
-module.exports = {
+module.exports = defineConfig({
   build: {
     rollupOptions: {
       input: {
@@ -89,7 +90,7 @@ module.exports = {
       }
     }
   }
-}
+})
 ```
 
 如果你指定了另一个根目录，请记住，在解析输入路径时，`__dirname` 的值将仍然是 vite.config.js 文件所在的目录。因此，你需要把对应入口文件的 `root` 的路径添加到 `resolve` 的参数中。
@@ -103,12 +104,14 @@ module.exports = {
 ```js
 // vite.config.js
 const path = require('path')
+const { defineConfig } = require('vite')
 
-module.exports = {
+module.exports = defineConfig({
   build: {
     lib: {
       entry: path.resolve(__dirname, 'lib/main.js'),
-      name: 'MyLib'
+      name: 'MyLib',
+      fileName: (format) => `my-lib.${format}.js`
     },
     rollupOptions: {
       // 确保外部化处理那些你不想打包进库的依赖
@@ -121,7 +124,7 @@ module.exports = {
       }
     }
   }
-}
+})
 ```
 
 使用如上配置运行 `vite build` 时，将会使用一套面向库的 Rollup 预设，并且将为该库提供两种构建格式：`es` 和 `umd` (可在 `build.lib` 中配置)：