Merge branch 'main' into dev

Author: ShenQingchuan

README.md

@@ -1,3 +1,8 @@
+> ### 敬请所有读者注意
+>
+> - 原则上这里只进行英文版对应的翻译工作，如果觉得原文有改进之处，或任何不仅针对中文版，而受益所有语言版本的想法，建议直接在英文版仓库讨论。
+> - **原则上这里不适合讨论 Vite 的使用问题**，建议相关问题在 Vite 的 [issues 区](https://github.com/vitejs/vite/issues)、[Vite 官方讨论区](https://chat.vitejs.dev/) 或各大主流技术社区讨论，以便得到更多帮助和更充分的讨论。
+
 <p align="center">
   <a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer">
     <img width="180" src="https://vitejs.dev/logo.svg" alt="Vite logo">
@@ -34,12 +39,7 @@ Vite （法语意为 “迅速”，发音 /vit/）是一种全新的前端构
 
 贡献指南敬请查看本仓库的 [Wiki](https://github.com/vitejs/docs-cn/wiki) 区。
 
-**注意：**
-
-- 原则上这里只进行英文版对应的翻译工作，如果觉得原文有改进之处，或任何不仅针对中文版，而受益所有语言版本的想法，建议直接在英文版仓库讨论。
-- 原则上这里不适合讨论 Vite 的使用问题，建议相关问题在 Vite 的 [issues 区](https://github.com/vitejs/vite/issues)、[Vite 官方讨论区](https://chat.vitejs.dev/) 或各大主流技术社区讨论，以便得到更多人的帮助和更充分的讨论。
-
-## 📥 如何本地开发
+## 📥 如何开始编辑
 
 ```bash
 # 克隆本仓库

guide/api-plugin.md

@@ -75,7 +75,7 @@ export default function myPlugin() {
   const virtualFileId = '@my-virtual-file'
 
   return {
-    name: 'my-plugin', // 必须的，将会显示在 warning 和 error 中
+    name: 'my-plugin', // 必须的，将会在 warning 和 error 中显示
     resolveId(id) {
       if (id === virtualFileId) {
         return virtualFileId
@@ -139,9 +139,9 @@ export default function myPlugin() {
 - [`buildEnd`](https://rollupjs.org/guide/en/#buildend)
 - [`closeBundle`](https://rollupjs.org/guide/en/#closebundle)
 
-请注意 [`moduleParsed`](https://rollupjs.org/guide/en/#moduleparsed) 钩子 **不是** 在开发中被调用的，因为 Vite 为了性能会避免完整的 AST 解析。
+请注意 [`moduleParsed`](https://rollupjs.org/guide/en/#moduleparsed) 钩子在开发中是 **不会** 被调用的，因为 Vite 为了性能会避免完整的 AST 解析。
 
-[Output Generation Hooks](https://rollupjs.org/guide/en/#output-generation-hooks)（除了 `closeBundle`) **不是** 在开发中被调用的。你可以认为 Vite 的开发服务器只调用了 `rollup.rollup()` 而没有调用 `bundle.generate()`。
+[Output Generation Hooks](https://rollupjs.org/guide/en/#output-generation-hooks)（除了 `closeBundle`) 在开发中是 **不会** 被调用的。你可以认为 Vite 的开发服务器只调用了 `rollup.rollup()` 而没有调用 `bundle.generate()`。
 
 ## Vite 独有钩子 {#vite-specific-hooks}
 
@@ -152,7 +152,7 @@ Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子
 - **类型：** `(config: UserConfig, env: { mode: string, command: string }) => UserConfig | null | void`
 - **种类：** `sync`, `sequential`
 
-  在被解析之前修改 Vite 配置。钩子接收原始用户配置（命令行选项指定的会与配置文件合并）和一个描述配置环境的变量，包含正在使用的 `mode` 和 `command`。它可以返回一个将被深度合并到现有配置中的部分配置对象，或者直接改变配置（如果默认的合并不能达到预期的结果）。
+  在解析 Vite 配置前调用。钩子接收原始用户配置（命令行选项指定的会与配置文件合并）和一个描述配置环境的变量，包含正在使用的 `mode` 和 `command`。它可以返回一个将被深度合并到现有配置中的部分配置对象，或者直接改变配置（如果默认的合并不能达到预期的结果）。
 
   **示例：**
 
@@ -203,12 +203,12 @@ Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子
         config = resolvedConfig
       },
 
-      // 使用其他钩子存储的配置
+      // 在其他钩子中使用存储的配置
       transform(code, id) {
         if (config.command === 'serve') {
-          // serve: 用于启动开发服务器的插件
+          // serve: 由开发服务器调用的插件
         } else {
-          // build: 调用 Rollup 的插件
+          // build: 由 Rollup 调用的插件
         }
       }
     }
@@ -274,7 +274,7 @@ Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子
   }
   ```
 
-  注意 `configureServer` 在运行生产版本时不会被调用，所以其他钩子需要注意防止它的缺失。
+  注意 `configureServer` 在运行生产版本时不会被调用，所以其他钩子需要防范它缺失。
 
 ### `transformIndexHtml` {#transformindexhtml}
 
@@ -402,7 +402,7 @@ Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子
 
 ## 情景应用 {#conditional-application}
 
-默认情况下插件在预览（serve）和构建（build）模式中都会调用。如果插件只需要在预览或构建期间有条件地应用，请使用 `apply` 属性指明它们仅在 `'build'` 或 `'serve'` 模式时调用：
+默认情况下插件在开发（serve）和构建（build）模式中都会调用。如果插件只需要在预览或构建期间有条件地应用，请使用 `apply` 属性指明它们仅在 `'build'` 或 `'serve'` 模式时调用：
 
 ```js
 function myPlugin() {
@@ -417,7 +417,7 @@ function myPlugin() {
 
 相当数量的 Rollup 插件将直接作为 Vite 插件工作（例如：`@rollup/plugin-alias` 或 `@rollup/plugin-json`），但并不是所有的，因为有些插件钩子在非构建式的开发服务器上下文中没有意义。
 
-一般来说，只要一个 Rollup 插件符合以下标准，那么它应该只是作为一个 Vite 插件:
+一般来说，只要 Rollup 插件符合以下标准，它就应该像 Vite 插件一样工作：
 
 - 没有使用 [`moduleParsed`](https://rollupjs.org/guide/en/#moduleparsed) 钩子。
 - 它在打包钩子和输出钩子之间没有很强的耦合。
@@ -445,7 +445,7 @@ export default {
 
 ## 路径规范化 {#path-normalization}
 
-Vite 对路径进行了规范化处理，在解析路径时使用 POSIX 分隔符（ / ），同时保留了 Windows中 的卷名。而另一方面，Rollup 在默认情况下保持解析的路径不变，因此解析的路径在 Windows 中会使用 win32 分隔符（ \\ ）。然而，Rollup 插件会从 `@rollup/pluginutils` 中使用一个 [`normalizePath` 工具函数](https://github.com/rollup/plugins/tree/master/packages/pluginutils#normalizepath)，它在执行比较之前将分隔符转换为 POSIX。所以意味着当这些插件在 Vite 中使用时，`include` 和 `exclude` 两个配置模式，以及与已解析路径比较相似的路径会正常工作。
+Vite 对路径进行了规范化处理，在解析路径时使用 POSIX 分隔符（ / ），同时保留了 Windows 中的卷名。而另一方面，Rollup 在默认情况下保持解析的路径不变，因此解析的路径在 Windows 中会使用 win32 分隔符（ \\ ）。然而，Rollup 插件会使用 `@rollup/pluginutils` 内部的 [`normalizePath` 工具函数](https://github.com/rollup/plugins/tree/master/packages/pluginutils#normalizepath)，它在执行比较之前将分隔符转换为 POSIX。所以意味着当这些插件在 Vite 中使用时，`include` 和 `exclude` 两个配置模式，以及与已解析路径比较相似的路径会正常工作。
 
 所以对于 Vite 插件来说，在将路径与已解析的路径进行比较时，首先规范化路径以使用 POSIX 分隔符是很重要的。从 `vite` 模块中也导出了一个等效的 `normalizePath` 工具函数。
 

guide/assets.md

@@ -24,11 +24,11 @@ document.getElementById('hero-img').src = imgUrl
 
 - 引用的资源作为构建资源图的一部分包括在内，将生成散列文件名，并可以由插件进行处理以进行优化。
 
-- 较小的资源体积小于 [`assetsInlineLimit` 选项值](/config/#assetsinlinelimit) 则会被内联为 base64 data URL。
+- 较小的资源体积小于 [`assetsInlineLimit` 选项值](/config/#build-assetsinlinelimit) 则会被内联为 base64 data URL。
 
 ### 显式 URL 引入 {#explicit-url-imports}
 
-未被包含在内部列表中的、或者在 `assetsInclude` 中的资源，可以使用 `?url` 后缀显式导入为一个 URL。这十分有用，例如，要导入 [Houdini Paint Worklets](https://houdini.how/usage) 时：
+未被包含在内部列表或 `assetsInclude` 中的资源，可以使用 `?url` 后缀显式导入为一个 URL。这十分有用，例如，要导入 [Houdini Paint Worklets](https://houdini.how/usage) 时：
 
 ```js
 import workletURL from 'extra-scalloped-border/worklet.js?url'
@@ -72,9 +72,9 @@ import InlineWorker from './shader.js?worker&inline'
 
 - 不会被源码引用（例如 `robots.txt`）
 - 必须保持原有文件名（没有经过 hash）
-- ...或者你只是不想为了获取 URL 而首先导入该资源
+- ...或者你压根不想引入该资源，只是想得到其 URL。
 
-那么你可以将该资源放在一个特别的 `public` 目录中，它应位于你的项目根目录。该目录中的资源应该在开发时能直接通过 `/` 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。
+那么你可以将该资源放在指定的 `public` 目录中，它应位于你的项目根目录。该目录中的资源在开发时能直接通过 `/` 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。
 
 目录默认是 `<root>/public`，但可以通过 [`publicDir` 选项](/config/#publicdir) 来配置。
 

guide/build.md

@@ -4,7 +4,7 @@
 
 ## 浏览器兼容性 {#browser-compatibility}
 
-生产版本会假设你已实现现代 JavaScript 语法的支持。默认情况下，vite 是为 [支持原生 ESM script 标签](https://caniuse.com/es6-module) 和 [支持原生 ESM 动态导入](https://caniuse.com/es6-module-dynamic-import) 的浏览器服务的。作为参考，vite 使用这个 [browserslist](https://github.com/browserslist/browserslist) 作为查询标准：
+用于生产环境的构建包会假设目标浏览器支持现代 JavaScript 语法。默认情况下，vite 的目标浏览器是指能够 [支持原生 ESM script 标签](https://caniuse.com/es6-module) 和 [支持原生 ESM 动态导入](https://caniuse.com/es6-module-dynamic-import) 的。作为参考，vite 使用这个 [browserslist](https://github.com/browserslist/browserslist) 作为查询标准：
 
 ```
 defaults and supports es6-module and supports es6-module-dynamic-import, not opera > 0, not samsung > 0, not and_qq > 0
@@ -20,7 +20,7 @@ defaults and supports es6-module and supports es6-module-dynamic-import, not ope
 
 - 相关内容：[静态资源处理](./assets)
 
-如果你需要在嵌套的公共路径下部署项目，只需指定 [`build.base` 配置项](/config/#base)，然后所有资源的路径都将据此配置重写。这个选项也可以通过命令行参数指定，例如 `vite build --base=/my/public/path/`。
+如果你需要在嵌套的公共路径下部署项目，只需指定 [`base` 配置项](/config/#base)，然后所有资源的路径都将据此配置重写。这个选项也可以通过命令行参数指定，例如 `vite build --base=/my/public/path/`。
 
 由 JS 引入的资源 URL，CSS 中的 `url()` 引用以及 `.html` 文件中引用的资源在构建过程中都会自动调整，以适配此选项。
 
@@ -43,7 +43,7 @@ module.exports = {
 
 例如，你可以使用仅在构建期间应用的插件来指定多个 Rollup 输出。
 
-## 文件变化时重新编译 {#rebuild-on-files-changs}
+## 文件变化时重新构建 {#rebuild-on-files-changs}
 
 你可以使用 `vite build --watch` 来启用 rollup 的监听器。或者，你可以直接通过 `build.watch` 调整底层的 [`WatcherOptions`](https://rollupjs.org/guide/en/#watch-options) 选项：
 
@@ -92,13 +92,13 @@ module.exports = {
 }
 ```
 
-如果你指定了另一个根目录，请记住，在解析输入路径时，`__dirname` 的值将仍然是 vite.config.js 文件所在的目录。因此，你需要把 `root` 的路径添加到 `resolve` 的参数中。
+如果你指定了另一个根目录，请记住，在解析输入路径时，`__dirname` 的值将仍然是 vite.config.js 文件所在的目录。因此，你需要把对应入口文件的 `root` 的路径添加到 `resolve` 的参数中。
 
 ## 库模式 {#library-mode}
 
-当你开发面向浏览器的库时，你可能会将大部分时间花在该库的测试/演示页面上。使用 Vite 可以使得你的 `index.html` 获得如丝般顺滑的开发体验。
+当你开发面向浏览器的库时，你可能会将大部分时间花在该库的测试/演示页面上。在 Vite 中你可以使用 `index.html` 获得如丝般顺滑的开发体验。
 
-当需要构建你的库用于发布时，请使用 [`build.lib` 配置项](/config/#build-lib)，请确保将你不想打包进你库中的依赖进行外部化处理，例如 `vue` 或 `react`：
+当你以发布为目的构建库时，请使用 [`build.lib` 配置项](/config/#build-lib)，以确保将那些你不想打包进库的依赖进行外部化处理，例如 `vue` 或 `react`：
 
 ```js
 // vite.config.js
@@ -111,7 +111,7 @@ module.exports = {
       name: 'MyLib'
     },
     rollupOptions: {
-      // 请确保外部化那些你的库中不需要的依赖
+      // 确保外部化处理那些你不想打包进库的依赖
       external: ['vue'],
       output: {
         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量

guide/comparisons.md

@@ -1,16 +1,16 @@
-# 比较 {#comparisons-with-other-no-bundler-solutions}
+# 与其它非打包解决方案比较 {#comparisons-with-other-no-bundler-solutions}
 
 ## Snowpack {#snowpack}
 
-[Snowpack](https://www.snowpack.dev/) 也是一个与 Vite 十分类似的非构建式原生 ESM 开发服务器。除了不同的实现细节外，这两个项目在技术上比传统工具有很多共同优势。Vite 的依赖预绑定也受到了 Snowpack v1（现在是 [`esinstall`](https://github.com/snowpackjs/snowpack/tree/main/esinstall)）的启发。这两个项目之间的一些主要区别是：
+[Snowpack](https://www.snowpack.dev/) 也是一个与 Vite 十分类似的非构建式原生 ESM 开发服务器。除了不同的实现细节外，这两个项目在技术上比传统工具有很多共同优势。Vite 的依赖预构建也受到了 Snowpack v1（现在是 [`esinstall`](https://github.com/snowpackjs/snowpack/tree/main/esinstall)）的启发。这两个项目之间的一些主要区别是：
 
 **生产构建**
 
 Snowpack 的默认构建输出是未打包的：它将每个文件转换为单独的构建模块，然后将这些模块提供给执行实际绑定的不同“优化器”。这么做的好处是，你可以选择不同终端打包器，以适应不同需求（例如 webpack, Rollup，甚至是 ESbuild），缺点是体验有些支离破碎 —— 例如，`esbuild` 优化器仍然是不稳定的，Rollup 优化器也不是官方维护，而不同的优化器又有不同的输出和配置。
 
 为了提供更流畅的体验，Vite 选择了与单个打包器（Rollup）进行更深入的集成。Vite 还支持一套 [通用插件 API](./api-plugin) 扩展了 Rollup 的插件接口，开发和构建两种模式都适用。
 
-Vite 支持广泛的功能，构建过程也集成度更高，以下功能目前在 Snowpack 构建优化器中不可用：
+由于构建过程的集成度更高，Vite 支持目前在 Snowpack 构建优化器中不可用的多种功能：
 
 - [多页面应用支持](./build#multi-page-app)
 - [库模式](./build#library-mode)
@@ -25,15 +25,15 @@ Vite 使用 [esbuild](https://esbuild.github.io/) 而不是 Rollup 来进行依
 
 **Monorepo 支持**
 
-Vite 能够支持 monorepo，我们已经有用户成功地将 Vite 基于 monorepo 模式，与 Yarn, Yarn 2 和 PNPM 使用。
+Vite 能够支持 monorepo，我们已经有用户成功地将 Vite 与基于 Yarn, Yarn 2 和 PNPM 的 monorepo 一起使用。
 
 **CSS 预处理器支持**
 
 Vite 为 Sass and Less 提供了更精细化的支持，包括改进 `@import` 解析（可使用别名与 npm 依赖）和 [提供 `url()` 内联引入与变基](./features#import-inlining-and-rebasing)。
 
 **Vue 第一优先级支持**
 
-Vite 最初是作为 [Vue.js](https://vuejs.org/) 开发工具的未来基础而创建的。尽管 Vite 2.0 版本完全不依赖于任何框架，但官方 Vue 插件仍然对 Vue 的单文件组件格式提供了一流的支持，涵盖了所有高级特性，如模板资源引用解析、`<script setup>`，`<style module>`，自定义块等等。除此之外，Vite 还对 Vue 单文件组件提供了细粒度的 HMR。举个例子，更新一个单文件组件的 `<template>` 或 `<style>` 会执行不重置其状态的热更新。
+Vite 最初是作为 [Vue.js](https://vuejs.org/) 开发工具的未来基础而创建的。尽管 Vite 2.0 版本完全不依赖于任何框架，但官方 Vue 插件仍然对 Vue 的单文件组件格式提供了第一优先级的支持，涵盖了所有高级特性，如模板资源引用解析、`<script setup>`，`<style module>`，自定义块等等。除此之外，Vite 还对 Vue 单文件组件提供了细粒度的 HMR。举个例子，更新一个单文件组件的 `<template>` 或 `<style>` 会执行不重置其状态的热更新。
 
 ## WMR {#wmr}
 
@@ -45,6 +45,6 @@ WMR 主要是为了 [Preact](https://preactjs.com/) 项目而设计，并为其
 
 [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/)（曾经是 `es-dev-server`）是一个伟大的项目，基于 koa 的 Vite 1.0 开发服务器就是受到了它的启发。
 
-`@web/dev-server` 适用范围不是很广。它并未提供官方的框架集成，并且需要为生产构建手动设置 Rollup 配置。然而，它的父项目确实提供了一组优秀的 Rollup 插件。
+`@web/dev-server` 适用范围不是很广。它并未提供官方的框架集成，并且需要为生产构建手动设置 Rollup 配置。
 
-总的来说，与 `@web/dev-server` 相比，Vite 是一个更注重自身/更高层面的工具，旨在提供开箱即用的工作流。话虽如此，但 `@web/dev-server` 这个项目群包含了许多其他的优秀工具，也可以使 Vite 用户受益。
+总的来说，与 `@web/dev-server` 相比，Vite 是一个更注重自身/更高层面的工具，旨在提供开箱即用的工作流。话虽如此，但 `@web` 这个项目群包含了许多其他的优秀工具，也可以使 Vite 用户受益。