框架支持

框架是一些软件包，它们会自动配置 Storybook，使其与大多数常见的环境设置一起工作。通过模仿您框架的惯例来创建应用程序，它们简化了设置过程并减少了样板代码。

框架如何在 Storybook 中工作？

首先，您需要将 Storybook 安装到现有项目中。然后，它会尝试检测您正在使用的框架，并自动配置 Storybook 以便与其一起工作。这意味着添加必要的库作为依赖项并调整配置。最后，启动 Storybook 将在加载任何现有插件之前自动加载框架配置，以匹配您的应用程序环境。

支持哪些框架？

Storybook 为业界主流的构建器和框架提供了支持。但这并不意味着您不能将 Storybook 与其他框架一起使用。下面是按其构建器划分的当前支持框架列表。

功能支持如何？

除了支持业界最流行的框架外，Storybook 还努力为每个框架（包括插件生态系统）保持相同水平的功能支持。有关更多信息，请参阅框架支持，其中列出了当前在社区帮助下维护的功能和插件的完整列表。

配置

每个现代 Web 应用程序都有独特的需求，并且依赖于各种工具和框架。默认情况下，使用 Storybook，您可以获得一个开箱即用的配置，它与大多数框架兼容。但是，您可以扩展现有的配置文件（即 ./storybook/main.js|ts|cjs）并提供额外的选项。下面是一个简化表格，列出了可用的选项以及为您的框架配置 Storybook 的示例。

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/your-framework',
    options: {
      legacyRootApi: true,
    },
  },
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
};
 
export default config;

故障排除

NextJS 13 不兼容 Storybook

随着 Next.js 13 版本的发布，引入了一些重大更改（例如 TurboPack、Server Components），Storybook 尚未完全支持这些功能。Storybook 团队正在努力添加对这些功能的支持。在此期间，如果您不依赖这些功能，仍然可以在 Next.js 13 项目中与 Storybook 一起使用。

我的框架不兼容 Storybook

大多数框架都与 Storybook 开箱即用地无缝协作。然而，有些框架（例如 CRACO）提供了 Storybook 无法直接处理的自定义配置，需要额外的步骤，可以通过插件或集成来实现。要了解更多信息，请阅读我们的插件指南。

如何构建 Storybook 框架？

Storybook 是一个框架无关的工具。它可以与任何框架一起使用。但是，为了让您更容易入门，我们提供了可用于构建您自己的框架的说明。要了解更多信息，请阅读我们的框架指南。

旧版框架支持

我们正在弃用对一些框架的支持，包括 Aurelia、Marionette、Mithril、Rax 和 Riot。尽管如此，我们一直在寻求帮助来维护这些框架。如果您正在使用其中一个框架并希望继续支持它们，请访问专门的 Storybook 生命周期结束存储库。要了解更多关于逐步淘汰过程以及如何贡献的说明，请阅读我们的文档。

了解 Storybook 的配置

• 主题，用于自定义 Storybook UI 的外观和感觉
• CSS，用于配置 CSS 支持
• 图像和资产，用于处理静态资产
• 环境变量，用于配置环境变量