> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# Rslib

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

它还允许你在 Storybook 内开发 `mf` [(Module Federation)](https://rslib.rs/guide/basic/output-format#mf) 格式。

完整的参考实现请查看 [React 组件库示例](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rslib-react-component)。

## 快速开始

### 安装


```sh [npm]
npm install @rsbuild/core storybook-addon-rslib -D
```

```sh [yarn]
yarn add @rsbuild/core storybook-addon-rslib -D
```

```sh [pnpm]
pnpm add @rsbuild/core storybook-addon-rslib -D
```

```sh [bun]
bun add @rsbuild/core storybook-addon-rslib -D
```

```sh [deno]
deno add npm:@rsbuild/core npm:storybook-addon-rslib -D
```

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

### 配置 `.storybook/main.ts`

```ts twoslash title=".storybook/main.ts"
// @noErrors
import type { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['storybook-addon-rslib'],
}

export default config
```

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

或者手动配置该 addon：

```ts twoslash title=".storybook/main.ts"
// @noErrors
import type { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    {
      name: 'storybook-addon-rslib',
      options: {
        // Check options section.
      },
    },
  ],
}

export default config
```

## Module Federation

请参阅 [Rslib Module Federation 文档](https://rslib.rs/guide/advanced/module-federation)，以便在 Storybook 中加载 `mf` 产物前先做好准备。

## 选项

```ts
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
  }
}
```