Storybook 组件组合

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

Storybook reference external

您将在侧边栏中看到组合的 Storybook 的 stories 以及您自己的 stories。这解锁了团队经常遇到的常见工作流程

👩‍💻 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 字段也可以是一个函数，该函数接受一个包含 Storybook 配置对象的 config 参数。有关更多信息，请参阅 API 参考。

故障排除

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

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

npx storybook@7.5.3 extract

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