框架支持

框架是自动配置 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 团队正在努力添加对这些功能的支持。在此期间，如果您不依赖这些功能，您仍然可以将 Storybook 与您的 Next.js 13 项目一起使用。

我的框架不适用于 Storybook

开箱即用，大多数框架都可以与 Storybook 无缝协作。但是，某些框架（例如 CRACO）提供他们自己的配置，如果没有其他步骤（通过 插件 或集成），Storybook 无法处理。要了解更多信息，请阅读我们的插件指南。

如何构建 Storybook 框架？

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

旧版框架支持

我们正在弃用对多个框架的支持，包括 Aurelia, Marionette, Mithril, Rax, 和 Riot。尽管如此，我们一直在寻找帮助来维护这些框架。如果您正在使用其中之一并希望继续支持它们，请访问专门的 Storybook End-of-Life 仓库。要了解有关停止支持过程的更多信息，并查看有关如何贡献的说明，请阅读我们的文档。

了解有关配置 Storybook 的信息

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