@astrojs/ svelte
此 Astro 整合 为你的 Svelte 组件启用服务器端渲染和客户端水合作用。它支持 Svelte 3、4 和 5（实验性）。
¥This Astro integration enables server-side rendering and client-side hydration for your Svelte components. It supports Svelte 3, 4, and 5 (experimental).
¥Installation
Astro 包含一个 astro add 命令来自动设置官方集成。如果你愿意，你可以改用 安装集成手动。
¥Astro includes an astro add command to automate the setup of official integrations. If you prefer, you can install integrations manually instead.
要安装 @astrojs/svelte，请从项目目录运行以下命令并按照提示操作：
¥To install @astrojs/svelte, run the following from your project directory and follow the prompts:
npx astro add sveltepnpm astro add svelteyarn astro add svelte如果你遇到任何问题，请 请随时在 GitHub 上向我们报告 并尝试下面的手动安装步骤。
¥If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.
¥Manual Install
首先，安装 @astrojs/svelte 包：
¥First, install the @astrojs/svelte package:
npm install @astrojs/sveltepnpm add @astrojs/svelteyarn add @astrojs/svelte大多数包管理器也会安装相关的对等依赖。如果你在启动 Astro 时看到 “找不到包 ‘svelte’“（或类似）警告，则需要安装 Svelte：
¥Most package managers will install associated peer dependencies as well. If you see a “Cannot find package ‘svelte’” (or similar) warning when you start up Astro, you’ll need to install Svelte:
npm install sveltepnpm add svelteyarn add svelte然后，使用 integrations 属性将集成应用于你的 astro.config.* 文件：
¥Then, apply the integration to your astro.config.* file using the integrations property:
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ // ... integrations: [svelte()],});¥Getting started
要在 Astro 中使用你的第一个 Svelte 组件，请前往我们的 UI 框架文档。你将探索：
¥To use your first Svelte component in Astro, head to our UI framework documentation. You’ll explore:
-
📦 如何加载框架组件，
-
💧 客户端水合选项，以及
-
🤝 将框架混合和嵌套在一起的机会
¥Options
该集成由 @sveltejs/vite-plugin-svelte 提供支持。要自定义 Svelte 编译器，可以为集成提供选项。有关详细信息，请参阅 @sveltejs/vite-plugin-svelte 文档。
¥This integration is powered by @sveltejs/vite-plugin-svelte. To customize the Svelte compiler, options can be provided to the integration. See the @sveltejs/vite-plugin-svelte docs for more details.
¥Default options
此集成将以下默认选项传递给 Svelte 编译器：
¥This integration passes the following default options to the Svelte compiler:
const defaultOptions = { emitCss: true, compilerOptions: { dev: isDev, hydratable: true }, preprocess: vitePreprocess(),};这些 emitCss、compilerOptions.dev 和 compilerOptions.hydratable 值是为 Astro 正确构建所必需的，并且不能被覆盖。
¥These emitCss, compilerOptions.dev, and compilerOptions.hydratable values are required to build properly for Astro and cannot be overridden.
提供你自己的 preprocess 选项将覆盖 vitePreprocess() 默认值。确保启用项目所需的预处理器标志。
¥Providing your own preprocess options will override the vitePreprocess() default. Make sure to enable the preprocessor flags needed for your project.
你可以通过将选项传递到 astro.config.mjs 或 svelte.config.js 中的 svelte 集成来设置选项。其中任何一个都会覆盖默认的 preprocess 设置：
¥You can set options either by passing them to the svelte integration in astro.config.mjs or in svelte.config.js. Either of these would override the default preprocess setting:
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ integrations: [svelte({ preprocess: [] })],});export default { preprocess: [],};TypeScript 智能感知
Section titled TypeScript 智能感知¥Intellisense for TypeScript
Added in:@astrojs/svelte@2.0.0
如果你在 Svelte 文件中使用 TypeScript 或 SCSS 等预处理器，则可以创建 svelte.config.js 文件，以便 Svelte IDE 扩展可以正确解析 Svelte 文件。
¥If you’re using a preprocessor like TypeScript or SCSS in your Svelte files, you can create a svelte.config.js file so that the Svelte IDE extension can correctly parse the Svelte files.
import { vitePreprocess } from '@astrojs/svelte';
export default { preprocess: vitePreprocess(),};当你运行 astro add svelte 时，该配置文件将自动为你添加。
¥This config file will be automatically added for you when you run astro add svelte.
