@astrojs/svelte
此 Astro 集成 为你的 Svelte 组件启用服务器端渲染和客户端注入。它支持 Svelte 3、Svelte 4 以及 Svelte 5 版本(实验性)。
安装
有两种方式可以将集成添加到你的项目当中,先让我们从最方便的方式来入手!
astro add
命令
Astro 包含来一个 CLI 工具来提供一等集成支持,astro add
这个命令将会:
- 安装所有必须的依赖和对等依赖(可选)
- 更新你的
astro.config.*
文件,以应用当前的集成(同样可选)
安装 @astrojs/svelte
,需要在你的项目工程中依次运行以下命令:
如果你有任何问题,欢迎随时在 GitHub 上开个 issue 来向我们报告 然后尝试执行以下的手动安装步骤。
手动安装依赖项
首先像下面这样安装 @astrojs/svelte
集成:
大多数包管理器将会安装关联的对等依赖,如果你在启动 Astro 的时候仍然遇到 “Cannot find package ‘svelte’” 或者相似的警告,你将需要手动安装 Svelte:
现在,使用 integrations
属性来应用你的集成到 astro.config.*
文件:
入门
要在 Astro 使用你的 Svelte 组件,你可以移步我们的 UI 框架文档. 你将会了解到:
- 📦 如何加载框架组件
- 💧 客户端合成注水选项
- 🤝 将框架混合和嵌套在一起的时机
疑难解答
如需帮助,请查看我们在 Discord 上的 #support
频道。我们友好的支持小队成员随时为你提供帮助!
你也可以查看我们的 Astro 集成文档 以获取集成的更多信息。
贡献
该 Astro 包是由核心团队维护的,欢迎提交 issue 和 PR!
选项
此集成由 @sveltejs/vite-plugin-svelte
提供支持的,要定制 Svelte 编译器,你可以传递选项给当前集成,查看 @sveltejs/vite-plugin-svelte
文档 获取更多细节。
默认选项
此集成将以下默认选项传递给 Svelte 编译器:
这些 emitCss
、 compilerOptions.dev
和 compilerOptions.hydratable
选项对于构建过程来说是必传的,并且不能被赋值。
如果你传递自定义的 preprocess
选项,这将会覆盖 vitePreprocess()
的默认值。确保根据你的项目实际需求来开启预处理配置。
你可以通过在 astro.config.mjs
或者 svelte.config.js
文件中传递这个选项配置给 svelte
集成,这两种方式都将覆盖默认的 preprocess
设置:
TypeScript 智能提示
添加于: @astrojs/svelte@2.0.0
如果你的文件中使用了像 TypeScript 或 SCSS 预处理器,你可以创建一个 svelte.config.js
文件,确保 Svelte IDE 拓展能够正确解析 Svelte 文件。
当你运行 astro add svelte
指令的时候,将自动为你添加配置文件。