Storybook webpackからの移行#

React / VueとStorybookを使用してwebpack 5でビルドしている場合、@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フレームワークとして`'storybook-react-rsbuild'`（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 - ロードマップを参照してください。