Storybook 组合

通过组合，您可以在本地 Storybook 中浏览任何可通过 URL 访问的 Storybook 中的组件。无论视图层、技术栈或依赖项如何，您都可以组合任何在线发布的 Storybook或本地运行的 Storybook。

Storybook reference external

您将在侧边栏中看到组合后的 Storybook 的故事，就在您自己的故事旁边。这解锁了团队经常遇到的常见工作流程：

👩‍💻 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-vite, nextjs, vue3-vite, etc.
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-vite, nextjs, vue3-vite, etc.
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: 'http://localhost:7007',
    },
    angular: {
      title: 'Angular',
      url: 'http://localhost:7008',
    },
  },
};
 
export default config;

添加此配置将把 React 和 Angular Storybook 组合到您当前的 Storybook 中。当其中任何一个发生变化时，您将看到更改自动应用。使您能够同步开发这两种框架。

按环境组合 Storybook

您还可以根据当前开发环境（例如 development、staging、production）来组合 Storybook。例如，如果您正在处理的项目已经有一个已发布的 Storybook，但同时也包含一个尚未发布的、带有尖端功能的版本，您可以根据此调整组合。例如

.storybook/main.ts

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
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: 'http://localhost:7007',
        },
        angular: {
          title: 'Composed Angular Storybook running in development mode',
          url: 'http://localhost: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 字段也可以是一个函数，该函数接受一个包含 Storybook 配置对象的 config 参数。有关更多信息，请参阅API 参考。

故障排除

Storybook 组合在我的项目中不起作用

如果您正在使用过时的 Storybook 版本，或者有项目特定的要求阻止您将 Storybook 更新到最新版本，那么您在部署 Storybook 时可以依靠 Storybook CLI 来生成 index.json 文件。例如

npx storybook@7.5.3 extract

使用特定版本的 CLI 是出于目的，因为 extract 命令在 Storybook 8.0 或更高版本中不可用。它还需要您提供额外的配置才能准确生成 index.json 文件。有关更多信息，请参阅之前的文档。