#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.config.ts 文件中注册插件：

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

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

注册插件后，你可以直接进行 Solid 开发。

#解析行为

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

在开发模式下，插件还会添加 development，用于解析 Solid 的开发环境运行时。你可以通过 dev: false 关闭该行为。

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

#选项

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

#dev

是否在开发模式下解析 Solid 的开发环境运行时。设置为 false 可以禁用 development condition，设置为 true 可以在生产模式下强制启用 development condition。

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

pluginSolid({
  dev: false,
});

#refresh.disabled

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

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

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

#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 优先生效。