diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 6b26570d..b753356b 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -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', diff --git a/config/dep-optimization-options.md b/config/dep-optimization-options.md index 07f000a1..9b5ccbaa 100644 --- a/config/dep-optimization-options.md +++ b/config/dep-optimization-options.md @@ -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} diff --git a/guide/api-vite-runtime.md b/guide/api-vite-runtime.md index 82773430..a82b4ff3 100644 --- a/guide/api-vite-runtime.md +++ b/guide/api-vite-runtime.md @@ -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` 不同,因为运行时实现是从服务器解耦的。这允许库和框架作者实现他们自己的服务器和运行时之间的通信层。 diff --git a/guide/ssr.md b/guide/ssr.md index 03bc73fd..82271df5 100644 --- a/guide/ssr.md +++ b/guide/ssr.md @@ -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 帮助 @@ -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。 @@ -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` 中的脚本应该看起来像这样: @@ -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` 中的文件。