Storybook for React & Webpack

Storybook for React & Webpack 是一个 框架，它可以轻松地独立开发和测试 UI 组件，适用于使用 React 构建并搭配 Webpack 的应用程序。

要求

• React ≥ 16.8
• Webpack ≥ 5.0
• Storybook ≥ 8.0

入门

在没有 Storybook 的项目中

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

npx storybook@latest init

更多关于 Storybook 入门的信息。

在包含 Storybook 的项目中

此框架旨在与 Storybook 7+ 协同工作。如果您尚未使用 v7，请使用以下命令进行升级

npx storybook@latest upgrade

自动迁移

运行上面的 upgrade 命令时，您应该会收到一个提示，要求您迁移到 @storybook/react-webpack5，这应该可以为您处理所有事情。如果自动迁移不适用于您的项目，请参考下面的手动迁移。

手动迁移

首先，安装框架

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

接下来，根据您使用的是 SWC（推荐）还是 Babel，安装并注册相应的编译器插件

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

或

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

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

最后，更新您的 .storybook/main.js|ts 以更改框架属性

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

运行设置向导

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

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

Create React App (CRA)

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

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

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

API

选项

如果需要，您可以传递一个选项对象以进行其他配置

// .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 构建器文档中找到可用选项。