Storybook 组合

组合允许您浏览任何可通过本地 Storybook 内的 URL 访问的 Storybook 中的组件。您可以组合任何在线发布的 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 [email protected] extract

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