#Solid 插件

Solid 插件提供了对 Solid 的支持，插件内部集成了 babel-preset-solid。

#快速开始

#安装插件

执行以下命令安装插件：

npm add @rsbuild/plugin-babel @rsbuild/plugin-solid -D

yarn add @rsbuild/plugin-babel @rsbuild/plugin-solid -D

pnpm add @rsbuild/plugin-babel @rsbuild/plugin-solid -D

bun add @rsbuild/plugin-babel @rsbuild/plugin-solid -D

deno add npm:@rsbuild/plugin-babel npm:@rsbuild/plugin-solid -D

#注册插件

在 Rsbuild 配置中注册插件：

import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginSolid } from '@rsbuild/plugin-solid';

export default {
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
    }),
    pluginSolid(),
  ],
};

注册后，即可进行 Solid 开发。

#Solid v2

Solid v2 支持目前处于 beta 阶段。要使用 Solid v2，请安装 @rsbuild/plugin-solid 的 beta 版本：

npm add @rsbuild/plugin-babel @rsbuild/plugin-solid@beta -D

yarn add @rsbuild/plugin-babel @rsbuild/plugin-solid@beta -D

pnpm add @rsbuild/plugin-babel @rsbuild/plugin-solid@beta -D

bun add @rsbuild/plugin-babel @rsbuild/plugin-solid@beta -D

deno add npm:@rsbuild/plugin-babel npm:@rsbuild/plugin-solid@beta -D

#解析行为

Solid 插件会将 solid 添加到 Rsbuild 的 resolve.conditionNames 中，使 package exports 可以解析到 Solid 专属的入口。

在开发模式下，插件还会添加 development，用于解析 Solid 的开发环境运行时，并启用开发环境编译转换。你可以通过 dev: false 同时关闭这两项行为。

如果你配置了 resolve.conditionNames，插件会保留已有配置，并在前面添加这些 Solid 条件。

#选项

如果你需要自定义 Solid 的编译行为，可以使用以下配置项。

#dev

是否启用 Solid 的开发环境运行时和编译转换。设置为 false 可以在开发模式下同时禁用两者，设置为 true 可以在生产模式下同时启用两者。

如果显式配置 solid.dev，它会覆盖编译转换的 dev 设置，但不会影响运行时解析。

• 类型： boolean
• 默认值： 开发模式下为 true，生产模式下为 false
• 示例：

pluginSolid({
  dev: false,
});

#refresh.disabled

是否在开发模式下禁用 Solid Refresh HMR。该选项只控制 refresh 转换，不会禁用 Rsbuild HMR。

• 类型： boolean
• 默认值： false
• 示例：

pluginSolid({
  refresh: {
    disabled: true,
  },
});

#refresh.granular

是否生成组件级元数据，使代码变更时仅重新挂载实际发生变化的组件。

• 类型： boolean
• 默认值： true
• 版本： >= 2.0.0
• 示例：

pluginSolid({
  refresh: {
    granular: false,
  },
});

#ssr

是否生成 Solid SSR 输出。启用后，插件会为 Node.js target 设置 generate: 'ssr' 和 hydratable: true，为其他 target 设置 generate: 'dom' 和 hydratable: true。

solid 中的配置会覆盖这些默认值。

• 类型： boolean
• 默认值： false
• 示例：

pluginSolid({
  ssr: true,
});

#solid

传递给 babel-preset-solid 的选项，请查阅 babel-preset-solid 文档 来了解具体用法。

• 类型： SolidPresetOptions
• 默认值： {}
• 示例：

pluginSolid({
  solid: {
    generate: 'ssr',
    hydratable: true,
  },
});

solidPresetOptions 是 solid 的废弃别名，请使用 solid 代替。如果两个选项同时设置，则 solid 优先生效。