Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,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',
Expand Down
2 changes: 1 addition & 1 deletion config/dep-optimization-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

默认情况下,Vite 会抓取你的 `index.html` 来检测需要预构建的依赖项(忽略了`node_modules`、`build.outDir`、`__tests__` 和 `coverage`)。如果指定了 `build.rollupOptions.input`,Vite 将转而去抓取这些入口点。

如果这两者都不合你意,则可以使用此选项指定自定义条目——该值需要遵循 [fast-glob 模式](https://github.com/mrmlnc/fast-glob#basic-syntax) ,或者是相对于 Vite 项目根目录的匹配模式数组。当显式声明了 `optimizeDeps.entries` 时默认只有 `node_modules` 和 `build.outDir` 文件夹会被忽略。如果还需忽略其他文件夹,你可以在模式列表中使用以 `!` 为前缀的、用来匹配忽略项的模式。
如果这两者都不合你意,则可以使用此选项指定自定义条目——该值需要遵循 [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}

Expand Down
6 changes: 4 additions & 2 deletions guide/api-vite-runtime.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
# 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` 版本中发布。
:::

"Vite 运行时" 是一个工具,它允许首先用 Vite 插件处理任何代码后运行。它与 `server.ssrLoadModule` 不同,因为运行时实现是从服务器解耦的。这允许库和框架作者实现他们自己的服务器和运行时之间的通信层。
Expand Down
17 changes: 6 additions & 11 deletions guide/ssr.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ 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。查看链接了解更多详情。
:::

:::tip 帮助
Expand Down Expand Up @@ -138,17 +140,10 @@ app.use('*', async (req, res, next) => {
// 例如:@vitejs/plugin-react 中的 global preambles
template = await vite.transformIndexHtml(url, template)

// 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')

// 4. 渲染应用的 HTML。这假设 entry-server.js 导出的 `render`
// 函数调用了适当的 SSR 框架 API。
Expand Down Expand Up @@ -183,7 +178,7 @@ app.use('*', async (req, res, next) => {
为了将 SSR 项目交付生产,我们需要:

1. 正常生成一个客户端构建;
2. 再生成一个 SSR 构建,使其通过 `import()` 直接加载,这样便无需再使用 Vite 的 `ssrLoadModule` 或 `runtime.executeEntrypoint`
2. 再生成一个 SSR 构建,使其通过 `import()` 直接加载,这样便无需再使用 Vite 的 `ssrLoadModule`;

`package.json` 中的脚本应该看起来像这样:

Expand All @@ -203,7 +198,7 @@ app.use('*', async (req, res, next) => {

- 使用 `dist/client/index.html` 作为模板,而不是根目录的 `index.html`,因为前者包含了到客户端构建的正确资源链接。

- 使用 `import('./dist/server/entry-server.js')` (该文件是 SSR 构建产物),而不是使用 `await vite.ssrLoadModule('/src/entry-server.js')` 或 `await runtime.executeEntrypoint('/src/entry-server.js')`
- 使用 `import('./dist/server/entry-server.js')` (该文件是 SSR 构建产物),而不是使用 `await vite.ssrLoadModule('/src/entry-server.js')`。

- 将 `vite` 开发服务器的创建和所有使用都移到 dev-only 条件分支后面,然后添加静态文件服务中间件来服务 `dist/client` 中的文件。

Expand Down