跳转到内容

@astrojs/ solid-js

此 **Astro 集成**为你的 SolidJS 组件启用服务器端渲染和客户端水合。

有两种方式可以将集成添加到你的项目当中,先让我们从最方便的方式来入手!

Astro 包含一个 CLI 工具来提供一等集成支持,astro add 这个命令将会:

  1. 安装所有必须的依赖和对等依赖(可选)
  2. 更新你的 astro.config.* 文件,以应用当前的集成(同样可选)

要安装 @astrojs/solid-js,需要在你的项目工程中依次运行以下命令:

Terminal window
# 使用 NPM
npx astro add solid
# 使用 Yarn
yarn astro add solid
# 使用 PNPM
pnpm astro add solid

如果你有任何问题,欢迎随时在 GitHub 上开个 issue 来向我们报告 然后尝试执行以下的手动安装步骤。

首先像下面这样安装 @astrojs/solid-js 集成:

Terminal window
npm install @astrojs/solid-js

大多数包管理器将会安装关联的对等依赖,如果你在启动 Astro 的时候仍然遇到 “Cannot find package ‘solid-js’” 或者相似的警告,你将需要手动安装 SolidJS:

Terminal window
npm install solid-js

现在,使用 integrations 属性来应用你的集成到 astro.config.* 文件:

astro.config.mjs
import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid-js';
export default defineConfig({
// ...
integrations: [solid()],
// ^^^^^^^
});

要在 Astro 使用你的 SolidJS 组件,你可以移步我们的 UI 框架文档. 你将会了解到:

  • 📦 如何加载框架组件
  • 💧 客户端水合选项
  • 🤝 将框架混合和嵌套在一起的时机

当你在同一个项目中使用多个 JSX 框架(React、Preact、Solid)时,Astro 需要确定每个组件应该使用哪个 JSX 框架的转换器(transformation)。如果你只向你的项目中添加了一个 JSX 框架集成,那么就不需要额外的配置。

使用 include(必填)和 exclude(可选)配置选项来指定哪些文件属于哪个框架。为你使用的每个框架提供一个文件或/和文件夹数组。通配符可用于包含多个文件路径。

我们建议将每个框架的组件放在同一个文件夹中(例如 /components/react//components/solid/),以便更容易地指定你的包含内容,但这不是必需的:

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';
export default defineConfig({
// 启用多个框架来支持所有不同类型的组件。
// 如果你只使用一个 JSX 框架,则不需要 `include`!
integrations: [
preact({
include: ['**/preact/*'],
}),
react({
include: ['**/react/*'],
}),
solid({
include: ['**/solid/*'],
}),
],
});

如需帮助,请查看我们在 Discord 上的 #support 频道。我们友好的支持小队成员随时为你提供帮助!

你也可以查看我们的 Astro 集成文档 以获取集成的更多信息。

该 Astro 包是由核心团队维护的,欢迎提交 issue 和 PR!

其他

UI 框架

SSR 适配器

其他