从 Storybook webpack 迁移#

如果您使用 React / Vue 和 Storybook 并且使用 webpack 5 构建，您可以用 storybook-rsbuild 替换 @storybook/react-webpack5 构建，该库基于 Rsbuild 实现并使用 Rspack 作为底层捆绑器。它支持开箱即用，您可以在 storybook-rsbuild 中找到文档。

接下来，我们将以 React 为例介绍如何迁移 Storybook webpack 5 项目。Vue 项目的迁移步骤类似于 React。

更新依赖项#

首先，用 storybook-react-rsbuild 替换 @storybook/react-webpack5（对于 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 获取详细信息。