From db9fdcd76a8b27ac39ccc14f45b1712236df36c3 Mon Sep 17 00:00:00 2001 From: clocher Zhong Date: Thu, 3 Mar 2022 15:44:14 +0800 Subject: [PATCH 01/38] feat(config): hmr add disable port config (#6624) Co-authored-by: zhongyi Co-authored-by: Bjorn Lu --- config/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/config/index.md b/config/index.md index d4ee7a96..27234b01 100644 --- a/config/index.md +++ b/config/index.md @@ -508,12 +508,14 @@ export default defineConfig(async ({ command, mode }) => { ### server.hmr -- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }` +- **Type:** `boolean | { protocol?: string, host?: string, port?: number | false, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }` Disable or configure HMR connection (in cases where the HMR websocket must use a different address from the http server). Set `server.hmr.overlay` to `false` to disable the server error overlay. + Set `server.hmr.port` to `false` when connecting to a domain without a port. + `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. Useful if you're using an SSL proxy in front of your dev server. When using `server.middlewareMode` or `server.https`, assigning `server.hmr.server` to your HTTP(S) server will process HMR connection requests through your server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port. From 580e7c56a8c9d5bd50a452854a5eed3ffb2b1828 Mon Sep 17 00:00:00 2001 From: Dominik G Date: Fri, 4 Mar 2022 21:16:49 +0100 Subject: [PATCH 02/38] fix: revert #6340, definePlugin tests, warning box (#7174) Co-authored-by: patak-dev --- config/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/config/index.md b/config/index.md index 27234b01..4d42063e 100644 --- a/config/index.md +++ b/config/index.md @@ -139,9 +139,11 @@ export default defineConfig(async ({ command, mode }) => { - Replacements are performed only when the match is surrounded by word boundaries (`\b`). + ::: warning Because it's implemented as straightforward text replacements without any syntax analysis, we recommend using `define` for CONSTANTS only. For example, `process.env.FOO` and `__APP_VERSION__` are good fits. But `process` or `global` should not be put into this option. Variables can be shimmed or polyfilled instead. + ::: ::: tip NOTE For TypeScript users, make sure to add the type declarations in the `env.d.ts` or `vite-env.d.ts` file to get type checks and Intellisense. From ff8cf0330bc40708d4bfae547e31aac4275a9c36 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 4 Mar 2022 22:30:50 +0100 Subject: [PATCH 03/38] refactor: avoid splitting vendor chunk by default (#6534) --- guide/build.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/guide/build.md b/guide/build.md index aac86a23..1f1f149a 100644 --- a/guide/build.md +++ b/guide/build.md @@ -43,6 +43,20 @@ module.exports = defineConfig({ For example, you can specify multiple Rollup outputs with plugins that are only applied during build. +## Chunking Strategy + +You can configure how chunks are split using `build.rollupOptions.manualChunks` (see [Rollup docs](https://rollupjs.org/guide/en/#outputmanualchunks)). Until Vite 2.7, the default chunking strategy divided the chunks into `index` and `vendor`. It is a good strategy for some SPAs, but it is hard to provide a general solution for every Vite target use case. From Vite 2.8, `manualChunks` is no longer modified by default. You can continue to use the Split Vendor Chunk strategy by adding the `splitVendorChunkPlugin` in your config file: + +```js +// vite.config.js +import { splitVendorChunkPlugin } from 'vite' +module.exports = defineConfig({ + plugins: [splitVendorChunkPlugin()] +}) +``` + +This strategy is also provided as a `splitVendorChunk({ cache: SplitVendorChunkCache })` factory, in case composition with custom logic is needed. `cache.reset()` needs to be called at `buildStart` for build watch mode to work correctly in this case. + ## Rebuild on files changes You can enable rollup watcher with `vite build --watch`. Or, you can directly adjust the underlying [`WatcherOptions`](https://rollupjs.org/guide/en/#watch-options) via `build.watch`: From 2e298d528c531b58e5c7a1e9d0838c8bc5844609 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Sat, 5 Mar 2022 23:14:27 +0800 Subject: [PATCH 04/38] docs: add config env var info (#7180) --- config/index.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/config/index.md b/config/index.md index 4d42063e..ae70f469 100644 --- a/config/index.md +++ b/config/index.md @@ -96,6 +96,22 @@ export default defineConfig(async ({ command, mode }) => { }) ``` +### Environment Variables + +Vite doesn't load `.env` files by default as the files to load can only be determined after evaluating the Vite config, for example, the `root` and `envDir` options affects the loading behaviour. However, you can use the exported `loadEnv` helper to load the specific `.env` file if needed. + +```js +import { defineConfig, loadEnv } from 'vite' + +export default defineConfig(({ command, mode }) => { + // Load env file based on `mode` in the current working directory + const env = loadEnv(mode, process.cwd()) + return { + // build specific config + } +}) +``` + ## Shared Options ### root From 965ba67dfeafbf918a3e5e1433fcec61ea661e58 Mon Sep 17 00:00:00 2001 From: Joel Kuzmarski Date: Sat, 5 Mar 2022 12:56:47 -0600 Subject: [PATCH 05/38] docs: clarify what triggers rebuild for watch flag (#7182) --- guide/build.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/guide/build.md b/guide/build.md index 1f1f149a..a83e7a8d 100644 --- a/guide/build.md +++ b/guide/build.md @@ -72,6 +72,8 @@ module.exports = defineConfig({ }) ``` +With the `--watch` flag enabled, changes to the `vite.config.js`, as well as any files to be bundled, will trigger a rebuild. + ## Multi-Page App Suppose you have the following source code structure: From 729a6c057ed97c3d1fb2465af4f9b990870a4977 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Sun, 6 Mar 2022 16:16:19 +0800 Subject: [PATCH 06/38] docs: explain dep handling in dev and build (#7187) --- guide/dep-pre-bundling.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/guide/dep-pre-bundling.md b/guide/dep-pre-bundling.md index a72e06e6..0afce072 100644 --- a/guide/dep-pre-bundling.md +++ b/guide/dep-pre-bundling.md @@ -28,7 +28,9 @@ This is Vite performing what we call "dependency pre-bundling". This process ser By pre-bundling `lodash-es` into a single module, we now only need one HTTP request instead! -Note that this only applies in development mode. +::: tip NOTE +Dependency pre-bundling only applies in development mode, and uses `esbuild` to convert dependencies to ESM. In production builds, `@rollup/plugin-commonjs` is used instead. +::: ## Automatic Dependency Discovery From d5421b4b68c2ce4f2e51209eeb2bd8df695754cc Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Sun, 6 Mar 2022 17:28:49 +0800 Subject: [PATCH 07/38] docs: clarify rollup plugin order (#7193) --- guide/api-plugin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/api-plugin.md b/guide/api-plugin.md index 01b42980..b3888b0f 100644 --- a/guide/api-plugin.md +++ b/guide/api-plugin.md @@ -458,7 +458,7 @@ In general, as long as a Rollup plugin fits the following criteria then it shoul - It doesn't use the [`moduleParsed`](https://rollupjs.org/guide/en/#moduleparsed) hook. - It doesn't have strong coupling between bundle-phase hooks and output-phase hooks. -If a Rollup plugin only makes sense for the build phase, then it can be specified under `build.rollupOptions.plugins` instead. +If a Rollup plugin only makes sense for the build phase, then it can be specified under `build.rollupOptions.plugins` instead. It will work the same as a Vite plugin with `enforce: 'post'` and `apply: 'build'`. You can also augment an existing Rollup plugin with Vite-only properties: From 8dc533b260401834c1c1e11ec8e46058dd1c5758 Mon Sep 17 00:00:00 2001 From: ShenQingchuan Date: Sun, 6 Mar 2022 21:33:07 +0800 Subject: [PATCH 08/38] docs(cn): fix all conflicts. --- config/index.md | 37 ++++++++++--------------------------- guide/build.md | 18 +++++------------- 2 files changed, 15 insertions(+), 40 deletions(-) diff --git a/config/index.md b/config/index.md index 02962fc8..3df2f9cf 100644 --- a/config/index.md +++ b/config/index.md @@ -92,27 +92,24 @@ export default defineConfig(async ({ command, mode }) => { }) ``` -<<<<<<< HEAD -## 共享配置 {#shared-options} -======= -### Environment Variables +### Environment Variables {#environment-variables} -Vite doesn't load `.env` files by default as the files to load can only be determined after evaluating the Vite config, for example, the `root` and `envDir` options affects the loading behaviour. However, you can use the exported `loadEnv` helper to load the specific `.env` file if needed. +Vite 默认是不加载 `.env` 文件的,因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个,举个例子,`root` 和 `envDir` 选项会影响加载行为。不过当你的确需要时,你可以使用 Vite 导出的 `loadEnv` 函数来加载指定的 `.env` 文件 ```js import { defineConfig, loadEnv } from 'vite' export default defineConfig(({ command, mode }) => { - // Load env file based on `mode` in the current working directory + // 根据当前工作目录中的 `mode` 加载 .env 文件 const env = loadEnv(mode, process.cwd()) return { - // build specific config + // 构建特定配置 } }) ``` -## Shared Options ->>>>>>> 965ba67dfeafbf918a3e5e1433fcec61ea661e58 + +## 共享配置 {#shared-options} ### root {#root} @@ -155,17 +152,11 @@ export default defineConfig(({ command, mode }) => { - 替换只会在匹配到周围是单词边界(`\b`)时执行。 -<<<<<<< HEAD + ::: warning 因为它是不经过任何语法分析,直接替换文本实现的,所以我们建议只对 CONSTANTS 使用 `define`。 例如,`process.env.FOO` 和 `__APP_VERSION__` 就非常适合。但 `process` 或 `global` 不应使用此选项。变量相关应使用 shim 或 polyfill 代替。 -======= - ::: warning - Because it's implemented as straightforward text replacements without any syntax analysis, we recommend using `define` for CONSTANTS only. - - For example, `process.env.FOO` and `__APP_VERSION__` are good fits. But `process` or `global` should not be put into this option. Variables can be shimmed or polyfilled instead. ::: ->>>>>>> 965ba67dfeafbf918a3e5e1433fcec61ea661e58 ::: tip NOTE 对于使用 TypeScript 的开发者来说,请确保在 `env.d.ts` 或 `vite-env.d.ts` 文件中添加类型声明,以获得类型检查以及代码提示。 @@ -531,23 +522,15 @@ export default defineConfig(({ command, mode }) => { ### server.hmr {#server-hmr} -<<<<<<< HEAD -- **类型:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }` -======= -- **Type:** `boolean | { protocol?: string, host?: string, port?: number | false, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }` ->>>>>>> 965ba67dfeafbf918a3e5e1433fcec61ea661e58 +- **类型:** `boolean | { protocol?: string, host?: string, port?: number | false, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }` 禁用或配置 HMR 连接(用于 HMR websocket 必须使用不同的 http 服务器地址的情况)。 设置 `server.hmr.overlay` 为 `false` 可以禁用开发服务器错误的屏蔽。 -<<<<<<< HEAD - `clientPort` 是一个高级选项,只在客户端的情况下覆盖端口,这允许你为 websocket 提供不同的端口,而并非在客户端代码中查找。如果需要在 dev-server 情况下使用 SSL 代理,这非常有用。 -======= - Set `server.hmr.port` to `false` when connecting to a domain without a port. + 当连接到某个域名而不需要端口时,可以设置 `server.hmr.port` 为 `false`。 - `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. Useful if you're using an SSL proxy in front of your dev server. ->>>>>>> 965ba67dfeafbf918a3e5e1433fcec61ea661e58 + `clientPort` 是一个高级选项,只在客户端的情况下覆盖端口,这允许你为 websocket 提供不同的端口,而并非在客户端代码中查找。如果需要在 dev-server 情况下使用 SSL 代理,这非常有用。 当使用 `server.middlewareMode` 或 `server.https` 时,你需将 `server.hmr.server` 指定为你 HTTP(S) 的服务器,这将通过你的服务器来处理 HMR 的安全连接请求。这在使用自签证书或想通过网络在某端口暴露 Vite 的情况下,非常有用。 diff --git a/guide/build.md b/guide/build.md index c4098340..03f31e1f 100644 --- a/guide/build.md +++ b/guide/build.md @@ -43,12 +43,9 @@ module.exports = defineConfig({ 例如,你可以使用仅在构建期间应用的插件来指定多个 Rollup 输出。 -<<<<<<< HEAD -## 文件变化时重新构建 {#rebuild-on-files-changs} -======= -## Chunking Strategy +## 产物分块策略 {#chunking-strategy} -You can configure how chunks are split using `build.rollupOptions.manualChunks` (see [Rollup docs](https://rollupjs.org/guide/en/#outputmanualchunks)). Until Vite 2.7, the default chunking strategy divided the chunks into `index` and `vendor`. It is a good strategy for some SPAs, but it is hard to provide a general solution for every Vite target use case. From Vite 2.8, `manualChunks` is no longer modified by default. You can continue to use the Split Vendor Chunk strategy by adding the `splitVendorChunkPlugin` in your config file: +你可以配置在使用 `build.rollupOptions.manualChunks` 时各个 chunk 是如何分割的(查看 [Rollup 相应文档](https://rollupjs.org/guide/en/#outputmanualchunks))。到 Vite 2.7 时,默认的策略是将 chunk 分割为 `index` 和 `vendor`。这对一些 SPA 来说是好的策略,但是要对每一种用例目标都提供一种通用解决方案是非常困难的。从 Vite 2.8 起,`manualChunks` 默认情况下不再被更改。你可以通过在配置文件中添加 `splitVendorChunkPlugin` 来继续使用 “分割 Vendor Chunk” 策略: ```js // vite.config.js @@ -60,8 +57,7 @@ module.exports = defineConfig({ This strategy is also provided as a `splitVendorChunk({ cache: SplitVendorChunkCache })` factory, in case composition with custom logic is needed. `cache.reset()` needs to be called at `buildStart` for build watch mode to work correctly in this case. -## Rebuild on files changes ->>>>>>> 965ba67dfeafbf918a3e5e1433fcec61ea661e58 +## 文件变化时重新构建 {#rebuild-on-files-changs} 你可以使用 `vite build --watch` 来启用 rollup 的监听器。或者,你可以直接通过 `build.watch` 调整底层的 [`WatcherOptions`](https://rollupjs.org/guide/en/#watch-options) 选项: @@ -76,13 +72,9 @@ module.exports = defineConfig({ }) ``` -<<<<<<< HEAD -## 多页面应用模式 {#multi-page-app} -======= -With the `--watch` flag enabled, changes to the `vite.config.js`, as well as any files to be bundled, will trigger a rebuild. +当启用 `--watch` 标志时,对 `vite.config.js` 的改动,以及任何要打包的文件,都将触发重新构建。 -## Multi-Page App ->>>>>>> 965ba67dfeafbf918a3e5e1433fcec61ea661e58 +## 多页面应用模式 {#multi-page-app} 假设你有下面这样的项目文件结构 From b2c205455dd3459d83f63410de0cd876cf5abb70 Mon Sep 17 00:00:00 2001 From: yoho <907415276@qq.com> Date: Mon, 7 Mar 2022 17:17:15 +0800 Subject: [PATCH 09/38] docs: glob support alias path (#7204) --- guide/features.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/features.md b/guide/features.md index c7fd2424..a8921826 100644 --- a/guide/features.md +++ b/guide/features.md @@ -317,7 +317,7 @@ const modules = { Note that: - 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). +- 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/#resolve-alias)). - The glob matching is done via `fast-glob` - check out its documentation for [supported glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax). - You should also be aware that glob imports do not accept variables, you need to directly pass the string pattern. - The glob patterns cannot contain the same quote string (i.e. `'`, `"`, `` ` ``) as outer quotes, e.g. `'/Tom\'s files/**'`, use `"/Tom's files/**"` instead. From ddfcda0b54af0413473a722788f7f746abe6446a Mon Sep 17 00:00:00 2001 From: Rom Date: Tue, 8 Mar 2022 09:12:55 +0100 Subject: [PATCH 10/38] fix: deprecate `{ assert: { type: raw }}` in favor of `{ as: raw }` (fix #7017) (#7215) --- guide/features.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/guide/features.md b/guide/features.md index a8921826..7bf87064 100644 --- a/guide/features.md +++ b/guide/features.md @@ -298,10 +298,10 @@ const modules = { } ``` -`import.meta.glob` and `import.meta.globEager` also support importing files as strings, similar to [Importing Asset as String](https://vitejs.dev/guide/assets.html#importing-asset-as-string). Here, we use the [Import Assertions](https://github.com/tc39/proposal-import-assertions#synopsis) syntax to import. +`import.meta.glob` and `import.meta.globEager` also support importing files as strings (similar to [Importing Asset as String](https://vitejs.dev/guide/assets.html#importing-asset-as-string)) with the [Import Reflection](https://github.com/tc39/proposal-import-reflection) syntax: ```js -const modules = import.meta.glob('./dir/*.js', { assert: { type: 'raw' } }) +const modules = import.meta.glob('./dir/*.js', { as: 'raw' }) ``` The above will be transformed into the following: From efa1237235023f361ecba91549913785f7872c36 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Wed, 9 Mar 2022 14:32:10 +0800 Subject: [PATCH 11/38] docs(lib): show example entry file (#7233) --- guide/build.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/guide/build.md b/guide/build.md index a83e7a8d..5f6669ed 100644 --- a/guide/build.md +++ b/guide/build.md @@ -145,6 +145,15 @@ module.exports = defineConfig({ }) ``` +The entry file would contain exports that can be imported by users of your package: + +```js +// lib/main.js +import Foo from './Foo.vue' +import Bar from './Bar.vue' +export { Foo, Bar } +``` + Running `vite build` with this config uses a Rollup preset that is oriented towards shipping libraries and produces two bundle formats: `es` and `umd` (configurable via `build.lib`): ``` From fd4a4a77142c403bd490df8da7192f3ced74ad06 Mon Sep 17 00:00:00 2001 From: "tangmengyu.amber" Date: Wed, 9 Mar 2022 15:39:27 +0800 Subject: [PATCH 12/38] docs(cn): fix all conflicts. --- guide/api-plugin.md | 6 +----- guide/dep-pre-bundling.md | 8 ++------ guide/features.md | 16 ++-------------- 3 files changed, 5 insertions(+), 25 deletions(-) diff --git a/guide/api-plugin.md b/guide/api-plugin.md index f7b39e30..91856009 100644 --- a/guide/api-plugin.md +++ b/guide/api-plugin.md @@ -458,11 +458,7 @@ apply(config, { command }) { - 没有使用 [`moduleParsed`](https://rollupjs.org/guide/en/#moduleparsed) 钩子。 - 它在打包钩子和输出钩子之间没有很强的耦合。 -<<<<<<< HEAD -如果一个 Rollup 插件只在构建阶段有意义,则在 `build.rollupOptions.plugins` 下指定即可。 -======= -If a Rollup plugin only makes sense for the build phase, then it can be specified under `build.rollupOptions.plugins` instead. It will work the same as a Vite plugin with `enforce: 'post'` and `apply: 'build'`. ->>>>>>> ddfcda0b54af0413473a722788f7f746abe6446a +如果一个 Rollup 插件只在构建阶段有意义,则在 `build.rollupOptions.plugins` 下指定即可。它的工作原理与Vite插件的 `enforce: 'post'` 和 `apply: 'build'` 相同。 你也可以用 Vite 独有的属性来扩展现有的 Rollup 插件: diff --git a/guide/dep-pre-bundling.md b/guide/dep-pre-bundling.md index b2a10378..05894c71 100644 --- a/guide/dep-pre-bundling.md +++ b/guide/dep-pre-bundling.md @@ -28,13 +28,9 @@ Pre-bundling dependencies: (正在预构建依赖:) 通过预构建 `lodash-es` 成为一个模块,我们就只需要一个 HTTP 请求了! -<<<<<<< HEAD -请注意,这只会应用在开发模式下。 -======= -::: tip NOTE -Dependency pre-bundling only applies in development mode, and uses `esbuild` to convert dependencies to ESM. In production builds, `@rollup/plugin-commonjs` is used instead. +::: tip 注意 +依赖与构建仅会在开发模式下应用,并会使用 `esbuild` 将依赖转为 ESM 模块。在生产构建中则会使用 `@rollup/plugin-commonjs`。 ::: ->>>>>>> ddfcda0b54af0413473a722788f7f746abe6446a ## 自动依赖搜寻 {#automatic-dependency-discovery} diff --git a/guide/features.md b/guide/features.md index 79aa4cdd..052ecfa9 100644 --- a/guide/features.md +++ b/guide/features.md @@ -298,11 +298,7 @@ const modules = { } ``` -<<<<<<< HEAD -`import.meta.glob` 和 `import.meta.globEager` 都支持以字符串形式导入文件,类似于 [已字符串形式导入资源](https://vitejs.dev/guide/assets.html#importing-asset-as-string)。在这里,我们使用了 [Import Assertions](https://github.com/tc39/proposal-import-assertions#synopsis) 语法对导入进行断言。 -======= -`import.meta.glob` and `import.meta.globEager` also support importing files as strings (similar to [Importing Asset as String](https://vitejs.dev/guide/assets.html#importing-asset-as-string)) with the [Import Reflection](https://github.com/tc39/proposal-import-reflection) syntax: ->>>>>>> ddfcda0b54af0413473a722788f7f746abe6446a +`import.meta.glob` 和 `import.meta.globEager` 都支持以字符串形式导入文件,类似于 [以字符串形式导入资源](https://vitejs.dev/guide/assets.html#importing-asset-as-string)。在这里,我们使用了 [Import Reflection](https://github.com/tc39/proposal-import-reflection) 语法对导入进行断言: ```js const modules = import.meta.glob('./dir/*.js', { as: 'raw' }) @@ -320,19 +316,11 @@ const modules = { 请注意: -<<<<<<< HEAD - 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准 -- 该 Glob 模式会被当成导入标识符:必须是相对路径(以 `./` 开头)或绝对路径(以 `/` 开头,相对于项目根目录解析)。 +- 该 Glob 模式会被当成导入标识符:必须是相对路径(以 `./` 开头)或绝对路径(以 `/` 开头,相对于项目根目录解析)或一个别名路径(请看 [`resolve.alias` 选项](/config/#resolve-alias))。 - Glob 匹配是使用 `fast-glob` 来实现的 —— 阅读它的文档来查阅 [支持的 Glob 模式](https://github.com/mrmlnc/fast-glob#pattern-syntax)。 - 你还需注意,glob 的导入不接受变量,你应直接传递字符串模式。 - glob 模式不能包含与包裹引号相同的引号字符串(其中包括 `'`,`"`,`` ` ``),例如,如果你想实现 `'/Tom\'s files/**'` 的效果,请使用 `"/Tom's files/**"` 代替。 -======= -- 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/#resolve-alias)). -- The glob matching is done via `fast-glob` - check out its documentation for [supported glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax). -- You should also be aware that glob imports do not accept variables, you need to directly pass the string pattern. -- The glob patterns cannot contain the same quote string (i.e. `'`, `"`, `` ` ``) as outer quotes, e.g. `'/Tom\'s files/**'`, use `"/Tom's files/**"` instead. ->>>>>>> ddfcda0b54af0413473a722788f7f746abe6446a ## WebAssembly {#webassembly} From c56749bff4c55fc6d75fccfb74ef48372e18e945 Mon Sep 17 00:00:00 2001 From: KnowsCount Date: Thu, 10 Mar 2022 11:55:58 +0800 Subject: [PATCH 13/38] Apply suggestions from code review --- guide/build.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/guide/build.md b/guide/build.md index ac3c5df5..27e248c2 100644 --- a/guide/build.md +++ b/guide/build.md @@ -143,10 +143,7 @@ module.exports = defineConfig({ }) ``` -<<<<<<< HEAD -使用如上配置运行 `vite build` 时,将会使用一套面向库的 Rollup 预设,并且将为该库提供两种构建格式:`es` 和 `umd` (可在 `build.lib` 中配置): -======= -The entry file would contain exports that can be imported by users of your package: +入口文件将包含可以由你的包的用户导入的导出: ```js // lib/main.js @@ -155,7 +152,7 @@ import Bar from './Bar.vue' export { Foo, Bar } ``` -Running `vite build` with this config uses a Rollup preset that is oriented towards shipping libraries and produces two bundle formats: `es` and `umd` (configurable via `build.lib`): +使用如上配置运行 `vite build` 时,将会使用一套面向库的 Rollup 预设,并且将为该库提供两种构建格式:`es` 和 `umd` (可在 `build.lib` 中配置): >>>>>>> efa1237235023f361ecba91549913785f7872c36 ``` From 3d99a2548397687a472fbefe563dd8f5711752bd Mon Sep 17 00:00:00 2001 From: KnowsCount Date: Thu, 10 Mar 2022 11:56:13 +0800 Subject: [PATCH 14/38] Apply suggestions from code review --- guide/build.md | 1 - 1 file changed, 1 deletion(-) diff --git a/guide/build.md b/guide/build.md index 27e248c2..5f154253 100644 --- a/guide/build.md +++ b/guide/build.md @@ -153,7 +153,6 @@ export { Foo, Bar } ``` 使用如上配置运行 `vite build` 时,将会使用一套面向库的 Rollup 预设,并且将为该库提供两种构建格式:`es` 和 `umd` (可在 `build.lib` 中配置): ->>>>>>> efa1237235023f361ecba91549913785f7872c36 ``` $ vite build From 2678e3427ba345de55b31f1e5255939b4b8afbb4 Mon Sep 17 00:00:00 2001 From: Georgiy Bukharov Date: Thu, 10 Mar 2022 18:59:07 +0400 Subject: [PATCH 15/38] docs(build): fix chunking strategy info (#7253) --- guide/build.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/build.md b/guide/build.md index 5f6669ed..8216bcbf 100644 --- a/guide/build.md +++ b/guide/build.md @@ -45,7 +45,7 @@ For example, you can specify multiple Rollup outputs with plugins that are only ## Chunking Strategy -You can configure how chunks are split using `build.rollupOptions.manualChunks` (see [Rollup docs](https://rollupjs.org/guide/en/#outputmanualchunks)). Until Vite 2.7, the default chunking strategy divided the chunks into `index` and `vendor`. It is a good strategy for some SPAs, but it is hard to provide a general solution for every Vite target use case. From Vite 2.8, `manualChunks` is no longer modified by default. You can continue to use the Split Vendor Chunk strategy by adding the `splitVendorChunkPlugin` in your config file: +You can configure how chunks are split using `build.rollupOptions.output.manualChunks` (see [Rollup docs](https://rollupjs.org/guide/en/#outputmanualchunks)). Until Vite 2.8, the default chunking strategy divided the chunks into `index` and `vendor`. It is a good strategy for some SPAs, but it is hard to provide a general solution for every Vite target use case. From Vite 2.9, `manualChunks` is no longer modified by default. You can continue to use the Split Vendor Chunk strategy by adding the `splitVendorChunkPlugin` in your config file: ```js // vite.config.js From c082b312a532c9552bf580f6fbbd7a799925d7aa Mon Sep 17 00:00:00 2001 From: ShenQingchuan Date: Sat, 12 Mar 2022 00:49:29 +0800 Subject: [PATCH 16/38] docs(cn): fix all conflicts --- guide/build.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/guide/build.md b/guide/build.md index 11ecb493..012df405 100644 --- a/guide/build.md +++ b/guide/build.md @@ -45,11 +45,7 @@ module.exports = defineConfig({ ## 产物分块策略 {#chunking-strategy} -<<<<<<< HEAD -你可以配置在使用 `build.rollupOptions.manualChunks` 时各个 chunk 是如何分割的(查看 [Rollup 相应文档](https://rollupjs.org/guide/en/#outputmanualchunks))。到 Vite 2.7 时,默认的策略是将 chunk 分割为 `index` 和 `vendor`。这对一些 SPA 来说是好的策略,但是要对每一种用例目标都提供一种通用解决方案是非常困难的。从 Vite 2.8 起,`manualChunks` 默认情况下不再被更改。你可以通过在配置文件中添加 `splitVendorChunkPlugin` 来继续使用 “分割 Vendor Chunk” 策略: -======= -You can configure how chunks are split using `build.rollupOptions.output.manualChunks` (see [Rollup docs](https://rollupjs.org/guide/en/#outputmanualchunks)). Until Vite 2.8, the default chunking strategy divided the chunks into `index` and `vendor`. It is a good strategy for some SPAs, but it is hard to provide a general solution for every Vite target use case. From Vite 2.9, `manualChunks` is no longer modified by default. You can continue to use the Split Vendor Chunk strategy by adding the `splitVendorChunkPlugin` in your config file: ->>>>>>> 2678e3427ba345de55b31f1e5255939b4b8afbb4 +你可以配置在使用 `build.rollupOptions.output.manualChunks` 时各个 chunk 是如何分割的(查看 [Rollup 相应文档](https://rollupjs.org/guide/en/#outputmanualchunks))。到 Vite 2.8 时,默认的策略是将 chunk 分割为 `index` 和 `vendor`。这对一些 SPA 来说是好的策略,但是要对每一种用例目标都提供一种通用解决方案是非常困难的。从 Vite 2.9 起,`manualChunks` 默认情况下不再被更改。你可以通过在配置文件中添加 `splitVendorChunkPlugin` 来继续使用 “分割 Vendor Chunk” 策略: ```js // vite.config.js From db5e3c0aadf613c51e239f728416635a6fbf2163 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Sat, 12 Mar 2022 05:16:01 +0800 Subject: [PATCH 17/38] docs: clarify preprocessor options extension (#7280) --- config/index.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/config/index.md b/config/index.md index ae70f469..be0437ef 100644 --- a/config/index.md +++ b/config/index.md @@ -303,7 +303,7 @@ export default defineConfig(({ command, mode }) => { - **Type:** `Record` - Specify options to pass to CSS pre-processors. Example: + Specify options to pass to CSS pre-processors. The file extensions are used as keys for the options. Example: ```js export default defineConfig({ @@ -311,6 +311,9 @@ export default defineConfig(({ command, mode }) => { preprocessorOptions: { scss: { additionalData: `$injectedColor: orange;` + }, + styl: { + additionalData: `$injectedColor ?= orange` } } } From a5a91d524f1307881c55568b5b9be7f77349c228 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Sat, 12 Mar 2022 05:17:27 +0800 Subject: [PATCH 18/38] docs: clarify postcss-load-config (#7265) --- config/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/index.md b/config/index.md index be0437ef..228caaaa 100644 --- a/config/index.md +++ b/config/index.md @@ -295,7 +295,7 @@ export default defineConfig(({ command, mode }) => { - **Type:** `string | (postcss.ProcessOptions & { plugins?: postcss.Plugin[] })` - Inline PostCSS config (expects the same format as `postcss.config.js`), or a custom path to search PostCSS config from (default is project root). The search is done using [postcss-load-config](https://github.com/postcss/postcss-load-config). + Inline PostCSS config (expects the same format as `postcss.config.js`), or a custom directory to search PostCSS config from (default is project root). The search is done using [postcss-load-config](https://github.com/postcss/postcss-load-config) and only the supported config file names are loaded. Note if an inline config is provided, Vite will not search for other PostCSS config sources. From 11fddc5159ae19aebf988182440da7ee19437e17 Mon Sep 17 00:00:00 2001 From: Jeff Yang <32727188+ydcjeff@users.noreply.github.com> Date: Sat, 12 Mar 2022 20:35:20 +0630 Subject: [PATCH 19/38] docs: add missing server.headers + server.base (#7289) --- config/index.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/config/index.md b/config/index.md index 228caaaa..225d8b2f 100644 --- a/config/index.md +++ b/config/index.md @@ -520,6 +520,12 @@ export default defineConfig(({ command, mode }) => { Configure CORS for the dev server. This is enabled by default and allows any origin. Pass an [options object](https://github.com/expressjs/cors) to fine tune the behavior or `false` to disable. +### server.headers + +- **Type:** `OutgoingHttpHeaders` + + Specify server response headers. + ### server.force - **Type:** `boolean` @@ -603,6 +609,12 @@ async function createServer() { createServer() ``` +### server.base + +- **Type:** `string | undefined` + + Prepend this folder to http requests, for use when proxying vite as a subfolder. Should start and end with the `/` character. + ### server.fs.strict - **Type:** `boolean` From dcef5046da6e03f1a29b35b49cc7e0f60314ad1b Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Sun, 13 Mar 2022 01:31:21 +0800 Subject: [PATCH 20/38] docs: remove vite client script (#7290) --- guide/backend-integration.md | 1 - 1 file changed, 1 deletion(-) diff --git a/guide/backend-integration.md b/guide/backend-integration.md index a30831e7..55a4b87f 100644 --- a/guide/backend-integration.md +++ b/guide/backend-integration.md @@ -33,7 +33,6 @@ If you need a custom integration, you can follow the steps in this guide to conf ```html - ``` From 8cba445bb7aed4acaac539dff5a08da58ac03b0f Mon Sep 17 00:00:00 2001 From: Iron Lu Date: Sun, 13 Mar 2022 16:52:00 +0800 Subject: [PATCH 21/38] docs: clarify deprecated exports key end with `/` (#7302) Co-authored-by: Bjorn Lu --- config/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/config/index.md b/config/index.md index 225d8b2f..1e824b7e 100644 --- a/config/index.md +++ b/config/index.md @@ -241,6 +241,10 @@ export default defineConfig(({ command, mode }) => { Vite has a list of "allowed conditions" and will match the first condition that is in the allowed list. The default allowed conditions are: `import`, `module`, `browser`, `default`, and `production/development` based on current mode. The `resolve.conditions` config option allows specifying additional allowed conditions. + :::warning Resolving subpath exports + Export keys ending with "/" is deprecated by Node and may not work well. Please contact the package author to use [`*` subpath patterns](https://nodejs.org/api/packages.html#package-entry-points) instead. + ::: + ### resolve.mainFields - **Type:** `string[]` From 5be3d2031ebc91fdd969b11c338e0c93e35775ed Mon Sep 17 00:00:00 2001 From: "tangmengyu.amber" Date: Mon, 14 Mar 2022 12:36:56 +0800 Subject: [PATCH 22/38] docs(cn): resolve all conflicts. --- config/index.md | 44 ++++++++++-------------------------- guide/backend-integration.md | 5 ---- 2 files changed, 12 insertions(+), 37 deletions(-) diff --git a/config/index.md b/config/index.md index 6adf9e24..7e84def7 100644 --- a/config/index.md +++ b/config/index.md @@ -239,15 +239,11 @@ export default defineConfig(({ command, mode }) => { Vite 有一个“允许的情景”列表,并且会匹配列表中第一个情景。默认允许的情景是:`import`,`module`,`browser`,`default` 和基于当前情景为 `production/development`。`resolve.conditions` 配置项使得我们可以指定其他允许的情景。 -<<<<<<< HEAD -### resolve.mainFields {#resolve-mainfields} -======= - :::warning Resolving subpath exports - Export keys ending with "/" is deprecated by Node and may not work well. Please contact the package author to use [`*` subpath patterns](https://nodejs.org/api/packages.html#package-entry-points) instead. + :::warning 解决子路径导出问题 + 导出以“/”结尾的 key 已被 Node 弃用,可能无法正常工作。请联系包的作者改为使用 [`*` 子路径模式](https://nodejs.org/api/packages.html#package-entry-points)。 ::: -### resolve.mainFields ->>>>>>> 8cba445bb7aed4acaac539dff5a08da58ac03b0f +### resolve.mainFields {#resolve-mainfields} - **类型:** `string[]` - **默认:** `['module', 'jsnext:main', 'jsnext']` @@ -299,11 +295,7 @@ export default defineConfig(({ command, mode }) => { - **类型:** `string | (postcss.ProcessOptions & { plugins?: postcss.Plugin[] })` -<<<<<<< HEAD - 内联的 PostCSS 配置(格式同 `postcss.config.js`),或者一个(默认基于项目根目录的)自定义的 PostCSS 配置路径。其路径搜索是通过 [postcss-load-config](https://github.com/postcss/postcss-load-config) 实现的。 -======= - Inline PostCSS config (expects the same format as `postcss.config.js`), or a custom directory to search PostCSS config from (default is project root). The search is done using [postcss-load-config](https://github.com/postcss/postcss-load-config) and only the supported config file names are loaded. ->>>>>>> 8cba445bb7aed4acaac539dff5a08da58ac03b0f + 内联的 PostCSS 配置(格式同 `postcss.config.js`),或者一个(默认基于项目根目录的)自定义的 PostCSS 配置路径。其路径搜索是通过 [postcss-load-config](https://github.com/postcss/postcss-load-config) 实现的,并且只加载支持的配置文件名称。 注意:如果提供了该内联配置,Vite 将不会搜索其他 PostCSS 配置源。 @@ -311,11 +303,7 @@ export default defineConfig(({ command, mode }) => { - **类型:** `Record` -<<<<<<< HEAD - 指定传递给 CSS 预处理器的选项。例如: -======= - Specify options to pass to CSS pre-processors. The file extensions are used as keys for the options. Example: ->>>>>>> 8cba445bb7aed4acaac539dff5a08da58ac03b0f + 指定传递给 CSS 预处理器的选项。文件扩展名用作选项的键,例如: ```js export default defineConfig({ @@ -532,17 +520,13 @@ export default defineConfig(({ command, mode }) => { 为开发服务器配置 CORS。默认启用并允许任何源,传递一个 [选项对象](https://github.com/expressjs/cors) 来调整行为或设为 `false` 表示禁用。 -<<<<<<< HEAD -### server.force {#server-force} -======= -### server.headers +### server.headers ${server-hmr} -- **Type:** `OutgoingHttpHeaders` +- **类型:** `OutgoingHttpHeaders` - Specify server response headers. + 指定服务器响应的 header。 ### server.force ->>>>>>> 8cba445bb7aed4acaac539dff5a08da58ac03b0f - **类型:** `boolean` - **相关内容:** [依赖预构建](/guide/dep-pre-bundling) @@ -625,17 +609,13 @@ async function createServer() { createServer() ``` -<<<<<<< HEAD -### server.fs.strict {#server-fs-strict} -======= -### server.base +### server.base {#server-base} -- **Type:** `string | undefined` +- **类型:** `string | undefined` - Prepend this folder to http requests, for use when proxying vite as a subfolder. Should start and end with the `/` character. + 在 HTTP 请求中预留此文件夹,用于代理 Vite 作为子文件夹时使用。应该以 `/` 字符开始和结束。 -### server.fs.strict ->>>>>>> 8cba445bb7aed4acaac539dff5a08da58ac03b0f +### server.fs.strict {#server-fs-strict} - **类型:** `boolean` - **默认:** `true` (自 Vite 2.7 起默认启用) diff --git a/guide/backend-integration.md b/guide/backend-integration.md index 2ba6d1a9..0fe3dee6 100644 --- a/guide/backend-integration.md +++ b/guide/backend-integration.md @@ -32,13 +32,8 @@ 2. 在开发环境中,在服务器的 HTML 模板中注入以下内容(用正在运行的本地 URL 替换 `http://localhost:3000`): ```html -<<<<<<< HEAD -======= - ->>>>>>> 8cba445bb7aed4acaac539dff5a08da58ac03b0f - ``` 还要确保服务器配置为提供 Vite 工作目录中的静态资源,否则图片等资源将无法正确加载。 From f4d7cb8a6d364688680bb069b0058a1ec17d19c3 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Sun, 13 Mar 2022 23:31:55 -0700 Subject: [PATCH 23/38] fix: use hmr port if specified (#7282) --- config/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/index.md b/config/index.md index 1e824b7e..91f95ccd 100644 --- a/config/index.md +++ b/config/index.md @@ -549,7 +549,7 @@ export default defineConfig(({ command, mode }) => { `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. Useful if you're using an SSL proxy in front of your dev server. - When using `server.middlewareMode` or `server.https`, assigning `server.hmr.server` to your HTTP(S) server will process HMR connection requests through your server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port. + If specifying `server.hmr.server`, Vite will process HMR connection requests through the provided server. If not in middleware mode, Vite will attempt to process HMR connection requests through the existing server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port. ### server.watch From ac6778df83b718868aa93f75eb13941a58e21155 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Tue, 15 Mar 2022 04:34:26 +0800 Subject: [PATCH 24/38] docs: note esbuild picomatch pattern (#7319) --- config/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/config/index.md b/config/index.md index 91f95ccd..77fbeaca 100644 --- a/config/index.md +++ b/config/index.md @@ -355,7 +355,7 @@ export default defineConfig(({ command, mode }) => { }) ``` - By default, ESBuild is applied to `ts`, `jsx` and `tsx` files. You can customize this with `esbuild.include` and `esbuild.exclude`, both of which expect type of `string | RegExp | (string | RegExp)[]`. + By default, ESBuild is applied to `ts`, `jsx` and `tsx` files. You can customize this with `esbuild.include` and `esbuild.exclude`, which can be a regex, a [picomatch](https://github.com/micromatch/picomatch#globbing-features) pattern, or an array of either. In addition, you can also use `esbuild.jsxInject` to automatically inject JSX helper imports for every file transformed by ESBuild: @@ -374,7 +374,7 @@ export default defineConfig(({ command, mode }) => { - **Type:** `string | RegExp | (string | RegExp)[]` - **Related:** [Static Asset Handling](/guide/assets) - Specify additional [picomatch patterns](https://github.com/micromatch/picomatch) to be treated as static assets so that: + Specify additional [picomatch patterns](https://github.com/micromatch/picomatch#globbing-features) to be treated as static assets so that: - They will be excluded from the plugin transform pipeline when referenced from HTML or directly requested over `fetch` or XHR. From 320ea9c3cd0c27f49bb6857f676fce31b5141df0 Mon Sep 17 00:00:00 2001 From: ShenQingchuan Date: Thu, 17 Mar 2022 19:18:39 +0800 Subject: [PATCH 25/38] docs(cn): resolve conflicts. --- config/index.md | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/config/index.md b/config/index.md index 7ba3dc90..3074a12c 100644 --- a/config/index.md +++ b/config/index.md @@ -351,11 +351,7 @@ export default defineConfig(({ command, mode }) => { }) ``` -<<<<<<< HEAD - 默认情况下,ESbuild 会被应用在 `ts`、`jsx`、`tsx` 文件。你可以通过 `esbuild.include` 和 `esbuild.exclude` 对要处理的文件类型进行配置,这两个配置的类型应为 `string | RegExp | (string | RegExp)[]`。 -======= - By default, ESBuild is applied to `ts`, `jsx` and `tsx` files. You can customize this with `esbuild.include` and `esbuild.exclude`, which can be a regex, a [picomatch](https://github.com/micromatch/picomatch#globbing-features) pattern, or an array of either. ->>>>>>> ac6778df83b718868aa93f75eb13941a58e21155 + 默认情况下,ESbuild 会被应用在 `ts`、`jsx`、`tsx` 文件。你可以通过 `esbuild.include` 和 `esbuild.exclude` 对要处理的文件类型进行配置,这两个配置的值可以是一个正则表达式、一个 [picomatch](https://github.com/micromatch/picomatch#globbing-features) 模式,或是一个值为这两种类型的数组。 此外,你还可以通过 `esbuild.jsxInject` 来自动为每一个被 ESbuild 转换的文件注入 JSX helper。 @@ -374,11 +370,7 @@ export default defineConfig(({ command, mode }) => { - **类型:** `string | RegExp | (string | RegExp)[]` - **相关内容:** [静态资源处理](/guide/assets) -<<<<<<< HEAD - 指定额外的 [picomatch 模式](https://github.com/micromatch/picomatch) 作为静态资源处理,因此: -======= - Specify additional [picomatch patterns](https://github.com/micromatch/picomatch#globbing-features) to be treated as static assets so that: ->>>>>>> ac6778df83b718868aa93f75eb13941a58e21155 + 指定额外的 [picomatch 模式](https://github.com/micromatch/picomatch#globbing-features) 作为静态资源处理,因此: - 当从 HTML 引用它们或直接通过 `fetch` 或 XHR 请求它们时,它们将被插件转换管道排除在外。 @@ -553,11 +545,7 @@ export default defineConfig(({ command, mode }) => { `clientPort` 是一个高级选项,只在客户端的情况下覆盖端口,这允许你为 websocket 提供不同的端口,而并非在客户端代码中查找。如果需要在 dev-server 情况下使用 SSL 代理,这非常有用。 -<<<<<<< HEAD 当使用 `server.middlewareMode` 或 `server.https` 时,你需将 `server.hmr.server` 指定为你 HTTP(S) 的服务器,这将通过你的服务器来处理 HMR 的安全连接请求。这在使用自签证书或想通过网络在某端口暴露 Vite 的情况下,非常有用。 -======= - If specifying `server.hmr.server`, Vite will process HMR connection requests through the provided server. If not in middleware mode, Vite will attempt to process HMR connection requests through the existing server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port. ->>>>>>> ac6778df83b718868aa93f75eb13941a58e21155 ### server.watch {#server-watch} From f1898b7a9c00817137f7cf65648032f44658e9fb Mon Sep 17 00:00:00 2001 From: Jeff Yang <32727188+ydcjeff@users.noreply.github.com> Date: Sat, 19 Mar 2022 12:44:53 +0630 Subject: [PATCH 26/38] docs: vite only replace `__dirname`, `__filename`, `import.meta.url` in cjs (#7161) Co-authored-by: Bjorn Lu --- config/index.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/config/index.md b/config/index.md index 77fbeaca..905ffae7 100644 --- a/config/index.md +++ b/config/index.md @@ -27,7 +27,8 @@ You can also explicitly specify a config file to use with the `--config` CLI opt vite --config my-config.js ``` -Note that Vite will replace `__filename`, `__dirname`, and `import.meta.url`. Using these as variable names will result in an error: +::: tip NOTE +Vite will replace `__filename`, `__dirname`, and `import.meta.url` in **CommonJS** and **TypeScript** config files. Using these as variable names will result in an error: ```js const __filename = "value" @@ -35,6 +36,8 @@ const __filename = "value" const "path/vite.config.js" = "value" ``` +::: + ### Config Intellisense Since Vite ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints: From 6b06d03e15eb053c88fc505b291dd7a5b3d6798d Mon Sep 17 00:00:00 2001 From: yoho <907415276@qq.com> Date: Wed, 23 Mar 2022 22:17:03 +0800 Subject: [PATCH 27/38] docs: classic worker (#7203) Co-authored-by: Bjorn Lu Co-authored-by: Jeff Yang <32727188+ydcjeff@users.noreply.github.com> --- guide/features.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/guide/features.md b/guide/features.md index 7bf87064..ebed85cd 100644 --- a/guide/features.md +++ b/guide/features.md @@ -352,6 +352,24 @@ In the production build, `.wasm` files smaller than `assetInlineLimit` will be i ## Web Workers +### Import with Constructors + +A web worker script can be imported using [`new Worker()`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker) and [`new SharedWorker()`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/SharedWorker). Compared to the worker suffixes, this syntax leans closer to the standards and is the **recommended** way to create workers. + +```ts +const worker = new Worker(new URL('./worker.js', import.meta.url)) +``` + +The worker constructor also accepts options, which can be used to create "module" workers: + +```ts +const worker = new Worker(new URL('./worker.js', import.meta.url), { + type: 'module' +}) +``` + +### Import with Query Suffixes + A web worker script can be directly imported by appending `?worker` or `?sharedworker` to the import request. The default export will be a custom worker constructor: ```js @@ -368,6 +386,8 @@ By default, the worker script will be emitted as a separate chunk in the product import MyWorker from './worker?worker&inline' ``` +See [Worker Options](/config/#worker-options) for details on configuring the bundling of all workers. + ## Build Optimizations > Features listed below are automatically applied as part of the build process and there is no need for explicit configuration unless you want to disable them. From 8d5d01a7c839337b8c758bf3e3a7a5344805f1b2 Mon Sep 17 00:00:00 2001 From: ShenQingchuan Date: Thu, 24 Mar 2022 16:47:56 +0800 Subject: [PATCH 28/38] docs(cn): fix all conflicts: --- config/index.md | 14 +++----------- guide/features.md | 22 +++++++--------------- 2 files changed, 10 insertions(+), 26 deletions(-) diff --git a/config/index.md b/config/index.md index b13320ab..642dcefd 100644 --- a/config/index.md +++ b/config/index.md @@ -23,12 +23,8 @@ export default { vite --config my-config.js ``` -<<<<<<< HEAD -注意,Vite 会替换 `__filename`,`__dirname` 以及 `import.meta.url`。如果使用这些名称作为变量名可能会导致代码报错: -======= -::: tip NOTE -Vite will replace `__filename`, `__dirname`, and `import.meta.url` in **CommonJS** and **TypeScript** config files. Using these as variable names will result in an error: ->>>>>>> 6b06d03e15eb053c88fc505b291dd7a5b3d6798d +::: tip 注意 +注意,Vite 会在 **CommonJS** 和 **TypeScript** 配置文件中替换 `__filename`,`__dirname` 以及 `import.meta.url`。如果使用这些名称作为变量名可能会导致代码报错: ```js const __filename = "value" @@ -36,13 +32,9 @@ const __filename = "value" const "path/vite.config.js" = "value" ``` -<<<<<<< HEAD -### 配置智能提示 {#config-intellisense} -======= ::: -### Config Intellisense ->>>>>>> 6b06d03e15eb053c88fc505b291dd7a5b3d6798d +### 配置智能提示 {#config-intellisense} 因为 Vite 本身附带 Typescript 类型,所以你可以通过 IDE 和 jsdoc 的配合来实现智能提示: diff --git a/guide/features.md b/guide/features.md index 334df39d..056d8dc6 100644 --- a/guide/features.md +++ b/guide/features.md @@ -352,18 +352,15 @@ init({ ## Web Worker {#web-workers} -<<<<<<< HEAD -一个 web worker 脚本可以直接通过添加一个 `?worker` 或 `?sharedworker` 查询参数来导入。默认导出一个自定义的 worker 构造器: -======= -### Import with Constructors +### 通过构造器导入 {#import-with-constructors} -A web worker script can be imported using [`new Worker()`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker) and [`new SharedWorker()`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/SharedWorker). Compared to the worker suffixes, this syntax leans closer to the standards and is the **recommended** way to create workers. +一个 Web Worker 可以使用 [`new Worker()`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker) 和 [`new SharedWorker()`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/SharedWorker) 导入。与 worker 后缀相比,这种语法更接近于标准,是创建 worker 的 **推荐** 方式。 ```ts const worker = new Worker(new URL('./worker.js', import.meta.url)) ``` -The worker constructor also accepts options, which can be used to create "module" workers: +worker 构造函数会接受可以用来创建 “模块” worker 的选项: ```ts const worker = new Worker(new URL('./worker.js', import.meta.url), { @@ -371,10 +368,9 @@ const worker = new Worker(new URL('./worker.js', import.meta.url), { }) ``` -### Import with Query Suffixes +### 带有查询后缀的导入 {#import-with-query-suffixes} -A web worker script can be directly imported by appending `?worker` or `?sharedworker` to the import request. The default export will be a custom worker constructor: ->>>>>>> 6b06d03e15eb053c88fc505b291dd7a5b3d6798d +你可以在导入请求上添加 `?worker` 或 `?sharedworker` 查询参数来直接导入一个 web worker 脚本。默认导出会是一个自定义 worker 的构造函数: ```js import MyWorker from './worker?worker' @@ -390,13 +386,9 @@ Worker 脚本也可以使用 `import` 语句来替代 `importScripts()` —— import MyWorker from './worker?worker&inline' ``` -<<<<<<< HEAD -## 构建优化 {#build-optimizations} -======= -See [Worker Options](/config/#worker-options) for details on configuring the bundling of all workers. +查看 [Worker 选项](/config/#worker-options) 了解更多关于如何配置打包全部 worker 的相关细节。workers. -## Build Optimizations ->>>>>>> 6b06d03e15eb053c88fc505b291dd7a5b3d6798d +## 构建优化 {#build-optimizations} > 下面所罗列的功能会自动应用为构建过程的一部分,除非你想禁用它们,否则没有必要显式配置。 From 8e602765e1bff7451478bc20abba220a922cb103 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 26 Mar 2022 22:42:07 +0800 Subject: [PATCH 29/38] feat(dev): expose APIs for client-server communication (#7437) --- guide/api-hmr.md | 8 ++++++ guide/api-plugin.md | 70 ++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 77 insertions(+), 1 deletion(-) diff --git a/guide/api-hmr.md b/guide/api-hmr.md index f4ddf59d..46eabab0 100644 --- a/guide/api-hmr.md +++ b/guide/api-hmr.md @@ -123,3 +123,11 @@ The following HMR events are dispatched by Vite automatically: - `'vite:error'` when an error occurs (e.g. syntax error) Custom HMR events can also be sent from plugins. See [handleHotUpdate](./api-plugin#handlehotupdate) for more details. + +## `hot.send(event, data)` + +Send custom events back to Vite's dev server. + +If called before connected, the data will be buffered and sent once the connection is established. + +See [Client-server Communication](/guide/api-plugin.html#client-server-communication) for more details. diff --git a/guide/api-plugin.md b/guide/api-plugin.md index b3888b0f..13767c45 100644 --- a/guide/api-plugin.md +++ b/guide/api-plugin.md @@ -480,7 +480,7 @@ export default defineConfig({ Check out [Vite Rollup Plugins](https://vite-rollup-plugins.patak.dev) for a list of compatible official Rollup plugins with usage instructions. -## Path normalization +## Path Normalization Vite normalizes paths while resolving ids to use POSIX separators ( / ) while preserving the volume in Windows. On the other hand, Rollup keeps resolved paths untouched by default, so resolved ids have win32 separators ( \\ ) in Windows. However, Rollup plugins use a [`normalizePath` utility function](https://github.com/rollup/plugins/tree/master/packages/pluginutils#normalizepath) from `@rollup/pluginutils` internally, which converts separators to POSIX before performing comparisons. This means that when these plugins are used in Vite, the `include` and `exclude` config pattern and other similar paths against resolved ids comparisons work correctly. @@ -492,3 +492,71 @@ import { normalizePath } from 'vite' normalizePath('foo\\bar') // 'foo/bar' normalizePath('foo/bar') // 'foo/bar' ``` + +## Client-server Communication + +Since Vite 2.9, we provide some utilities for plugins to help handle the communication with clients. + +### Server to Client + +On the plugin side, we could use `server.ws.send` to boardcast events to all the clients: + +```js +// vite.config.js +export default defineConfig({ + plugins: [ + { + // ... + configureServer(server) { + server.ws.send('my:greetings', { msg: 'hello' }) + } + } + ] +}) +``` + +::: tip NOTE +We recommend **alway prefixing** your event names to avoid collisions with other plugins. +::: + +On the client side, use [`hot.on`](/guide/api-hmr.html#hot-on-event-cb) to listen to the events: + +```ts +// client side +if (import.meta.hot) { + import.meta.hot.on('my:greetings', (data) => { + console.log(data.msg) // hello + }) +} +``` + +### Client to Server + +To send events from the client to the server, we can use [`hot.send`](/guide/api-hmr.html#hot-send-event-payload): + +```ts +// client side +if (import.meta.hot) { + import.meta.hot.send('my:from-client', { msg: 'Hey!' }) +} +``` + +Then use `server.ws.on` and listen to the events on the server side: + +```js +// vite.config.js +export default defineConfig({ + plugins: [ + { + // ... + configureServer(server) { + server.ws.on('my:from-client', (data, client) => { + console.log('Message from client:', data.msg) // Hey! + // reply only to the client (if needed) + client.send('my:ack', { msg: 'Hi! I got your message!' }) + }) + } + } + ] +}) +``` From 26dacffcf50b841bc3e0d0ff85d765b5aa010131 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Sun, 27 Mar 2022 01:29:46 +0900 Subject: [PATCH 30/38] docs: add css.devSourcemap option (#7478) --- config/index.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/config/index.md b/config/index.md index 905ffae7..b0d2f59d 100644 --- a/config/index.md +++ b/config/index.md @@ -327,6 +327,14 @@ export default defineConfig(({ command, mode }) => { }) ``` +### css.devSourcemap + +- **Experimental** +- **Type:** `boolean` +- **Default:** `false` + + Whether to enable sourcemaps during dev. + ### json.namedExports - **Type:** `boolean` From e0159e1fbc2dad08bfd9a9fd9ea3052d1cab0dfc Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 27 Mar 2022 01:08:36 +0800 Subject: [PATCH 31/38] feat(type): support typing for custom events (#7476) --- guide/api-plugin.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/guide/api-plugin.md b/guide/api-plugin.md index 13767c45..228755dd 100644 --- a/guide/api-plugin.md +++ b/guide/api-plugin.md @@ -560,3 +560,19 @@ export default defineConfig({ ] }) ``` + +### TypeScript for Custom Events + +It is possible to type custom events by extending the `CustomEventMap` interface: + +```ts +// events.d.ts +import 'vite/types/customEvent' + +declare module 'vite/types/customEvent' { + interface CustomEventMap { + 'custom:foo': { msg: string } + // 'event-key': payload + } +} +``` From 72bb5b3df1323871d6ef4f128551906d18098398 Mon Sep 17 00:00:00 2001 From: patak Date: Sun, 27 Mar 2022 07:00:45 +0200 Subject: [PATCH 32/38] fix: optimizeDeps.entries default ignore paths (#7469) --- config/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/config/index.md b/config/index.md index b0d2f59d..a8d8cb36 100644 --- a/config/index.md +++ b/config/index.md @@ -973,9 +973,9 @@ export default defineConfig({ - **Type:** `string | string[]` - By default, Vite will crawl your `index.html` to detect dependencies that need to be pre-bundled. If `build.rollupOptions.input` is specified, Vite will crawl those entry points instead. + By default, Vite will crawl all your `.html` files to detect dependencies that need to be pre-bundled (ignoring `node_modules`, `build.outDir`, `__tests__` and `coverage`). If `build.rollupOptions.input` is specified, Vite will crawl those entry points instead. - If neither of these fit your needs, you can specify custom entries using this option - the value should be a [fast-glob pattern](https://github.com/mrmlnc/fast-glob#basic-syntax) or array of patterns that are relative from Vite project root. This will overwrite default entries inference. + If neither of these fit your needs, you can specify custom entries using this option - the value should be a [fast-glob pattern](https://github.com/mrmlnc/fast-glob#basic-syntax) 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 explicitily defined. If other folders needs to be ignored, you can use an ignore pattern as part of the entries list, marked with an initial `!`. ### optimizeDeps.exclude From 472b8375a18888a9c25f37aadd77eecddaa5fb7c Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 29 Mar 2022 09:05:30 +0200 Subject: [PATCH 33/38] fix: infer client port from page location (#7463) --- config/index.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/config/index.md b/config/index.md index a8d8cb36..f9a1a81d 100644 --- a/config/index.md +++ b/config/index.md @@ -550,14 +550,12 @@ export default defineConfig(({ command, mode }) => { ### server.hmr -- **Type:** `boolean | { protocol?: string, host?: string, port?: number | false, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }` +- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }` Disable or configure HMR connection (in cases where the HMR websocket must use a different address from the http server). Set `server.hmr.overlay` to `false` to disable the server error overlay. - Set `server.hmr.port` to `false` when connecting to a domain without a port. - `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. Useful if you're using an SSL proxy in front of your dev server. If specifying `server.hmr.server`, Vite will process HMR connection requests through the provided server. If not in middleware mode, Vite will attempt to process HMR connection requests through the existing server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port. From 4fdb8bb909fbd2e801a34ab9c8eac5a678c55c9f Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Tue, 29 Mar 2022 15:10:23 +0800 Subject: [PATCH 34/38] docs: note url string must be static (#7508) --- guide/assets.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/guide/assets.md b/guide/assets.md index fd5aa46f..53ac153f 100644 --- a/guide/assets.md +++ b/guide/assets.md @@ -103,8 +103,13 @@ function getImageUrl(name) { } ``` -During the production build, Vite will perform necessary transforms so that the URLs still point to the correct location even after bundling and asset hashing. +During the production build, Vite will perform necessary transforms so that the URLs still point to the correct location even after bundling and asset hashing. However, the URL string must be static so it can be analyzed, otherwise the code will be left as is, which can cause runtime errors if `build.target` does not support `import.meta.url` -::: warning Note: Does not work with SSR +```js +// Vite will not transform this +const imgUrl = new URL(imagePath, import.meta.url).href +``` + +::: warning Does not work with SSR This pattern does not work if you are using Vite for Server-Side Rendering, because `import.meta.url` have different semantics in browsers vs. Node.js. The server bundle also cannot determine the client host URL ahead of time. ::: From e7a099fa1be65f80d4785af998b105fa3035ad70 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Tue, 29 Mar 2022 15:15:51 +0800 Subject: [PATCH 35/38] docs: note env in command line (#7507) --- guide/env-and-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/env-and-mode.md b/guide/env-and-mode.md index d3a6a575..a2dee2b0 100644 --- a/guide/env-and-mode.md +++ b/guide/env-and-mode.md @@ -37,7 +37,7 @@ Vite uses [dotenv](https://github.com/motdotla/dotenv) to load additional enviro An env file for a specific mode (e.g. `.env.production`) will take higher priority than a generic one (e.g. `.env`). -In addition, environment variables that already exist when Vite is executed have the highest priority and will not be overwritten by `.env` files. +In addition, environment variables that already exist when Vite is executed have the highest priority and will not be overwritten by `.env` files. For example, when running `VITE_SOME_KEY=123 vite build`. `.env` files are loaded at the start of Vite. Restart the server after making changes. ::: From 8fc85f604d56981f85b61849fc35df38fa49350b Mon Sep 17 00:00:00 2001 From: ygj6 <7699524+ygj6@users.noreply.github.com> Date: Tue, 29 Mar 2022 20:44:59 +0800 Subject: [PATCH 36/38] docs: declare the scope of define expressions (#7511) --- config/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/config/index.md b/config/index.md index f9a1a81d..9fc9273c 100644 --- a/config/index.md +++ b/config/index.md @@ -156,6 +156,8 @@ export default defineConfig(({ command, mode }) => { - Starting from `2.0.0-beta.70`, string values will be used as raw expressions, so if defining a string constant, it needs to be explicitly quoted (e.g. with `JSON.stringify`). + - To be consistent with [esbuild behavior](https://esbuild.github.io/api/#define), expressions must either be a JSON object (null, boolean, number, string, array, or object) or a single identifier. + - Replacements are performed only when the match is surrounded by word boundaries (`\b`). ::: warning From 3d72c633a357b17303fb42159ba36a7d778dccbf Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Tue, 29 Mar 2022 18:05:54 +0200 Subject: [PATCH 37/38] docs: add wildcard to suggested .gitignore entry in docs (#7512) --- guide/env-and-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/env-and-mode.md b/guide/env-and-mode.md index a2dee2b0..1649feda 100644 --- a/guide/env-and-mode.md +++ b/guide/env-and-mode.md @@ -57,7 +57,7 @@ If you want to customize env variables prefix, see [envPrefix](/config/index#env :::warning SECURITY NOTES -- `.env.*.local` files are local-only and can contain sensitive variables. You should add `.local` to your `.gitignore` to avoid them being checked into git. +- `.env.*.local` files are local-only and can contain sensitive variables. You should add `*.local` to your `.gitignore` to avoid them being checked into git. - Since any variables exposed to your Vite source code will end up in your client bundle, `VITE_*` variables should _not_ contain any sensitive information. ::: From 32b8d387986749272b9001498eb5888570e9ebaf Mon Sep 17 00:00:00 2001 From: "tangmengyu.amber" Date: Thu, 31 Mar 2022 21:52:41 +0800 Subject: [PATCH 38/38] docs(cn): fix all conflicts. --- config/index.md | 44 +++++++++---------------------------------- guide/api-hmr.md | 10 +++------- guide/api-plugin.md | 4 ---- guide/assets.md | 15 ++++----------- guide/env-and-mode.md | 10 +--------- 5 files changed, 17 insertions(+), 66 deletions(-) diff --git a/config/index.md b/config/index.md index c6bfc27f..1405c71c 100644 --- a/config/index.md +++ b/config/index.md @@ -151,15 +151,9 @@ export default defineConfig(({ command, mode }) => { 定义全局常量替换方式。其中每项在开发环境下会被定义在全局,而在构建时被静态替换。 -<<<<<<< HEAD - - 从 `2.0.0-beta.70` 版本开始,字符串值将直接作为一个表达式,所以如果定义为了一个字符串常量,它需要被显式地引用(例如:通过 `JSON.stringify`)。 + - 为了与 [esbuild 的行为](https://esbuild.github.io/api/#define)保持一致,表达式必须为一个 JSON 对象(null、boolean、number、string、数组或对象),亦或是一个单独的标识符。 - 替换只会在匹配到周围是单词边界(`\b`)时执行。 -======= - - To be consistent with [esbuild behavior](https://esbuild.github.io/api/#define), expressions must either be a JSON object (null, boolean, number, string, array, or object) or a single identifier. - - - Replacements are performed only when the match is surrounded by word boundaries (`\b`). ->>>>>>> 3d72c633a357b17303fb42159ba36a7d778dccbf ::: warning 因为它是不经过任何语法分析,直接替换文本实现的,所以我们建议只对 CONSTANTS 使用 `define`。 @@ -329,19 +323,15 @@ export default defineConfig(({ command, mode }) => { }) ``` -<<<<<<< HEAD -### json.namedExports {#json-namedexports} -======= ### css.devSourcemap -- **Experimental** -- **Type:** `boolean` -- **Default:** `false` +- **实验性** +- **类型:** `boolean` +- **默认:** `false` - Whether to enable sourcemaps during dev. + 在开发过程中是否启用 sourcemap。 -### json.namedExports ->>>>>>> 3d72c633a357b17303fb42159ba36a7d778dccbf +### json.namedExports {#json-namedexports} - **类型:** `boolean` - **默认:** `true` @@ -556,23 +546,13 @@ export default defineConfig(({ command, mode }) => { ### server.hmr {#server-hmr} -<<<<<<< HEAD -- **类型:** `boolean | { protocol?: string, host?: string, port?: number | false, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }` -======= -- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }` ->>>>>>> 3d72c633a357b17303fb42159ba36a7d778dccbf +- **类型:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }` 禁用或配置 HMR 连接(用于 HMR websocket 必须使用不同的 http 服务器地址的情况)。 设置 `server.hmr.overlay` 为 `false` 可以禁用开发服务器错误的屏蔽。 -<<<<<<< HEAD - 当连接到某个域名而不需要端口时,可以设置 `server.hmr.port` 为 `false`。 - `clientPort` 是一个高级选项,只在客户端的情况下覆盖端口,这允许你为 websocket 提供不同的端口,而并非在客户端代码中查找。如果需要在 dev-server 情况下使用 SSL 代理,这非常有用。 -======= - `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. Useful if you're using an SSL proxy in front of your dev server. ->>>>>>> 3d72c633a357b17303fb42159ba36a7d778dccbf 当使用 `server.middlewareMode` 或 `server.https` 时,你需将 `server.hmr.server` 指定为你 HTTP(S) 的服务器,这将通过你的服务器来处理 HMR 的安全连接请求。这在使用自签证书或想通过网络在某端口暴露 Vite 的情况下,非常有用。 @@ -987,15 +967,9 @@ export default defineConfig({ - **类型:** `string | string[]` -<<<<<<< HEAD - 默认情况下,Vite 会抓取你的 `index.html` 来检测需要预构建的依赖项。如果指定了 `build.rollupOptions.input`,Vite 将转而去抓取这些入口点。 - - 如果这两者都不合你意,则可以使用此选项指定自定义条目——该值需要遵循 [fast-glob 模式](https://github.com/mrmlnc/fast-glob#basic-syntax) ,或者是相对于 Vite 项目根的模式数组。这将覆盖掉默认条目推断。 -======= - By default, Vite will crawl all your `.html` files to detect dependencies that need to be pre-bundled (ignoring `node_modules`, `build.outDir`, `__tests__` and `coverage`). If `build.rollupOptions.input` is specified, Vite will crawl those entry points instead. + 默认情况下,Vite 会抓取你的 `index.html` 来检测需要预构建的依赖项(忽略了`node_modules`、`build.outDir`、`__tests__` 和 `coverage`)。如果指定了 `build.rollupOptions.input`,Vite 将转而去抓取这些入口点。 - If neither of these fit your needs, you can specify custom entries using this option - the value should be a [fast-glob pattern](https://github.com/mrmlnc/fast-glob#basic-syntax) 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 explicitily defined. If other folders needs to be ignored, you can use an ignore pattern as part of the entries list, marked with an initial `!`. ->>>>>>> 3d72c633a357b17303fb42159ba36a7d778dccbf + 如果这两者都不合你意,则可以使用此选项指定自定义条目——该值需要遵循 [fast-glob 模式](https://github.com/mrmlnc/fast-glob#basic-syntax) ,或者是相对于 Vite 项目根目录的匹配模式数组。当显式声明了 `optimizeDeps.entries` 时默认只有 `node_modules` 和 `build.outDir` 文件夹会被忽略。如果还需忽略其他文件夹,你可以在模式列表中使用以 `!` 为前缀的、用来匹配忽略项的模式。 ### optimizeDeps.exclude {#optimizedeps-exclude} diff --git a/guide/api-hmr.md b/guide/api-hmr.md index 94497f0c..1fde4cd0 100644 --- a/guide/api-hmr.md +++ b/guide/api-hmr.md @@ -122,16 +122,12 @@ if (import.meta.hot) { - `'vite:beforePrune'` 当不再需要的模块即将被剔除时 - `'vite:error'` 当发生错误时(例如,语法错误) -<<<<<<< HEAD 自定义 HMR 事件可以由插件发送。更多细节详见 [handleHotUpdate](./api-plugin#handleHotUpdate)。 -======= -Custom HMR events can also be sent from plugins. See [handleHotUpdate](./api-plugin#handlehotupdate) for more details. ## `hot.send(event, data)` -Send custom events back to Vite's dev server. +发送自定义事件到 Vite 开发服务器。 -If called before connected, the data will be buffered and sent once the connection is established. +如果在连接前调用,数据会先被缓存、等到连接建立好后再发送。 -See [Client-server Communication](/guide/api-plugin.html#client-server-communication) for more details. ->>>>>>> 3d72c633a357b17303fb42159ba36a7d778dccbf +查看 [客户端与服务器的数据交互](/guide/api-plugin.html#client-server-communication) 一节获取更多细节。 diff --git a/guide/api-plugin.md b/guide/api-plugin.md index f84a031e..3367ec8f 100644 --- a/guide/api-plugin.md +++ b/guide/api-plugin.md @@ -480,11 +480,7 @@ export default defineConfig({ 查看 [Vite Rollup 插件](https://vite-rollup-plugins.patak.dev) 获取兼容的官方 Rollup 插件列表及其使用指南。 -<<<<<<< HEAD ## 路径规范化 {#path-normalization} -======= -## Path Normalization ->>>>>>> 3d72c633a357b17303fb42159ba36a7d778dccbf Vite 对路径进行了规范化处理,在解析路径时使用 POSIX 分隔符( / ),同时保留了 Windows 中的卷名。而另一方面,Rollup 在默认情况下保持解析的路径不变,因此解析的路径在 Windows 中会使用 win32 分隔符( \\ )。然而,Rollup 插件会使用 `@rollup/pluginutils` 内部的 [`normalizePath` 工具函数](https://github.com/rollup/plugins/tree/master/packages/pluginutils#normalizepath),它在执行比较之前将分隔符转换为 POSIX。所以意味着当这些插件在 Vite 中使用时,`include` 和 `exclude` 两个配置模式,以及与已解析路径比较相似的路径会正常工作。 diff --git a/guide/assets.md b/guide/assets.md index b0b675d9..46f385be 100644 --- a/guide/assets.md +++ b/guide/assets.md @@ -103,20 +103,13 @@ function getImageUrl(name) { } ``` -<<<<<<< HEAD -在生产构建时,Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。 - -::: warning 注意:无法在 SSR 中使用 -如果你正在以服务端渲染模式使用 Vite 则此模式不支持,因为 `import.meta.url` 在浏览器和 Node.js 中有不同的语义。服务端的产物也无法预先确定客户端主机 URL。 -======= -During the production build, Vite will perform necessary transforms so that the URLs still point to the correct location even after bundling and asset hashing. However, the URL string must be static so it can be analyzed, otherwise the code will be left as is, which can cause runtime errors if `build.target` does not support `import.meta.url` +在生产构建时,Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。然而,这个 URL 字符串必须是静态的,这样才好分析。否则代码将被原样保留、因而在 `build.target` 不支持 `import.meta.url` 时会导致运行时错误。 ```js -// Vite will not transform this +// Vite 不会转换这个 const imgUrl = new URL(imagePath, import.meta.url).href ``` -::: warning Does not work with SSR -This pattern does not work if you are using Vite for Server-Side Rendering, because `import.meta.url` have different semantics in browsers vs. Node.js. The server bundle also cannot determine the client host URL ahead of time. ->>>>>>> 3d72c633a357b17303fb42159ba36a7d778dccbf +::: warning 注意:无法在 SSR 中使用 +如果你正在以服务端渲染模式使用 Vite 则此模式不支持,因为 `import.meta.url` 在浏览器和 Node.js 中有不同的语义。服务端的产物也无法预先确定客户端主机 URL。 ::: diff --git a/guide/env-and-mode.md b/guide/env-and-mode.md index 6143cdd7..ef257cda 100644 --- a/guide/env-and-mode.md +++ b/guide/env-and-mode.md @@ -37,11 +37,7 @@ Vite 使用 [dotenv](https://github.com/motdotla/dotenv) 从你的 [环境目录 一份用于指定模式的文件(例如 `.env.production`)会比通用形式的优先级更高(例如 `.env`)。 -<<<<<<< HEAD -另外,Vite 执行时已经存在的环境变量有最高的优先级,不会被 `.env` 类文件覆盖。 -======= -In addition, environment variables that already exist when Vite is executed have the highest priority and will not be overwritten by `.env` files. For example, when running `VITE_SOME_KEY=123 vite build`. ->>>>>>> 3d72c633a357b17303fb42159ba36a7d778dccbf +另外,Vite 执行时已经存在的环境变量有最高的优先级,不会被 `.env` 类文件覆盖。例如当运行 `VITE_SOME_KEY=123 vite build` 的时候。 `.env` 类文件会在 Vite 启动一开始时被加载,而改动会在重启服务器后生效。 ::: @@ -61,11 +57,7 @@ VITE_SOME_KEY=123 :::warning 安全注意事项 -<<<<<<< HEAD - `.env.*.local` 文件应是本地的,可以包含敏感变量。你应该将 `.local` 添加到你的 `.gitignore` 中,以避免它们被 git 检入。 -======= -- `.env.*.local` files are local-only and can contain sensitive variables. You should add `*.local` to your `.gitignore` to avoid them being checked into git. ->>>>>>> 3d72c633a357b17303fb42159ba36a7d778dccbf - 由于任何暴露给 Vite 源码的变量最终都将出现在客户端包中,`VITE_*` 变量应该不包含任何敏感信息。 :::