> For AI agents: the complete documentation index is available at https://rspack.rs/zh/llms.txt, the full documentation bundle is available at https://rspack.rs/zh/llms-full.txt.

# 迁移 Storybook

如果你正在使用 [Storybook](https://storybook.js.org/) 的 React / Vue 框架并且使用 webpack 5 构建，那么可以使用 [storybook-rsbuild](https://github.com/rstackjs/storybook-rsbuild) 替换 `@storybook/react-webpack5` 构建，`storybook-rsbuild` 基于 Rsbuild 实现，以 Rspack 作为底层构建工具，支持开箱即用，文档可参考 [storybook-rsbuild](https://github.com/rstackjs/storybook-rsbuild)。

下面将以 React 为例，介绍如何迁移 Storybook webpack 5 项目，Vue 项目迁移步骤与 React 相似。

:::info

Storybook Rsbuild 要求至少 8.0 的 Storybook 版本，建议将 Storybook 升级到最新版本，你可以查看 Storybook 8 [发布说明](https://storybook.js.org/blog/storybook-8/) 中的变更详情及迁移指南。

:::

## 更新依赖

首先，将 `@storybook/react-webpack5` 替换为 [`storybook-react-rsbuild`](https://www.npmjs.com/package/storybook-react-rsbuild)（对于 Vue 项目，使用 [`storybook-vue3-rsbuild`](https://www.npmjs.com/package/storybook-vue3-rsbuild)），添加 `@rsbuild/core` 和 `@rsbuild/plugin-react`（对于 Vue 项目，使用 `@rsbuild/plugin-vue`）。


```sh [npm]
npm install storybook-react-rsbuild @rsbuild/core @rsbuild/plugin-react -D
```

```sh [yarn]
yarn add storybook-react-rsbuild @rsbuild/core @rsbuild/plugin-react -D
```

```sh [pnpm]
pnpm add storybook-react-rsbuild @rsbuild/core @rsbuild/plugin-react -D
```

```sh [bun]
bun add storybook-react-rsbuild @rsbuild/core @rsbuild/plugin-react -D
```

```sh [deno]
deno add npm:storybook-react-rsbuild npm:@rsbuild/core npm:@rsbuild/plugin-react -D
```

## 配置 Rsbuild

Storybook Rsbuild 会自动加载工作目录的 Rsbuild 配置文件，安装 [`@rsbuild/plugin-react`](https://rsbuild.rs/guide/framework/react)（对于 Vue 项目，需要安装及使用 [`@rsbuild/plugin-vue`](https://rsbuild.rs/zh/guide/framework/vue#vue-3)）。

```js
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
});
```

## 更新 Storybook 配置

参考下列配置，修改 Storybook 的 `main.js` 配置，并指定 `'storybook-react-rsbuild'` 作为 Storybook 框架（对于 Vue 项目则为 `'storybook-vue3-rsbuild'`）。

```diff title=.storybook/main.js
export default {
-  framework: '@storybook/react-webpack5'
+  framework: 'storybook-react-rsbuild',
  },
```

## 示例

在 [rstackjs/storybook-rsbuild](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes) 仓库中提供了 React / Vue 项目的 Storybook 示例。

## 更多详情

本页提供快速入门指引。完整的迁移步骤，包括如何处理依赖 webpack 的 addons、常见 webpack 配置与 Rsbuild 配置的对应关系，以及从 Vite 迁移的说明，请参考 [storybook-rsbuild 迁移指南](https://storybook.rsbuild.rs/guide/migration#from-storybook-webpack5-framework)。