加入在线直播:周四,东部时间上午 11 点,Storybook 9 版本发布与 AMA
文档
Storybook Docs

框架支持

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

框架如何在 Storybook 中工作?

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

支持哪些框架?

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

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

功能支持如何?

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

配置

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

.storybook/main.ts
// 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;
选项描述框架
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
enableIvyAngular 9+ 默认启用。用 Ivy 编译器 替换默认编译器
framework: { name: '@storybook/angular', options: { enableIvy: true } }
Angular
enableNgccAngular 9+ 默认启用。添加对 ngcc 的支持以实现向后兼容
framework: { name: '@storybook/angular', options: { enableNgcc: false } }
Angular

故障排除

NextJS 13 不兼容 Storybook

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

我的框架不兼容 Storybook

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

如何构建 Storybook 框架?

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

旧版框架支持

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

了解 Storybook 的配置