使用 Storybook

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

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

原理

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

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

Info

本文档仅提供最简单的使用方式，更多内容可参考 Storybook Rsbuild Modern.js 集成。

安装

npm

yarn

pnpm

bun

deno

npm install @rsbuild/core storybook-builder-rsbuild 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 的方式。

#使用 Storybook

#原理

#安装

#配置 .storybook/main.ts

#示例

使用 Storybook

原理

安装

配置 `.storybook/main.ts`

示例