@astrojs/ solid-js

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

安装

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

`astro add` 命令

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

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

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

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

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

手动安装依赖项

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

npm install @astrojs/solid-js

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

npm install solid-js

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

import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // ...
  integrations: [solid()],
  //             ^^^^^^^
});

入门

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

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

选项

组合多个 JSX 框架

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

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

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

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/*'],
    }),
  ],
});