close
  • 简体中文

      • React

      Storybook for React & Rsbuild 让你能够使用应用已经依赖的 Rsbuild 工具链，独立地开发和测试 React 组件。

      环境要求

      PackageVersion
      react≥ 16.8
      @rsbuild/core≥ 1.0.1
      storybook≥ 10.0.0

      快速开始

      在一个已有的、由 Rsbuild 驱动的 React 项目中执行以下步骤。

      安装

      安装 framework 包和 @rsbuild/core。尽管 storybook-react-rsbuild 已将 @rsbuild/core 声明为 peer dependency，但仍建议将其作为直接的 dev dependency 列出，以便版本锁定与 lockfile 审计保持清晰明确。

      npm
      yarn
      pnpm
      bun
      deno
      npm install @rsbuild/core storybook-react-rsbuild -D

      配置 .storybook/main.ts

      import { StorybookConfig } from 'storybook-react-rsbuild'
import { mergeRsbuildConfig } from '@rsbuild/core'

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return mergeRsbuildConfig(config, {
      // your custom config
    })
  },
}

export default config

      就是这么简单！可以查看 React 16 和 React 18 sandbox 获取完整示例，并继续通过 Storybook 文档深入学习。

      后续步骤

      现在你已经搭建好了构建系统，接下来学习如何编写 story 并为组件撰写文档：

      选项

      framework 特定的选项及其默认值，请参阅配置指南。