使用 Webpack 的 React 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.

安装

¥Install

要在现有的 React 项目中安装 Storybook，请在项目根目录下运行以下命令：

¥To install Storybook in an existing React project, run this command in your project's root directory:

npm create storybook@latest

接下来，你可以开始使用 写故事、运行测试 和 组件文档。要更好地控制安装过程，请参阅 安装指南。

¥You can then get started writing stories, running tests and documenting your components. For more control over the installation process, refer to the installation guide.

要求

¥Requirements

• 

  React ≥ 16.8

• 

  Webpack 5

运行 Storybook

¥Run Storybook

要为特定项目运行 Storybook，请运行以下命令：

¥To run Storybook for a particular project, run the following:

npm run storybook

要构建 Storybook，请运行：

¥To build Storybook, run:

npm run build-storybook

你将在配置的 outputDir（默认为 storybook-static）中找到输出。

¥You will find the output in the configured outputDir (default is storybook-static).

配置

¥Configure

创建 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.

手动初始化应用

¥Manually initialized apps

如果你正在使用手动初始化的应用（即未使用 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.

常见问题

¥FAQ

如何手动安装 React Webpack 框架？

¥How do I manually install the React Webpack framework?

首先，安装框架：

¥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 type { StorybookConfig } from '@storybook/react-webpack5';
 
const config: StorybookConfig = {
  // ...
  framework: '@storybook/react-webpack5', // 👈 Add this
};
 
export default config;

如何迁移到 React Vite 框架？

¥How do I migrate to the React Vite framework?

请参阅 @storybook/react-vite 的迁移说明。

¥Please refer to the migration instructions for @storybook/react-vite.

API

选项

¥Options

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

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

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.