從 Storybook webpack 遷移#

如果您正在使用 React / Vue 與 Storybook，並使用 webpack 5 進行建置，您可以使用 storybook-rsbuild 取代 @storybook/react-webpack5 建置，它是基於 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 以了解詳細資訊。