Storybook 組合

組合功能可讓您在本地 Storybook 中瀏覽任何可透過 URL 存取的 Storybook 的元件。您可以組合任何線上發佈或本地執行的 Storybook，無論其視圖層、技術堆疊或依賴項為何。

Storybook reference external

您會在側邊欄中看到組合的 Storybook 的 Story 以及您自己的 Story。這解鎖了團隊經常難以應付的常見工作流程

👩‍💻 UI 開發人員可以快速參考先前的作品，而無需在 Storybook 之間切換。
🎨 設計系統可以透過將自己組合到使用者的 Storybook 中來擴大採用。
🛠 前端平台可以稽核元件在各專案中的使用方式。
📚 在一處檢視多個具有不同技術堆疊的 Storybook

Storybook composition

組合發佈的 Storybook

在您的 .storybook/main.js|ts 檔案中新增一個 refs 欄位，其中包含參考 Storybook 的資訊。傳入靜態建置的 Storybook 的 URL。

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  refs: {
    'design-system': {
      title: 'Storybook Design System',
      url: 'https://master--5ccbc373887ca40020446347.chromatic.com/',
      expanded: false, // Optional, true by default,
      sourceUrl: 'https://github.com/storybookjs/storybook', // Optional
    },
  },
};
 
export default config;

組合的 Storybook 中的外掛程式不會像在非組合的 Storybook 中那樣正常運作。

組合本機 Storybook

您也可以組合多個在本機執行的 Storybook。例如，如果您有一個 React Storybook 和一個 Angular Storybook 在不同連接埠上執行，您可以更新您的設定檔（即 .storybook/main.js|ts），並如下所示參考它們

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  refs: {
    react: {
      title: 'React',
      url: 'https://127.0.0.1:7007',
    },
    angular: {
      title: 'Angular',
      url: 'https://127.0.0.1:7008',
    },
  },
};
 
export default config;

新增此設定會將 React 和 Angular Storybook 合併到您目前的 Storybook 中。當任何這些變更時，您會看到變更自動套用。讓您可以同步開發這兩個框架。

依環境組合 Storybook

您也可以根據目前的開發環境（例如，開發、預備、生產）組合 Storybook。例如，如果您正在處理的專案已經有一個發佈的 Storybook，但也包含一個具有尚未發佈的尖端功能版本，您可以根據該版本調整組合。例如

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 
  // 👇 Retrieve the current environment from the configType argument
  refs: (config, { configType }) => {
    if (configType === 'DEVELOPMENT') {
      return {
        react: {
          title: 'Composed React Storybook running in development mode',
          url: 'https://127.0.0.1:7007',
        },
        angular: {
          title: 'Composed Angular Storybook running in development mode',
          url: 'https://127.0.0.1:7008',
        },
      };
    }
    return {
      react: {
        title: 'Composed React Storybook running in production',
        url: 'https://your-production-react-storybook-url',
      },
      angular: {
        title: 'Composed Angular Storybook running in production',
        url: 'https://your-production-angular-storybook-url',
      },
    };
  },
};
 
export default config;

與 Storybook 設定檔中提供的其他欄位類似，refs 欄位也可以是接受 config 參數的函式，其中包含 Storybook 的設定物件。請參閱 API 參考資料以取得更多資訊。

疑難排解

Storybook 組合不適用於我的專案

如果您使用的是過時的 Storybook 版本，或是有專案特定的需求，導致您無法將 Storybook 更新至最新版本，您可以依賴 Storybook CLI 在您部署 Storybook 時產生 index.json 檔案。例如

npx storybook@7.5.3 extract

使用特定版本的 CLI 的目的是因為 extract 命令在 Storybook 8.0 或更高版本中不可用。它還要求您提供額外的設定，以準確產生 index.json 檔案。請參閱先前的文件以取得更多資訊。