框架支持

框架是自动配置 Storybook 以与大多数常见环境设置配合使用的包。它们通过镜像您的框架约定来创建应用程序，从而简化了设置过程并减少了样板代码。

框架如何在 Storybook 中工作？

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

支持哪些框架？

Storybook 支持行业领先的构建器和框架。但是，这并不意味着您不能将 Storybook 与其他框架一起使用。以下是目前支持的框架列表，按构建器划分。

关于功能支持？

除了支持行业中最流行的框架之外，Storybook 还尝试为每个框架保留相同的特征支持级别，包括插件生态系统。有关更多信息，请参阅 框架支持，了解当前由社区维护的特征和插件的完整列表。

配置

每个现代 Web 应用程序都有独特的需求，并依赖于各种工具和框架。默认情况下，使用 Storybook，您会获得一个开箱即用的配置，该配置生成用于与大多数框架配合使用。但是，您可以扩展现有的配置文件（例如，./storybook/main.js|ts|cjs）并提供其他选项。以下是用可用选项和配置 Storybook 以适合您的框架的示例的简化表格。

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

疑难解答

NextJS 13 不支持 Storybook

随着 Next.js 13 版本 的发布，它引入了重大变更（例如，TurboPack，服务器组件），这些变更 Storybook 尚未完全支持。Storybook 团队正在努力为这些功能添加支持。在此期间，如果您没有依赖于这些功能，您仍然可以在 Next.js 13 项目中使用 Storybook。

我的框架不支持 Storybook

大多数框架开箱即用，可以与 Storybook 无缝协作。但是，一些框架（例如，CRACO）提供了 Storybook 未经额外步骤（通过 插件 或集成）无法处理的自定义配置。要了解更多信息，请阅读我们的 插件指南。

如何构建 Storybook 框架？

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

旧框架支持

我们正在弃用对几个框架的支持，包括 Aurelia，Marionette，Mithril，Rax 和 Riot。但是，我们一直在寻找帮助维护这些框架的人。如果您正在使用其中之一，并且希望继续支持它们，请访问专门的 Storybook 结束生命周期存储库。要了解更多关于日落过程的信息，并查看有关如何贡献的说明，请阅读我们的 文档。

了解如何配置 Storybook

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