框架支持
框架是一些软件包,它们会自动配置 Storybook,使其与大多数常见的环境设置一起工作。通过模仿您框架的惯例来创建应用程序,它们简化了设置过程并减少了样板代码。
框架如何在 Storybook 中工作?
首先,您需要将 Storybook 安装到现有项目中。然后,它会尝试检测您正在使用的框架,并自动配置 Storybook 以便与其一起工作。这意味着添加必要的库作为依赖项并调整配置。最后,启动 Storybook 将在加载任何现有插件之前自动加载框架配置,以匹配您的应用程序环境。
支持哪些框架?
Storybook 为业界主流的构建器和框架提供了支持。但这并不意味着您不能将 Storybook 与其他框架一起使用。下面是按其构建器划分的当前支持框架列表。
构建器 | 框架 |
---|---|
Webpack | React, Angular, Vue 3, Web Components, NextJS, HTML, Ember, Preact, Svelte |
Vite | React, Vue 3, Web Components, HTML, Svelte, SvelteKit, Qwik, Solid |
功能支持如何?
除了支持业界最流行的框架外,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;
选项 | 描述 | 框架 |
---|---|---|
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 |
故障排除
NextJS 13 不兼容 Storybook
随着 Next.js 13 版本的发布,引入了一些重大更改(例如 TurboPack、Server Components),Storybook 尚未完全支持这些功能。Storybook 团队正在努力添加对这些功能的支持。在此期间,如果您不依赖这些功能,仍然可以在 Next.js 13 项目中与 Storybook 一起使用。
我的框架不兼容 Storybook
大多数框架都与 Storybook 开箱即用地无缝协作。然而,有些框架(例如 CRACO)提供了 Storybook 无法直接处理的自定义配置,需要额外的步骤,可以通过插件或集成来实现。要了解更多信息,请阅读我们的插件指南。
如何构建 Storybook 框架?
Storybook 是一个框架无关的工具。它可以与任何框架一起使用。但是,为了让您更容易入门,我们提供了可用于构建您自己的框架的说明。要了解更多信息,请阅读我们的框架指南。
旧版框架支持
我们正在弃用对一些框架的支持,包括 Aurelia、Marionette、Mithril、Rax 和 Riot。尽管如此,我们一直在寻求帮助来维护这些框架。如果您正在使用其中一个框架并希望继续支持它们,请访问专门的 Storybook 生命周期结束存储库。要了解更多关于逐步淘汰过程以及如何贡献的说明,请阅读我们的文档。