Docs
Storybook Docs

框架支持

框架是自动配置 Storybook 以与最常见的环境设置一起使用的软件包。它们通过镜像框架的约定来创建应用，从而简化设置过程并减少样板。

¥Frameworks are packages that auto-configure Storybook to work with most common environment setups. They simplify the setup process and reduce boilerplate by mirroring your framework's conventions to create applications.

Storybook 中的框架如何工作？

¥How do frameworks work in Storybook?

你从 installing Storybook 开始进入现有项目。然后，它会尝试检测你正在使用的框架并自动配置 Storybook 以与其一起使用。这意味着添加必要的库作为依赖并调整配置。最后，启动 Storybook 将在加载任何现有插件以匹配你的应用环境之前自动加载框架配置。

¥You start by installing Storybook into an existing project. Then, it tries to detect the framework you're using and automatically configures Storybook to work with it. That means adding the necessary libraries as dependencies and adjusting the configuration. Finally, starting Storybook will automatically load the framework configuration before loading any existing addons to match your application environment.

支持哪些框架？

¥Which frameworks are supported?

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

¥Storybook provides support for the leading industry builders and frameworks. However, that doesn't mean you can't use Storybook with other frameworks. Below is a list of currently supported frameworks divided by their builders.

构建器框架
WebpackReact、Angular、Vue 3、Web Components、NextJS、HTML、Ember、Preact、Svelte
ViteReact、Vue 3、Web Components、HTML、Svelte、SvelteKit、Qwik、Solid

功能支持怎么样？

¥What about feature support?

除了支持业界最流行的框架外，Storybook 还尝试为每个框架（包括插件生态系统）保留相同级别的功能支持。有关更多信息，请参阅 框架支持，以获取当前在社区帮助下维护的功能和附加组件的完整列表。

¥In addition to supporting the most popular frameworks in the industry, Storybook also tries to retain the same level of feature support for each framework, including the addon ecosystem. For more information, see Framework support for a comprehensive list of which features and addons are currently maintained with the community's help.

配置

¥Configure

每个现代 Web 应用都有独特的要求，并依赖于各种工具和框架。默认情况下，使用 Storybook，你可以获得一个开箱即用的配置，可与大多数框架一起使用。但是，你可以扩展现有的配置文件（即 ./storybook/main.js|ts|cjs）并提供其他选项。下面是包含可用选项的简略表以及为你的框架配置 Storybook 的示例。

¥Every modern web application has unique requirements and relies on various tools and frameworks. By default, with Storybook, you get an out-of-the-box configuration generated to work with most frameworks. However, you can extend your existing configuration file (i.e., ./storybook/main.js|ts|cjs) and provide additional options. Below is an abridged table with available options and examples of configuring Storybook for your framework.

.storybook/main.ts
// 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;
选项描述框架
nextConfigPath设置 NextJS 配置文件的默认路径
framework: { name: '@storybook/nextjs', options: { nextConfigPath: '../next.config.js'} }		NextJS
builder为 NextJS 配置 Webpack 5 构建器选项
core: { builder: { name:'webpack5', options: { lazyCompilation: true} }}		NextJS
strictMode启用 React 的 严格模式
framework: { name: '@storybook/react-webpack5', options: { strictMode: false } }		React
legacyRootApi需要 React 18。切换对 React 的 遗留根 API
framework: { name: '@storybook/react-webpack5', options: { legacyRootApi: true } } 的支持		React
enableIvy默认情况下，Angular 9+ 已启用。用 Ivy 编译器
framework: { name: '@storybook/angular', options: { enableIvy: true } } 替换默认编译器		Angular
enableNgcc默认情况下，Angular 9+ 已启用。添加对 ngcc 的支持以实现向后兼容性
framework: { name: '@storybook/angular', options: { enableNgcc: false } }		Angular

故障排除

¥Troubleshooting

NextJS 13 不适用于 Storybook

¥NextJS 13 doesn't work with Storybook

随着 Next.js 版本 13 的发布，它引入了 Storybook 尚未完全支持的重大更改（例如 TurboPack、服务器组件）。Storybook 团队正在努力添加对这些功能的支持。与此同时，如果你不依赖它们，你仍然可以将 Storybook 与 Next.js 13 项目一起使用。

¥With the release of Next.js version 13, it introduced breaking changes (e.g., TurboPack, Server Components) that are not yet fully supported by Storybook. The Storybook team is working on adding support for these features. In the meantime, you can still use Storybook alongside your Next.js 13 project if you're not relying on them.

我的框架不适用于 Storybook

¥My framework doesn't work with Storybook

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

¥Out of the box, most frameworks work seamlessly with Storybook. However, some frameworks (e.g., CRACO) provide their own configuration that Storybook isn't prepared to handle without additional steps, either via addon or integration. To learn more, read our addons guide.

如何构建 Storybook 框架？

¥How do I build a Storybook framework?

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

¥Storybook is a framework-agnostic tool. It can be used with any framework. However, to make it easier for you to get started, we provide instructions that you can use to build your framework. To learn more, read our frameworks guide.

旧版框架支持

¥Legacy framework support

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

¥We're deprecating support for several frameworks, including Aurelia, Marionette, Mithril, Rax, and Riot. Nevertheless, we're always looking for help maintaining these frameworks. If you're working with one of them and you want to continue supporting them, visit the dedicated Storybook End-of-Life repository. To learn more about the sunsetting process and view instructions on how to contribute, read our documentation.

了解如何配置 Storybook

¥Learn about configuring Storybook