框架支援

框架是自動設定 Storybook 以搭配最常見環境設定運作的套件。它們透過鏡像您框架的慣例來建立應用程式，藉此簡化設定流程並減少樣板。

框架在 Storybook 中如何運作？

您首先安裝 Storybook 到現有專案中。然後，它會嘗試偵測您使用的框架，並自動設定 Storybook 以與其搭配運作。這表示新增必要的程式庫作為依賴項，並調整設定。最後，啟動 Storybook 會自動載入框架設定，然後再載入任何現有的擴充套件，以符合您的應用程式環境。

支援哪些框架？

Storybook 支援業界領先的建構工具和框架。但是，這並不表示您無法將 Storybook 與其他框架搭配使用。以下是目前支援的框架清單，依其建構工具分類。

功能支援方面呢？

除了支援業界最受歡迎的框架外，Storybook 也嘗試為每個框架保留相同等級的功能支援，包括擴充套件生態系統。如需更多資訊，請參閱框架支援，以取得目前在社群協助下維護的功能和擴充套件的完整清單。

設定

每個現代 Web 應用程式都有獨特的需求，並依賴各種工具和框架。預設情況下，透過 Storybook，您可以取得產生的開箱即用設定，以搭配大多數框架運作。但是，您可以擴充現有的設定檔（即 ./storybook/main.js|ts|cjs）並提供其他選項。以下是簡略的表格，其中包含可用選項以及設定 Storybook 以用於您的框架的範例。

// Replace react-vite with the framework you are using (e.g., react-webpack5)
import type { StorybookConfig } from '@storybook/react-vite';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/react-vite',
    options: {
      legacyRootApi: true,
    },
  },
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
};
 
export default config;

疑難排解

NextJS 13 無法與 Storybook 搭配運作

隨著 Next.js 版本 13 的發布，它引入了重大變更（例如 TurboPack、伺服器元件），這些變更 Storybook 尚未完全支援。Storybook 團隊正在努力新增對這些功能的支援。同時，如果您不依賴這些功能，仍然可以在 Next.js 13 專案旁邊使用 Storybook。

我的框架無法與 Storybook 搭配運作

開箱即用，大多數框架都能與 Storybook 無縫協作。但是，某些框架（例如 CRACO）提供 Storybook 無法在沒有其他步驟（透過擴充套件或整合）的情況下處理的自身設定。若要深入瞭解，請閱讀我們的擴充套件指南。

如何建構 Storybook 框架？

Storybook 是一個與框架無關的工具。它可以與任何框架搭配使用。但是，為了讓您更輕鬆地開始使用，我們提供了可用於建構框架的指示。若要深入瞭解，請閱讀我們的框架指南。

舊版框架支援

我們正在棄用對多個框架的支援，包括 Aurelia、Marionette、Mithril、Rax 和 Riot。儘管如此，我們一直在尋找協助維護這些框架的人員。如果您正在使用其中一個框架，並且想要繼續支援它們，請造訪專用的Storybook End-of-Life 儲存庫。若要深入瞭解淘汰流程並檢視有關如何貢獻的指示，請閱讀我們的文件。

瞭解如何設定 Storybook

• 主題以自訂 Storybook UI 的外觀和風格
• CSS 以設定 CSS 支援
• 圖片與素材以進行靜態素材處理
• 環境變數以設定環境變數