Skip to content

i18n(zh-cn): Update svelte.mdx #10041

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 19, 2024
Merged
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
33 changes: 8 additions & 25 deletions src/content/docs/zh-cn/guides/integrations-guide/svelte.mdx
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ i18nReady: true
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

**[Astro 集成][astro-integration]** 为你的 [Svelte](https://svelte.dev/) 组件启用服务器端渲染和客户端注入。它支持 Svelte 3、Svelte 4 以及 Svelte 5 版本(实验性)
**[Astro 集成][astro-integration]** 为你的 [Svelte](https://svelte.dev/) 5 的组件启用服务器端渲染和客户端注入。对于 Svelte 3 和 4 的支持, 请安装 `@astrojs/svelte@5` 作为替代

## 安装

@@ -100,48 +100,31 @@ export default defineConfig({

## 选项


此集成由 `@sveltejs/vite-plugin-svelte` 提供支持的,要定制 Svelte 编译器,你可以传递选项给当前集成,查看 [`@sveltejs/vite-plugin-svelte`文档](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md) 获取更多细节。

### 默认选项

此集成将以下默认选项传递给 Svelte 编译器:

```js
const defaultOptions = {
emitCss: true,
compilerOptions: { dev: isDev, hydratable: true },
preprocess: vitePreprocess(),
};
```

这些 `emitCss``compilerOptions.dev``compilerOptions.hydratable` 选项对于构建过程来说是必传的,并且不能被赋值。

如果你传递自定义的 `preprocess` 选项,这**将会**覆盖 [`vitePreprocess()`](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md) 的默认值。确保根据你的项目实际需求来开启预处理配置。

你可以通过在 `astro.config.mjs` 或者 `svelte.config.js` 文件中传递这个选项配置给 `svelte` 集成,这两种方式都将覆盖默认的 `preprocess` 设置:
你可以通过将选项传递给 `astro.config.mjs` 中的 `svelte` 集成或者 `svelte.config.js` 来设置选项。如果两者都存在,则 `astro.config.mjs` 中的选项将优先于 `svelte.config.js` 中的选项:

```js title="astro.config.mjs" "preprocess: []"
```js title="astro.config.mjs" "extensions: ['.svelte']"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
integrations: [svelte({ preprocess: [] })],
integrations: [svelte({ extensions: ['.svelte'] })],
});
```

```js title="svelte.config.js"
// svelte.config.js
export default {
preprocess: [],
extensions: ['.svelte'],
};
```

## TypeScript 智能提示
## 预处理器

<Since v="2.0.0" pkg="@astrojs/svelte" />

如果你的文件中使用了像 TypeScriptSCSS 预处理器,你可以创建一个 `svelte.config.js` 文件,确保 Svelte IDE 拓展能够正确解析 Svelte 文件。
如果你的文件中使用了 SCSSStylus,那么你可以创建一个 `svelte.config.js` 文件,以便让它们由 Svelte 进行预处理,从而确保 Svelte IDE 拓展能够正确解析 Svelte 文件。

```js title="svelte.config.js"
import { vitePreprocess } from '@astrojs/svelte';
@@ -151,7 +134,7 @@ export default {
};
```

当你运行 `astro add svelte` 指令的时候,将自动为你添加配置文件。
当你运行 `astro add svelte` 指令的时候,将自动为你添加配置文件。参见 [`@sveltejs/vite-plugin-svelte` 文档](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md)以了解更多关于 `vitePreprocess` 的细节。

[astro-integration]: /zh-cn/guides/integrations-guide/