diff --git a/.vitepress/theme/composables/sponsor.ts b/.vitepress/theme/composables/sponsor.ts index 4636f777..9fa0ebee 100644 --- a/.vitepress/theme/composables/sponsor.ts +++ b/.vitepress/theme/composables/sponsor.ts @@ -35,9 +35,9 @@ const viteSponsors: Pick = { special: [ // sponsors patak-dev { - name: 'StackBlitz', - url: 'https://stackblitz.com', - img: '/stackblitz.svg', + name: 'Bolt', + url: 'https://bolt.new', + img: '/bolt.svg', }, // sponsors antfu { diff --git a/.vitepress/theme/styles/vars.css b/.vitepress/theme/styles/vars.css index 431b85ae..9c73cf8f 100644 --- a/.vitepress/theme/styles/vars.css +++ b/.vitepress/theme/styles/vars.css @@ -89,7 +89,7 @@ } .vp-sponsor-grid.big .vp-sponsor-grid-image { - max-height: 96px; + max-height: 56px; } .vp-sponsor-grid.mini .vp-sponsor-grid-image[alt='Bit'] { diff --git a/config/shared-options.md b/config/shared-options.md index 5699d03d..8e549864 100644 --- a/config/shared-options.md +++ b/config/shared-options.md @@ -54,7 +54,7 @@ export default defineConfig({ ``` ::: tip NOTE -对于使用 TypeScript 的开发者来说，请确保在 `env.d.ts` 或 `vite-env.d.ts` 文件中添加类型声明，以获得类型检查以及代码提示。 +对于使用 TypeScript 的开发者来说，请确保在 `vite-env.d.ts` 文件中添加类型声明，以获得类型检查以及代码提示。 示例： diff --git a/guide/api-environment-frameworks.md b/guide/api-environment-frameworks.md index 11d3b753..88ae4eac 100644 --- a/guide/api-environment-frameworks.md +++ b/guide/api-environment-frameworks.md @@ -84,7 +84,7 @@ Vite 会检查 `dispatchFetch` 方法的输入和输出：请求必须是全局 ## 默认 `RunnableDevEnvironment` {#default-runnabledevenvironment} -假设我们有一个配置为中间件模式的 Vite 服务器，如 [SSR 设置指南](/guide/ssr#setting-up-the-dev-server) 所述，我们可以使用环境 API 来实现 SSR 中间件。省略了错误处理。 +假设我们有一个配置为中间件模式的 Vite 服务器，如 [SSR 设置指南](/guide/ssr#setting-up-the-dev-server) 所述，我们可以使用环境 API 来实现 SSR 中间件。请记住，它不必命名为 `ssr`，因此在本例中我们将其命名为 `server`。错误处理部分已省略。 ```js import fs from 'node:fs' @@ -94,7 +94,7 @@ import { createServer } from 'vite' const __dirname = path.dirname(fileURLToPath(import.meta.url)) -const server = await createServer({ +const viteServer = await createServer({ server: { middlewareMode: true }, appType: 'custom', environments: { @@ -106,7 +106,7 @@ const server = await createServer({ // 在 TypeScript 中，你可能需要将这个转换为 RunnableDevEnvironment，或者 // 使用 "isRunnableDevEnvironment" 来保护对运行器的访问 -const environment = server.environments.node +const serverEnvironment = viteServer.environments.server app.use('*', async (req, res, next) => { const url = req.originalUrl @@ -118,12 +118,14 @@ app.use('*', async (req, res, next) => { // 2. 应用 Vite HTML 转换。这将注入 Vite HMR 客户端， // 并应用来自 Vite 插件的 HTML 转换，例如 // @vitejs/plugin-react 提供的全局前置代码 - template = await server.transformIndexHtml(url, template) + template = await viteServer.transformIndexHtml(url, template) // 3. 加载服务器入口文件。import(url) 自动将 // ESM 源代码转换为 Node.js 可用的代码！ // 不需要打包，并且提供全面的 HMR 支持。 - const { render } = await environment.runner.import('/src/entry-server.js') + const { render } = await serverEnvironment.runner.import( + '/src/entry-server.js', + ) // 4. 渲染应用的 HTML。将假设 entry-server.js 导出的 // `render` 函数调用了对应框架的 SSR API， diff --git a/guide/api-environment-instances.md b/guide/api-environment-instances.md index ee2ddff4..c6d5851a 100644 --- a/guide/api-environment-instances.md +++ b/guide/api-environment-instances.md @@ -18,8 +18,8 @@ // 创建服务器，或通过 configureServer 钩子来获取 const server = await createServer(/* 选项 */) -const environment = server.environments.client -environment.transformRequest(url) +const clientEnvironment = server.environments.client +clientEnvironment.transformRequest(url) console.log(server.environments.ssr.moduleGraph) ``` diff --git a/guide/api-environment.md b/guide/api-environment.md index 8eb5361b..b31b4fde 100644 --- a/guide/api-environment.md +++ b/guide/api-environment.md @@ -22,7 +22,7 @@ Vite 6 正式引入了环境（Environments）的概念。在 Vite 5 之前， 当我们移动到一个典型的服务器端渲染（SSR）应用程序时，我们将有两个环境： - `client`: 在浏览器中运行应用程序。 -- `server`: 在 node（或其他服务器运行时）中运行应用程序，渲染页面后再发送到浏览器。 +- `ssr`: 在 node（或其他服务器运行时）中运行应用程序，渲染页面后再发送到浏览器。 在开发过程中，Vite 会在与 Vite 开发服务器相同的 Node 进程中执行服务器代码，从而接近生产环境。不过，服务器也有可能在其他 JS 运行时中运行，如 [Cloudflare 的 workerd](https://github.com/cloudflare/workerd)，它们有不同的限制。现代应用程序也可能在两个以上的环境中运行，例如浏览器、节点服务器和边缘服务器。Vite 5 无法正确表示这些环境。 diff --git a/guide/api-hmr.md b/guide/api-hmr.md index 7b8fba8a..ce5cd505 100644 --- a/guide/api-hmr.md +++ b/guide/api-hmr.md @@ -61,9 +61,9 @@ if (import.meta.hot) { ``` ## TypeScript 的智能提示 {#intellisense-for-typescript} -Vite 在 [`vite/client.d.ts`](https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts) 中为 `import.meta.hot` 提供了类型定义。你可以在 `src` 目录中创建一个 `env.d.ts`，以便 TypeScript 获取类型定义： +Vite 在 [`vite/client.d.ts`](https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts) 中为 `import.meta.hot` 提供了类型定义。你可以在 `src` 目录中创建一个 `vite-env.d.ts`，以便 TypeScript 获取类型定义： -```ts +```ts [vite-env.d.ts] /// ``` diff --git a/guide/features.md b/guide/features.md index 238ed2fd..65c8c154 100644 --- a/guide/features.md +++ b/guide/features.md @@ -153,7 +153,7 @@ Vite 默认的类型定义是写给它的 Node.js API 的。要将其补充到 export default content } ``` -- The file containing the reference to `vite/client`: +- The file containing the reference to `vite/client` (normally `vite-env.d.ts`): ```ts /// /// diff --git a/guide/index.md b/guide/index.md index 2bfb6ad1..aa298c11 100644 --- a/guide/index.md +++ b/guide/index.md @@ -20,7 +20,7 @@ Vite 还提供了强大的扩展性，可通过其 [插件 API](./api-plugin) ## 浏览器支持 {#browser-support} -在开发阶段，Vite 将 [`esnext` 作为转换目标](https://esbuild.github.io/api/#target)，因为我们假设使用的是现代浏览器，它支持所有最新的 JavaScript 和 CSS 特性。这样可以防止语法降级，让 Vite 尽可能地接近原始源代码。 +在开发过程中，Vite 假设使用的是现代浏览器。这意味着该浏览器支持大多数最新的 JavaScript 和 CSS 功能。因此，Vite 将 [`esnext` 设置为转换目标](https://esbuild.github.io/api/#target)。这可以防止语法降低，使 Vite 能够尽可能接近原始源代码提供模块。Vite 会注入一些运行时代码以使开发服务器正常工作。这些代码使用了 [Baseline](https://web-platform-dx.github.io/web-features/) 中包含的功能，该功能在每个主要版本发布时（此主要版本为 2025-05-01）新增。 对于生产环境构建，Vite 默认以 [Baseline](https://web-platform-dx.github.io/web-features/) 广泛可用的浏览器为目标平台。这些浏览器至少发布于两年半之前。您可以通过配置降低目标浏览器版本。此外，可以通过官方 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 支持旧版浏览器。更多详情，请参阅 [构建生产环境](./build) 部分。 diff --git a/guide/rolldown.md b/guide/rolldown.md index 6be84b45..b9266078 100644 --- a/guide/rolldown.md +++ b/guide/rolldown.md @@ -126,7 +126,7 @@ export default defineConfig({ svgr({ /*...*/ }), - { load: { id: /\.svg?react$/ } }, + { load: { id: /\.svg\?react$/ } }, ), ], }) diff --git a/public/bolt.svg b/public/bolt.svg new file mode 100644 index 00000000..d7e24ff1 --- /dev/null +++ b/public/bolt.svg @@ -0,0 +1 @@ + \ No newline at end of file