#快速上手

Storybook Rsbuild 让你能够使用 Rsbuild 作为 Storybook 的构建引擎，从而获得更快的启动和构建速度。

npx skills add rstackjs/agent-skills --skill storybook-rsbuild

yarn dlx skills add rstackjs/agent-skills --skill storybook-rsbuild

pnpm dlx skills add rstackjs/agent-skills --skill storybook-rsbuild

bunx skills add rstackjs/agent-skills --skill storybook-rsbuild

deno run -A npm:skills add rstackjs/agent-skills --skill storybook-rsbuild

#快速开始

最快的上手方式是使用 Storybook CLI。

#新项目

如果你正在搭建一个新项目，我们推荐先创建一个 Rsbuild 项目，然后再添加 Storybook。

# 1. Create a new Rsbuild project
npm create rsbuild@latest

# 2. Initialize Storybook (in the project root)
npx storybook@latest init

Storybook 会检测到 Rsbuild 并自动为你配置 storybook-builder-rsbuild，同时还会向你的项目添加示例 stories。若想了解生成的文件，请查看 Storybook 项目结构。

#已有项目

如果你正在将一个已有的 Storybook 项目迁移到 Rsbuild，请安装相应的 framework 包并更新你的 .storybook/main.ts。

详细的迁移指南请参阅 Frameworks 章节。

#包

#使用

使用 v8 兼容版本的包时，你无需直接安装 storybook-builder-rsbuild。storybook-react-rsbuild、storybook-vue3-rsbuild 等 framework 包已经为你内置了它。

使用下列 framework 指南将 Storybook Rsbuild 接入你的项目。

#与 framework 一起使用

#React

参见集成 React。

#Vue

参见集成 Vue。

#原生 JS/TS

参见集成原生 JavaScript / TypeScript。

#Web components

参见集成 web components（Lit）。

#集成

#与 Modern.js

在 Storybook 中复用你已有的 Modern.js 配置。

参见集成 Modern.js。

#与 Rslib

在 Storybook 中复用你已有的 Rslib 配置。

参见集成 Rslib。

#与 Rspack

将 Storybook Rsbuild 连接到已有的 Rspack 配置。

参见集成 Rspack。