Rslib

该 addon 会从你的 Rslib 配置文件中加载 Rsbuild config 的可复用部分，同时避免仅用于 library build 的设置进入 Storybook preview build。

它还允许你在 Storybook 内开发 mf (Module Federation) 格式。

完整的参考实现请查看 React 组件库示例。

快速开始

安装

npm

yarn

pnpm

bun

deno

npm install @rsbuild/core storybook-addon-rslib -D

请直接安装 @rsbuild/core，这样 addon 与你的 framework 包所使用的版本就会固定在你自己的 lockfile 中。请将其与你在项目 framework 指南中所选的 framework 包（例如 storybook-react-rsbuild）配合使用。

配置 `.storybook/main.ts`

.storybook/main.ts

export default {
  addons: string[]addons: ['storybook-addon-rslib'],
}

选中的 Rslib 配置在合并到 Storybook 之前，会经过 Builder 选项中记录的同一 inherited-config 边界。Plugin 会继续继承；可以使用 Storybook CLI 的 process.env.STORYBOOK 标志，有条件地排除仅供应用使用的 side-effect plugin。可以使用 modifyLibRsbuildConfig 为 Storybook 显式恢复已剥离的字段，也可以使用 Storybook 的 rsbuildFinal 进行最终配置。这两个 hook 都在继承字段被剥离后执行。

或者手动配置该 addon：

.storybook/main.ts

export default {
  addons: {
    name: string;
    options: {};
}[]
addons: [
    {
      name: stringname: 'storybook-addon-rslib',
      options: {}options: {
        // Check options section.
      },
    },
  ],
}

Module Federation

请参阅 Rslib Module Federation 文档，以便在 Storybook 中加载 mf 产物前先做好准备。

选项

export interface AddonOptions {
  rslib?: {
    /**
     * `cwd` passed to loadConfig of Rslib
     * @default undefined
     */
    cwd?: string
    /**
     *  `path` passed to loadConfig of Rslib
     * @default undefined
     */
    configPath?: string
    /**
     * The lib config index in `lib` field to use, will be merged with the other fields in the config.
     * Set to a number to use the lib config at that index.
     * Set to `false` to disable using the lib config.
     * @default 0
     */
    libIndex?: number | false
    /**
     * Modify the Rslib lib config before transforming it to Rsbuild config which will be merged
     * with Storybook. You can modify the configuration in the config parameters in place.
     * @experimental subject to change at any time
     * @default undefined
     */
    modifyLibConfig?: (config: LibConfig) => void
    /**
     * Modify the Rsbuild config transformed from lib config after inherited fields are stripped
     * and before merging with Storybook config. You can modify the configuration in the config
     * parameters in place, including explicitly restoring stripped fields.
     * @experimental subject to change at any time
     * @default undefined
     */
    modifyLibRsbuildConfig?: (config: RsbuildConfig) => void
  }
}

#Rslib

#快速开始

#安装

#配置 .storybook/main.ts

#Module Federation

#选项

Rslib

快速开始

安装

配置 `.storybook/main.ts`

Module Federation

选项