框架支持

框架是自动配置 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、服务器组件），而 Storybook 尚未完全支持这些更改。Storybook 团队正在努力添加对这些功能的支持。在此期间，如果您不依赖它们，仍然可以与您的 Next.js 13 项目一起使用 Storybook。

我的框架不适用于 Storybook

开箱即用，大多数框架都能与 Storybook 无缝协作。然而，有些框架（例如 CRACO）提供了自己的配置，Storybook 无法在没有额外步骤的情况下处理，无论是 通过插件 还是集成。要了解更多信息，请阅读我们的 插件指南。

如何构建 Storybook 框架？

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

遗留框架支持

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

了解如何配置 Storybook

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