配置

Storybook Rsbuild 提供了多种自定义构建流程和行为的方式。本指南介绍可在 .storybook/main.ts 中使用的配置项。

Storybook 文档

本指南聚焦于 Rsbuild 特有的配置。关于通用的 Storybook 配置（stories、addons、refs 等），请参阅 Storybook Configure 文档。

rsbuildFinal

rsbuildFinal 字段让你能够直接访问 Rsbuild 配置。你可以用它来自定义构建配置，类似于 Webpack builder 中的 webpackFinal。

该函数接收当前的 Rsbuild 配置和一个 options 对象，并应返回修改后的配置。

使用

mergeRsbuildConfig 进行修改始终使用来自 @rsbuild/core 的 mergeRsbuildConfig 来修改配置。直接修改诸如 config.tools.rspack = {...} 之类的属性可能不会生效，因为内部配置可能是函数/对象组成的数组，直接赋值可能会被静默忽略。

.storybook/main.ts

import type { import StorybookConfigStorybookConfig } from 'storybook-react-rsbuild';
import { import mergeRsbuildConfigmergeRsbuildConfig } from '@rsbuild/core';

const const config: StorybookConfigconfig: import StorybookConfigStorybookConfig = {
  framework: stringframework: 'storybook-react-rsbuild',
  stories: string[]stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: never[]addons: [],
  async function rsbuildFinal(config: any, { configType }: {
    configType: any;
}): Promise<any>
rsbuildFinal(config: anyconfig, { configType: anyconfigType }) {
    // Customize Rsbuild config here
    if (configType: anyconfigType === 'PRODUCTION') {
      return import mergeRsbuildConfigmergeRsbuildConfig(config: anyconfig, {
        performance: {
    removeConsole: boolean;
}
performance: {
          removeConsole: booleanremoveConsole: true,
        },
      });
    }

    // Example: add resolve alias
    return import mergeRsbuildConfigmergeRsbuildConfig(config: anyconfig, {
      resolve: {
    alias: {
        '@components': string;
    };
}
resolve: {
        alias: {
    '@components': string;
}
alias: {
          '@components': './src/components',
        },
      },
    });
  },
};

export default const config: StorybookConfigconfig;

Builder 选项

你可以通过 core.builder 选项配置底层的 Rsbuild builder。

.storybook/main.ts

import type { import StorybookConfigStorybookConfig } from 'storybook-react-rsbuild';

const const config: StorybookConfigconfig: import StorybookConfigStorybookConfig = {
  framework: stringframework: 'storybook-react-rsbuild',
  stories: never[]stories: [],
  core: {
    builder: {
        name: string;
        options: {
            rsbuildConfigPath: string;
            fsCache: boolean;
        };
    };
}
core: {
    builder: {
    name: string;
    options: {
        rsbuildConfigPath: string;
        fsCache: boolean;
    };
}
builder: {
      name: stringname: 'storybook-builder-rsbuild',
      options: {
    rsbuildConfigPath: string;
    fsCache: boolean;
}
options: {
        // Path to your existing rsbuild.config.ts
        // Defaults to the root rsbuild.config.ts if found
        rsbuildConfigPath: stringrsbuildConfigPath: './custom-rsbuild.config.ts',
        
        // Enable filesystem cache for faster rebuilds
        // Default: false
        fsCache: booleanfsCache: true,
        
        // Enable lazy compilation (experimental)
        // lazyCompilation: true,

        // Specify Rsbuild environment to use (for multi-environment configs)
        // environment: 'web',
      },
    },
  },
};

export default const config: StorybookConfigconfig;

选项参考

Option	Type	Default	Description
`rsbuildConfigPath`	`string`	`cwd/rsbuild.config.ts`	待合并的已有 Rsbuild 配置文件路径。
`fsCache`	`boolean`	`false`	启用 Rspack 的持久化文件系统缓存。
`lazyCompilation`	`boolean`	`false`	启用 lazy compilation 以加快开发启动速度。
`environment`	`string`	`undefined`	从 Rsbuild 配置中选择特定的 environment。

