From 83799a1d49f5ced35d5b58f43e192c632436c0ba Mon Sep 17 00:00:00 2001 From: Mehdi <9340937+meduzen@users.noreply.github.com> Date: Mon, 8 Apr 2024 16:07:01 +0200 Subject: [PATCH 1/5] =?UTF-8?q?docs:=20add=20Mastodon=20to=20=E2=80=9Creso?= =?UTF-8?q?urces=E2=80=9D=20in=20docs=20navigation=20(#16370)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vitepress/config.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.vitepress/config.ts b/.vitepress/config.ts index ea73fa45..7af266a7 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -148,6 +148,10 @@ export default defineConfig({ { text: 'Releases', link: '/releases' }, { items: [ + { + text: 'Mastodon', + link: 'https://elk.zone/m.webtoo.ls/@vite', + }, { text: 'Twitter', link: 'https://twitter.com/vite_js', From 12262444f3a5d23d305da41ef032404ee50f932f Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Tue, 9 Apr 2024 17:11:09 +0800 Subject: [PATCH 2/5] docs: update dep optimization options entries (#16204) Co-authored-by: Bjorn Lu --- config/dep-optimization-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/dep-optimization-options.md b/config/dep-optimization-options.md index 6f8b52d0..be248e65 100644 --- a/config/dep-optimization-options.md +++ b/config/dep-optimization-options.md @@ -8,7 +8,7 @@ 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. Only `node_modules` and `build.outDir` folders will be ignored by default when `optimizeDeps.entries` is explicitly defined. If other folders need to be ignored, you can use an ignore pattern as part of the entries list, marked with an initial `!`. +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 explicitly defined. If other folders need to be ignored, you can use an ignore pattern as part of the entries list, marked with an initial `!`. If you don't want to ignore `node_modules` and `build.outDir`, you can specify using literal string paths (without fast-glob patterns) instead. ## optimizeDeps.exclude From 6428d5ffcbe43f389be4e65a4992c5545e7fedd1 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Thu, 11 Apr 2024 03:17:49 +0800 Subject: [PATCH 3/5] docs: add links to environment api (#16392) --- guide/api-vite-runtime.md | 4 +++- guide/ssr.md | 15 +++++---------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/guide/api-vite-runtime.md b/guide/api-vite-runtime.md index 5c4ee3f0..9aa579d2 100644 --- a/guide/api-vite-runtime.md +++ b/guide/api-vite-runtime.md @@ -1,7 +1,9 @@ # Vite Runtime API :::warning Low-level API -This API was introduced in Vite 5.1 as an experimental feature. It was added to [gather feedback](https://github.com/vitejs/vite/discussions/15774). There will probably be breaking changes to it in Vite 5.2, so make sure to pin the Vite version to `~5.1.0` when using it. This is a low-level API meant for library and framework authors. If your goal is to create an application, make sure to check out the higher-level SSR plugins and tools at [Awesome Vite SSR section](https://github.com/vitejs/awesome-vite#ssr) first. +This API was introduced in Vite 5.1 as an experimental feature. It was added to [gather feedback](https://github.com/vitejs/vite/discussions/15774). There will likely be breaking changes, so make sure to pin the Vite version to `~5.1.0` when using it. This is a low-level API meant for library and framework authors. If your goal is to create an application, make sure to check out the higher-level SSR plugins and tools at [Awesome Vite SSR section](https://github.com/vitejs/awesome-vite#ssr) first. + +Currently, the API is being revised as the [Environment API](https://github.com/vitejs/vite/discussions/16358) which is released at `^6.0.0-alpha.0`. ::: The "Vite Runtime" is a tool that allows running any code by processing it with Vite plugins first. It is different from `server.ssrLoadModule` because the runtime implementation is decoupled from the server. This allows library and framework authors to implement their own layer of communication between the server and the runtime. diff --git a/guide/ssr.md b/guide/ssr.md index 60ed03b5..79c29518 100644 --- a/guide/ssr.md +++ b/guide/ssr.md @@ -8,6 +8,8 @@ The following guide also assumes prior experience working with SSR in your frame :::warning Low-level API This is a low-level API meant for library and framework authors. If your goal is to create an application, make sure to check out the higher-level SSR plugins and tools at [Awesome Vite SSR section](https://github.com/vitejs/awesome-vite#ssr) first. That said, many applications are successfully built directly on top of Vite's native low-level API. + +Currently, Vite is working on an improved SSR API with the [Environment API](https://github.com/vitejs/vite/discussions/16358). Check out the link for more details. ::: :::tip Help @@ -138,17 +140,10 @@ app.use('*', async (req, res, next) => { // preambles from @vitejs/plugin-react template = await vite.transformIndexHtml(url, template) - // 3a. Load the server entry. ssrLoadModule automatically transforms + // 3. Load the server entry. ssrLoadModule automatically transforms // ESM source code to be usable in Node.js! There is no bundling // required, and provides efficient invalidation similar to HMR. const { render } = await vite.ssrLoadModule('/src/entry-server.js') - // 3b. Since Vite 5.1, you can use the experimental createViteRuntime API - // instead. - // It fully supports HMR and works in a simillar way to ssrLoadModule - // More advanced use case would be creating a runtime in a separate - // thread or even a different machine using ViteRuntime class - const runtime = await vite.createViteRuntime(server) - const { render } = await runtime.executeEntrypoint('/src/entry-server.js') // 4. render the app HTML. This assumes entry-server.js's exported // `render` function calls appropriate framework SSR APIs, @@ -183,7 +178,7 @@ The `dev` script in `package.json` should also be changed to use the server scri To ship an SSR project for production, we need to: 1. Produce a client build as normal; -2. Produce an SSR build, which can be directly loaded via `import()` so that we don't have to go through Vite's `ssrLoadModule` or `runtime.executeEntrypoint`; +2. Produce an SSR build, which can be directly loaded via `import()` so that we don't have to go through Vite's `ssrLoadModule`; Our scripts in `package.json` will look like this: @@ -203,7 +198,7 @@ Then, in `server.js` we need to add some production specific logic by checking ` - Instead of reading the root `index.html`, use the `dist/client/index.html` as the template, since it contains the correct asset links to the client build. -- Instead of `await vite.ssrLoadModule('/src/entry-server.js')` or `await runtime.executeEntrypoint('/src/entry-server.js')`, use `import('./dist/server/entry-server.js')` (this file is the result of the SSR build). +- Instead of `await vite.ssrLoadModule('/src/entry-server.js')`, use `import('./dist/server/entry-server.js')` (this file is the result of the SSR build). - Move the creation and all usage of the `vite` dev server behind dev-only conditional branches, then add static file serving middlewares to serve files from `dist/client`. From 2e32576a85141ea873b8bfe5aae7a3548dca64eb Mon Sep 17 00:00:00 2001 From: waynzh Date: Thu, 11 Apr 2024 16:15:00 +0800 Subject: [PATCH 4/5] docs(cn): resolve conflicts --- config/dep-optimization-options.md | 6 +---- guide/api-vite-runtime.md | 2 ++ guide/ssr.md | 35 ++++-------------------------- 3 files changed, 7 insertions(+), 36 deletions(-) diff --git a/config/dep-optimization-options.md b/config/dep-optimization-options.md index c1a25d09..9b5ccbaa 100644 --- a/config/dep-optimization-options.md +++ b/config/dep-optimization-options.md @@ -8,11 +8,7 @@ 默认情况下，Vite 会抓取你的 `index.html` 来检测需要预构建的依赖项（忽略了`node_modules`、`build.outDir`、`__tests__` 和 `coverage`）。如果指定了 `build.rollupOptions.input`，Vite 将转而去抓取这些入口点。 -<<<<<<< HEAD -如果这两者都不合你意，则可以使用此选项指定自定义条目——该值需要遵循 [fast-glob 模式](https://github.com/mrmlnc/fast-glob#basic-syntax) ，或者是相对于 Vite 项目根目录的匹配模式数组。当显式声明了 `optimizeDeps.entries` 时默认只有 `node_modules` 和 `build.outDir` 文件夹会被忽略。如果还需忽略其他文件夹，你可以在模式列表中使用以 `!` 为前缀的、用来匹配忽略项的模式。 -======= -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 explicitly defined. If other folders need to be ignored, you can use an ignore pattern as part of the entries list, marked with an initial `!`. If you don't want to ignore `node_modules` and `build.outDir`, you can specify using literal string paths (without fast-glob patterns) instead. ->>>>>>> 6428d5ffcbe43f389be4e65a4992c5545e7fedd1 +如果这两者都不合你意，则可以使用此选项指定自定义条目——该值需要遵循 [fast-glob 模式](https://github.com/mrmlnc/fast-glob#basic-syntax) ，或者是相对于 Vite 项目根目录的匹配模式数组。当显式声明了 `optimizeDeps.entries` 时默认只有 `node_modules` 和 `build.outDir` 文件夹会被忽略。如果还需忽略其他文件夹，你可以在模式列表中使用以 `!` 为前缀的、用来匹配忽略项的模式。如果你不想忽略 `node_modules` 和 `build.outDir`，你可以选择直接使用字符串路径（不使用 fast-glob 模式）。 ## optimizeDeps.exclude {#optimizedeps-exclude} diff --git a/guide/api-vite-runtime.md b/guide/api-vite-runtime.md index 82773430..45318f77 100644 --- a/guide/api-vite-runtime.md +++ b/guide/api-vite-runtime.md @@ -2,6 +2,8 @@ :::warning 低级别 API 这个 API 在 Vite 5.1 中作为一个实验性特性引入。它被添加以 [收集反馈](https://github.com/vitejs/vite/discussions/15774)。在Vite 5.2 中，它可能会有破坏性的变化，所以在使用它时，请确保将 Vite 版本固定在 `~5.1.0`。这是一个面向库和框架作者的低级别 API。如果你的目标是开发应用，请确保首先查看 [Vite SSR 精选板块](https://github.com/vitejs/awesome-vite#ssr) 的高级 SSR 插件和工具。 + +目前，这种 API 正在以 [环境 API](https://github.com/vitejs/vite/discussions/16358) 的形式进行修正，并在 `^6.0.0-alpha.0` 版本中发布。 ::: "Vite 运行时" 是一个工具，它允许首先用 Vite 插件处理任何代码后运行。它与 `server.ssrLoadModule` 不同，因为运行时实现是从服务器解耦的。这允许库和框架作者实现他们自己的服务器和运行时之间的通信层。 diff --git a/guide/ssr.md b/guide/ssr.md index c6ea9ff0..413541c5 100644 --- a/guide/ssr.md +++ b/guide/ssr.md @@ -7,13 +7,9 @@ SSR 特别指支持在 Node.js 中运行相同应用程序的前端框架（例 ::: :::warning Low-level API -<<<<<<< HEAD 这是一个底层 API，是为库和框架作者准备的。如果你的目标是构建一个应用程序，请确保优先查看 [Vite SSR 章节](https://github.com/vitejs/awesome-vite#ssr) 中更上层的 SSR 插件和工具。也就是说，大部分应用都是基于 Vite 的底层 API 之上构建的。 -======= -This is a low-level API meant for library and framework authors. If your goal is to create an application, make sure to check out the higher-level SSR plugins and tools at [Awesome Vite SSR section](https://github.com/vitejs/awesome-vite#ssr) first. That said, many applications are successfully built directly on top of Vite's native low-level API. -Currently, Vite is working on an improved SSR API with the [Environment API](https://github.com/vitejs/vite/discussions/16358). Check out the link for more details. ->>>>>>> 6428d5ffcbe43f389be4e65a4992c5545e7fedd1 +目前，Vite 正在用 [环境 API](https://github.com/vitejs/vite/discussions/16358) 来改进 SSR API。查看链接了解更多详情。 ::: :::tip 帮助 @@ -144,24 +140,10 @@ app.use('*', async (req, res, next) => { // 例如：@vitejs/plugin-react 中的 global preambles template = await vite.transformIndexHtml(url, template) -<<<<<<< HEAD - // 3a. 加载服务器入口。vite.ssrLoadModule 将自动转换 + // 3. 加载服务器入口。vite.ssrLoadModule 将自动转换 // 你的 ESM 源码使之可以在 Node.js 中运行！无需打包 // 并提供类似 HMR 的根据情况随时失效。 const { render } = await vite.ssrLoadModule('/src/entry-server.js') - // 3b. 从 Vite 5.1 版本开始，你可以试用实验性的 createViteRuntime - // API。 - // 这个 API 完全支持热更新（HMR），其工作原理与 ssrLoadModule 相似 - // 如果你想尝试更高级的用法，可以考虑在另一个线程，甚至是在另一台机器上， - // 使用 ViteRuntime 类来创建运行环境。 - const runtime = await vite.createViteRuntime(server) - const { render } = await runtime.executeEntrypoint('/src/entry-server.js') -======= - // 3. Load the server entry. ssrLoadModule automatically transforms - // ESM source code to be usable in Node.js! There is no bundling - // required, and provides efficient invalidation similar to HMR. - const { render } = await vite.ssrLoadModule('/src/entry-server.js') ->>>>>>> 6428d5ffcbe43f389be4e65a4992c5545e7fedd1 // 4. 渲染应用的 HTML。这假设 entry-server.js 导出的 `render` // 函数调用了适当的 SSR 框架 API。 @@ -195,13 +177,8 @@ app.use('*', async (req, res, next) => { 为了将 SSR 项目交付生产，我们需要： -<<<<<<< HEAD 1. 正常生成一个客户端构建； -2. 再生成一个 SSR 构建，使其通过 `import()` 直接加载，这样便无需再使用 Vite 的 `ssrLoadModule` 或 `runtime.executeEntrypoint`； -======= -1. Produce a client build as normal; -2. Produce an SSR build, which can be directly loaded via `import()` so that we don't have to go through Vite's `ssrLoadModule`; ->>>>>>> 6428d5ffcbe43f389be4e65a4992c5545e7fedd1 +2. 再生成一个 SSR 构建，使其通过 `import()` 直接加载，这样便无需再使用 Vite 的 `ssrLoadModule`； `package.json` 中的脚本应该看起来像这样： @@ -221,11 +198,7 @@ app.use('*', async (req, res, next) => { - 使用 `dist/client/index.html` 作为模板，而不是根目录的 `index.html`，因为前者包含了到客户端构建的正确资源链接。 -<<<<<<< HEAD -- 使用 `import('./dist/server/entry-server.js')` （该文件是 SSR 构建产物），而不是使用 `await vite.ssrLoadModule('/src/entry-server.js')` 或 `await runtime.executeEntrypoint('/src/entry-server.js')`。 -======= -- Instead of `await vite.ssrLoadModule('/src/entry-server.js')`, use `import('./dist/server/entry-server.js')` (this file is the result of the SSR build). ->>>>>>> 6428d5ffcbe43f389be4e65a4992c5545e7fedd1 +- 使用 `import('./dist/server/entry-server.js')` （该文件是 SSR 构建产物），而不是使用 `await vite.ssrLoadModule('/src/entry-server.js')`。 - 将 `vite` 开发服务器的创建和所有使用都移到 dev-only 条件分支后面，然后添加静态文件服务中间件来服务 `dist/client` 中的文件。 From e10fe00e13bbe37d867b4fd850384a279d14104c Mon Sep 17 00:00:00 2001 From: waynzh Date: Thu, 11 Apr 2024 16:16:48 +0800 Subject: [PATCH 5/5] docs(cn): tweak words --- guide/api-vite-runtime.md | 4 ++-- guide/ssr.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/guide/api-vite-runtime.md b/guide/api-vite-runtime.md index 45318f77..a82b4ff3 100644 --- a/guide/api-vite-runtime.md +++ b/guide/api-vite-runtime.md @@ -1,7 +1,7 @@ # Vite 运行时 API {#vite-runtime-api} -:::warning 低级别 API -这个 API 在 Vite 5.1 中作为一个实验性特性引入。它被添加以 [收集反馈](https://github.com/vitejs/vite/discussions/15774)。在Vite 5.2 中，它可能会有破坏性的变化，所以在使用它时，请确保将 Vite 版本固定在 `~5.1.0`。这是一个面向库和框架作者的低级别 API。如果你的目标是开发应用，请确保首先查看 [Vite SSR 精选板块](https://github.com/vitejs/awesome-vite#ssr) 的高级 SSR 插件和工具。 +:::warning 底层 API +这个 API 在 Vite 5.1 中作为一个实验性特性引入。它被添加以 [收集反馈](https://github.com/vitejs/vite/discussions/15774)。在Vite 5.2 中，它可能会有破坏性的变化，所以在使用它时，请确保将 Vite 版本固定在 `~5.1.0`。这是一个面向库和框架作者的底层 API。如果你的目标是开发应用，请确保首先查看 [Vite SSR 精选板块](https://github.com/vitejs/awesome-vite#ssr) 的高级 SSR 插件和工具。 目前，这种 API 正在以 [环境 API](https://github.com/vitejs/vite/discussions/16358) 的形式进行修正，并在 `^6.0.0-alpha.0` 版本中发布。 ::: diff --git a/guide/ssr.md b/guide/ssr.md index 413541c5..82271df5 100644 --- a/guide/ssr.md +++ b/guide/ssr.md @@ -6,7 +6,7 @@ SSR 特别指支持在 Node.js 中运行相同应用程序的前端框架（例 下面的指南还假定你在选择的框架中有使用 SSR 的经验，并且只关注特定于 Vite 的集成细节。 ::: -:::warning Low-level API +:::warning 底层 API 这是一个底层 API，是为库和框架作者准备的。如果你的目标是构建一个应用程序，请确保优先查看 [Vite SSR 章节](https://github.com/vitejs/awesome-vite#ssr) 中更上层的 SSR 插件和工具。也就是说，大部分应用都是基于 Vite 的底层 API 之上构建的。 目前，Vite 正在用 [环境 API](https://github.com/vitejs/vite/discussions/16358) 来改进 SSR API。查看链接了解更多详情。