框架支援
框架是可自動設定 Storybook 以便在大多數常見環境設定中運作的套件。它們透過鏡像您的框架慣例來建立應用程式，簡化了設定流程並減少了樣板程式碼。
框架在 Storybook 中如何運作？
您首先將 Storybook 安裝到現有的專案中。然後，它會嘗試偵測您正在使用的框架，並自動設定 Storybook 以便與其搭配運作。這表示新增必要的程式庫作為相依性，並調整設定。最後，啟動 Storybook 會自動載入框架設定，然後載入任何現有的擴充套件，以符合您的應用程式環境。
支援哪些框架？
Storybook 為業界領先的建構器和框架提供支援。不過，這並不表示您不能將 Storybook 與其他框架搭配使用。以下是目前支援的框架清單，依其建構器分類。
| 建構器 | 框架 |
|---|---|
| Webpack | React、Angular、Vue 3、Web Components、NextJS、HTML、Ember、Preact、Svelte |
| Vite | React、Vue 3、Web Components、HTML、Svelte、SvelteKit、Qwik、Solid |
功能支援呢？
除了支援業界最熱門的框架之外，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;| 選項 | 描述 | 框架 |
|---|---|---|
nextConfigPath | 設定 NextJS 設定檔的預設路徑framework: { name: '@storybook/nextjs', options: { nextConfigPath: '../next.config.js'} } | NextJS |
builder | 設定 NextJS 的 Webpack 5 建構器選項core: { builder: { name:'webpack5', options: { lazyCompilation: true} }} | NextJS |
strictMode | 啟用 React 的嚴格模式framework: { name: '@storybook/react-webpack5', options: { strictMode: false } } | React |
legacyRootApi | 需要 React 18。切換對 React舊版根 API的支援framework: { name: '@storybook/react-webpack5', options: { legacyRootApi: true } } | React |
enableIvy | 在 Angular 9+ 中預設啟用。將預設編譯器取代為 Ivy 編譯器framework: { name: '@storybook/angular', options: { enableIvy: true } } | Angular |
enableNgcc | 在 Angular 9+ 中預設啟用。新增對 ngcc 的支援以實現回溯相容性framework: { name: '@storybook/angular', options: { enableNgcc: false } } | Angular |
疑難排解
NextJS 13 無法與 Storybook 搭配使用
隨著 Next.js 第 13 版的發布，它引入了重大變更 (例如，TurboPack、伺服器元件)，這些變更尚未完全受到 Storybook 支援。Storybook 團隊正在努力新增對這些功能的支援。在此期間，如果您不依賴這些功能，您仍然可以將 Storybook 與 Next.js 13 專案一起使用。
我的框架無法與 Storybook 搭配使用
開箱即用，大多數框架都能與 Storybook 無縫協作。然而，某些框架 (例如，CRACO) 提供自己的設定，Storybook 未準備好在沒有其他步驟的情況下處理，無論是透過附加元件或整合。若要深入了解，請閱讀我們的附加元件指南。
我該如何建置 Storybook 框架？
Storybook 是一種與框架無關的工具。它可以與任何框架搭配使用。然而，為了讓您更容易上手，我們提供了您可以使用的指示來建置您的框架。若要深入了解，請閱讀我們的框架指南。
舊版框架支援
我們正在棄用對多個框架的支援，包括 Aurelia、Marionette、Mithril、Rax 和 Riot。儘管如此，我們一直在尋求幫助維護這些框架。如果您正在使用其中一個框架，並且想要繼續支援它們，請瀏覽專用的 Storybook 終止支援存放庫。若要深入了解終止支援的程序，並檢視如何參與的說明，請閱讀我們的文件。