React 和 Webpack 的 Storybook

React 和 Webpack 的 Storybook 是一个框架，可以轻松地为使用 Webpack 构建的 React 应用程序隔离开发和测试 UI 组件。

要求

React ≥ 16.8
Webpack ≥ 5.0
Storybook ≥ 8.0

开始使用

在没有 Storybook 的项目中

在你的 React 项目根目录下运行此命令后，按照提示操作

npm create storybook@latest

更多关于 Storybook 入门的信息。

在已有 Storybook 的项目中

此框架旨在与 Storybook 7+ 版本一起使用。如果你尚未使用 v7，请使用此命令升级

npx storybook@latest upgrade

自动迁移

运行上面的 upgrade 命令时，你应该会收到提示，询问你是否要迁移到 @storybook/react-webpack5，它应该为你处理一切。如果自动迁移不适用于你的项目，请参考下面的手动迁移。

手动迁移

首先，安装框架

npm install --save-dev @storybook/react-webpack5

接下来，安装并注册你合适的编译器插件，具体取决于你使用的是 SWC（推荐）还是 Babel

如果你的项目正在使用 Create React App，你可以跳过此步骤。

npx storybook@latest add @storybook/addon-webpack5-compiler-swc

或

npx storybook@latest add @storybook/addon-webpack5-compiler-babel

更多详细信息可以在 Webpack 构建器文档中找到。

最后，更新你的 .storybook/main.js|ts 以更改 framework 属性

.storybook/main.ts

import { StorybookConfig } from '@storybook/react-webpack5';
 
const config: StorybookConfig = {
  // ...
  framework: '@storybook/react-webpack5', // 👈 Add this
};
 
export default config;

运行设置向导

如果一切顺利，你应该会看到一个设置向导，它将帮助你开始使用 Storybook，向你介绍主要概念和功能，包括 UI 的组织方式、如何编写你的第一个 story 以及如何利用 controls 测试你的组件对各种输入的响应。

Storybook onboarding

如果你跳过了向导，你可以随时通过将 ?path=/onboarding 查询参数添加到你的 Storybook 实例的 URL 中再次运行它，前提是示例 stories 仍然可用。

Create React App (CRA)

对 Create React App 的支持由 @storybook/preset-create-react-app 处理。

此预设启用对所有 CRA 功能的支持，包括 Sass/SCSS 和 TypeScript。

如果你正在处理手动初始化的应用程序（即，未使用 CRA），请确保你的应用程序已将 react-dom 作为依赖项包含在内。否则可能会导致 Storybook 和你的项目出现不可预见的问题。

API

选项

如果需要，你可以传递一个 options 对象以进行其他配置

.storybook/main.ts

import type { StorybookConfig } from '@storybook/react-webpack5';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/react-webpack5',
    options: {
      // ...
    },
  },
};
 
export default config;

`builder`

类型：Record<string, any>

配置框架构建器的选项。对于此框架，可在 Webpack 构建器文档中找到可用选项。