Storybook 组合

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

Storybook reference external

您将在侧边栏中看到组合的 Storybook 的 stories，与您自己的 stories 并列。这解决了团队在常见工作流程中经常遇到的问题：

👩‍💻 UI 开发人员可以快速参考之前的示例，而无需在 Storybook 之间切换。
🎨 设计系统可以通过组合自身到用户 Storybook 中来扩大采用范围。
🛠 前端平台可以审计组件在不同项目中的使用情况。
📚 在一个地方查看具有不同技术栈的多个 Storybook

Storybook composition

组合已发布的 Storybook

在您的 .storybook/main.js|ts 文件中，添加一个带有引用 Storybook 信息的 refs 字段。传入一个静态构建的 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: 'https://:7007',
    },
    angular: {
      title: 'Angular',
      url: 'https://: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-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: 'https://:7007',
        },
        angular: {
          title: 'Composed Angular Storybook running in development mode',
          url: 'https://: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 时依赖 Storybook CLI 来生成 index.json 文件。例如：

npx storybook@7.5.3 extract

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