适用于 React 和 Webpack 的 Storybook

Storybook for React & Webpack 是一个 framework，它可以轻松地为使用 Webpack 构建的 React 应用单独开发和测试 UI 组件。

¥Storybook for React & Webpack is a framework that makes it easy to develop and test UI components in isolation for React applications built with Webpack.

要求

¥Requirements

• React ≥ 16.8

• Webpack ≥ 5.0

• Storybook ≥ 8.0

入门

¥Getting started

在没有 Storybook 的项目中

¥In a project without Storybook

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

¥Follow the prompts after running this command in your React project's root directory:

npx storybook@latest init

有关开始使用 Storybook 的更多信息。

¥More on getting started with Storybook.

在带有 Storybook 的项目中

¥In a project with Storybook

此框架旨在与 Storybook 7+ 配合使用。如果你尚未使用 v7，请使用以下命令升级：

¥This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command:

npx storybook@latest upgrade

自动迁移

¥Automatic migration

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

¥When running the upgrade command above, you should get a prompt asking you to migrate to @storybook/react-webpack5, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.

手动迁移

¥Manual migration

首先，安装框架：

¥First, install the framework:

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

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

¥Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel:

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

or

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

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

¥More details can be found in the Webpack builder docs.

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

¥Finally, update your .storybook/main.js|ts to change the framework property:

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

运行安装向导

¥Run the Setup Wizard

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

¥If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing controls.

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

¥If you skipped the wizard, you can always run it again by adding the ?path=/onboarding query parameter to the URL of your Storybook instance, provided that the example stories are still available.

创建 React App (CRA)

¥Create React App (CRA)

对 创建 React 应用 的支持由 @storybook/preset-create-react-app 处理。

¥Support for Create React App is handled by @storybook/preset-create-react-app.

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

¥This preset enables support for all CRA features, including Sass/SCSS and TypeScript.

如果你正在使用手动初始化的应用（即未使用 CRA），请确保你的应用包含 react-dom 作为依赖。如果不这样做，可能会导致 Storybook 和你的项目出现无法预料的问题。

¥If you're working on an app that was initialized manually (i.e., without the use of CRA), ensure that your app has react-dom included as a dependency. Failing to do so can lead to unforeseen issues with Storybook and your project.

API

选项

¥Options

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

¥You can pass an options object for additional configuration if needed:

// .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>

¥Type: Record<string, any>

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

¥Configure options for the framework's builder. For this framework, available options can be found in the Webpack builder docs.