使用 Storybook

Storybook 是一个为 React、Vue 等框架独立开发 UI 组件的强大的工具，它能够独立构建和测试组件，从而提升开发和测试效率。

storybook-rsbuild 是 Rsbuild 支持的 Storybook 构建器，并集成了 React、Vue 3 框架和原生 JavaScript。统一使用 Rsbuild 构建系统可以使 Storybook 与 Rslib 使用统一的构建配置。

Storybook Rsbuild 版本对应表

下表展示了 Storybook Rsbuild 与 Storybook 版本的对应关系。如果你正在使用 Storybook v9 或更早版本，请参考官方迁移指南迁移到最新版。

Storybook	Storybook Rsbuild
v10	^3.0.0
v9	^2.0.0
v8	^1.0.0

快速开始

创建一个 Rslib 项目

这是设置 Storybook 的前提条件。你需要有一个包含组件的 Rslib 项目，并希望在 Storybook 中展示这些组件，请查看解决方案以设置 Rslib 项目。

Tip

你可以直接通过 create-rslib 创建一个已集成 Storybook 的新项目，无需手动配置。

将 Storybook 添加到项目中

使用现有的 Rslib 项目设置 Storybook。为了使用 React、Vue 3、原生 JavaScript 或其他框架，必须首先安装适当的 Storybook 框架包。有关安装说明，可以查阅 Storybook Rsbuild 文档。

以 React 为例，在这一步你需要：

安装 Storybook Rsbuild React 框架的依赖。必要的依赖包括

storybook：Storybook core 包。
@storybook/react：React 渲染器。
@storybook/addon-docs：用于生成文档。
@storybook/addon-onboarding：Storybook 的交互式上手体验。
@rsbuild/core：Storybook 构建器。
storybook-addon-rslib：此插件将使 Storybook Rsbuild 能够从 Rslib 配置文件中继承 Rsbuild 配置。该插件将自动读取 Rslib 配置并将其应用于 Storybook Rsbuild，确保配置统一。你可以查看 storybook-addon-rslib 文档以了解可用选项。

npm

yarn

pnpm

bun

npm add storybook @storybook/react @storybook/addon-docs @storybook/addon-onboarding storybook-addon-rslib @rsbuild/core -D

每个框架的依赖各不相同，可查阅 Storybook Rsbuild 文档了解详细信息。在这个 React 示例中，我们将安装 storybook-react-rsbuild 作为框架集成。

React

Vue

npm

yarn

pnpm

bun

deno

npm add storybook-react-rsbuild -D

配置 Storybook 配置文件 .storybook/main.js，指定 stories 和 addons，并使用相应的框架集成设置框架。

.storybook/main.js

export default {
  stories: [
    '../stories/**/*.mdx',
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-onboarding',
    'storybook-addon-rslib',
  ],
  framework: 'storybook-react-rsbuild', // 例如 storybook-react-rsbuild
};

向 stories 目录添加一个简单的 story。例如，创建一个 Button.stories.js 文件，内容如下：

stories/Button.stories.js

import { Button } from '../src/Button';

const meta = {
  title: 'Example/Button',
  component: Button,
};

export default meta;

export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
};

Tip

如果你使用的是 Yarn Plug-n-Play 或者你的项目是在 monorepo 环境中设置的，你可能会遇到模块解析问题。在这种情况下，你可以添加一个 getAbsolutePath('storybook-addon-rslib') 函数来解析插件。有关更多信息，请查看 Storybook 的 FAQ。

大功告成，你可以使用以下命令启动和构建 Storybook 服务器：

npx storybook dev   // 开发模式
npx storybook build // 构建静态文件

查看 Storybook Rsbuild 文档和 Storybook 文档以了解更多信息。

#使用 Storybook

#快速开始

#创建一个 Rslib 项目

#将 Storybook 添加到项目中

#示例

使用 Storybook

快速开始

创建一个 Rslib 项目

将 Storybook 添加到项目中

示例