Webpack Addons 兼容性

由于 Rspack 兼容 webpack 的 loader/plugin API，你通常可以使用为 Webpack 设计的 Storybook addon。为此，请使用 webpackAddons 字段而非 addons。

.storybook/main.ts

import type { import StorybookConfigStorybookConfig } from 'storybook-react-rsbuild';

const const config: StorybookConfigconfig: import StorybookConfigStorybookConfig = {
  framework: stringframework: 'storybook-react-rsbuild',
  stories: never[]stories: [],
  // Addons that depend on Webpack loaders/plugins
  webpackAddons: string[]webpackAddons: [
    '@storybook/addon-coverage',
  ],
};

export default const config: StorybookConfigconfig;

Framework 选项

framework 特有的选项让你能够为 React、Vue 等定制行为。

React 选项

对于 storybook-react-rsbuild，你可以配置 reactDocgen 和 legacy root API。

.storybook/main.ts

import type { import StorybookConfigStorybookConfig } from 'storybook-react-rsbuild';

const const config: StorybookConfigconfig: import StorybookConfigStorybookConfig = {
  framework: {
    name: string;
    options: {
        strictMode: boolean;
        legacyRootApi: boolean;
    };
}
framework: {
    name: stringname: 'storybook-react-rsbuild',
    options: {
    strictMode: boolean;
    legacyRootApi: boolean;
}
options: {
      // Configure strict mode
      strictMode: booleanstrictMode: true,
      
      // Use legacy ReactDOM.render instead of createRoot (React 18+)
      legacyRootApi: booleanlegacyRootApi: false,
    },
  },
  stories: never[]stories: [],
  typescript: {
    reactDocgen: string;
    reactDocgenTypescriptOptions: {
        propFilter: (prop: any) => boolean;
    };
}
typescript: {
    // Configure docgen for TypeScript
    // 'react-docgen-typescript' | 'react-docgen' | false
    reactDocgen: stringreactDocgen: 'react-docgen-typescript',
    
    // Pass options to react-docgen-typescript-plugin
    reactDocgenTypescriptOptions: {
    propFilter: (prop: any) => boolean;
}
reactDocgenTypescriptOptions: {
      propFilter: (prop: any) => booleanpropFilter: (prop: anyprop) => {
        return prop: anyprop.parent ? !/node_modules/.RegExp.test(string: string): booleanReturns a Boolean value that indicates whether or not a pattern exists in a searched string.
@paramstring  String on which to perform the search.test(prop: anyprop.parent.fileName) : true;
      },
    },
  }
};

export default const config: StorybookConfigconfig;

TypeScript 选项

Storybook Rsbuild 使用 @rsbuild/plugin-type-check 进行类型检查。你可以通过 typescript 字段对其进行配置。

.storybook/main.ts

import type { import StorybookConfigStorybookConfig } from 'storybook-react-rsbuild';

const const config: StorybookConfigconfig: import StorybookConfigStorybookConfig = {
  framework: stringframework: 'storybook-react-rsbuild',
  stories: never[]stories: [],
  typescript: {
    check: boolean;
    checkOptions: {
        typescript: {
            memoryLimit: number;
        };
    };
}
typescript: {
    // Enable/disable fork-ts-checker-webpack-plugin
    check: booleancheck: true,
    
    // Options passed to fork-ts-checker-webpack-plugin
    checkOptions: {
    typescript: {
        memoryLimit: number;
    };
}
checkOptions: {
      typescript: {
    memoryLimit: number;
}
typescript: {
        memoryLimit: numbermemoryLimit: 4096,
      },
    },
  },
};

export default const config: StorybookConfigconfig;

通用的 TypeScript 配置请参阅 Storybook TypeScript 文档。

#配置

#rsbuildFinal

#Builder 选项

#选项参考

#Webpack Addons 兼容性

#Framework 选项

#React 选项

#TypeScript 选项

配置

rsbuildFinal

Builder 选项

选项参考

Webpack Addons 兼容性

Framework 选项

React 选项

TypeScript 选项