迁移 Storybook#

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

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

更新依赖#

首先，将 @storybook/react-webpack5 替换为 storybook-react-rsbuild（对于 Vue 项目，使用 storybook-vue3-rsbuild），添加 @rsbuild/core 和 @rsbuild/plugin-react（对于 Vue 项目，使用 @rsbuild/plugin-vue）。

npm install storybook-react-rsbuild @rsbuild/core @rsbuild/plugin-react -D

配置 Rsbuild#

Storybook Rsbuild 会自动加载工作目录的 Rsbuild 配置文件，安装 @rsbuild/plugin-react（对于 Vue 项目，需要安装及使用 @rsbuild/plugin-vue）。

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'）。

export default {
-  framework: '@storybook/react-webpack5'
+  framework: 'storybook-react-rsbuild',
  },

示例#

在 rspack-contrib/storybook-rsbuild 仓库中提供了 React / Vue 项目的 Storybook 示例。

局限#

Rspack 正在逐步完善对 Storybook 的完整支持，目前有部分能力不支持，具体见 storybook-rsbuild - Roadmap。