適用於 React & Vite 的 Storybook

適用於 React & Vite 的 Storybook 是一個框架，可讓您輕鬆地為使用 Vite 建構的 React 應用程式隔離開發和測試 UI 元件。它包括

🏎️ 為效能預先綁定
🪄 零設定
💫 以及更多！

需求

React ≥ 16.8
Vite ≥ 4.0
Storybook ≥ 8.0

開始使用

在沒有 Storybook 的專案中

在您的 React 專案根目錄中執行此命令後，請依照提示進行操作

npx storybook@latest init

更多關於開始使用 Storybook 的資訊。

在有 Storybook 的專案中

此框架旨在與 Storybook 7+ 搭配使用。如果您尚未使用 v7，請使用此命令升級

npx storybook@latest upgrade

自動遷移

執行上述 upgrade 命令時，您應該會看到提示，要求您遷移至 @storybook/react-vite，這應該會為您處理一切。如果自動遷移不適用於您的專案，請參考下方的「手動遷移」。

手動遷移

首先，安裝框架

npm install --save-dev @storybook/react-vite

然後，更新您的 .storybook/main.js|ts 以變更 framework 屬性

.storybook/main.ts

import { StorybookConfig } from '@storybook/react-vite';
 
const config: StorybookConfig = {
  // ...
  // framework: '@storybook/react-webpack5', 👈 Remove this
  framework: '@storybook/react-vite', // 👈 Add this
};
 
export default config;

執行設定精靈

如果一切順利，您應該會看到設定精靈，它會協助您開始使用 Storybook，向您介紹主要概念和功能，包括 UI 的組織方式、如何撰寫您的第一個 story，以及如何使用控制項測試您的元件對各種輸入的回應。

Storybook onboarding

如果您跳過了精靈，只要範例故事仍然可用，您隨時可以將 ?path=/onboarding 查詢參數加到 Storybook 實例的 URL 中，再次執行它。

API

選項

如果需要，您可以傳遞選項物件進行額外設定

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/react-vite',
    options: {
      // ...
    },
  },
};
 
export default config;

`builder`

類型：Record<string, any>

設定框架的 builder的選項。對於此框架，可用的選項可以在Vite builder 文件中找到。