#使用 Storybook

Storybook 是一个专门用于组件调试的工具，它围绕着组件开发提供了：

• 丰富多样的调试能力
• 可与一些测试工具结合使用
• 可重复使用的文档内容
• 可分享能力
• 工作流程自动化

#原理

Rsbuild 提供了 Storybook Rsbuild，任何 Rsbuild 的项目都可以使用该工具来实现 Storybook 的构建。

Modern.js 基于此工具实现了 storybook-addon-modernjs，该插件会加载 Modern.js 配置文件，并转换为 Storybook Rsbuild 可用的配置。

#安装

npm install @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D

yarn add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D

pnpm add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D

bun add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D

deno add npm:@rsbuild/core npm:storybook-builder-rsbuild npm:storybook-addon-modernjs -D

你需要在项目中安装 @rsbuild/core，否则该插件可能无法正常工作。

#配置 .storybook/main.ts

import type { StorybookConfig } from 'storybook-react-rsbuild'

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

#示例

你可以查看 示例 了解 Modern.js 中使用 Storybook 的方式。