适用于 React & Vite 的 Storybook

适用于 React & Vite 的 Storybook 是一个框架，它使您能够轻松地为使用 React 构建的 Vite 应用程序独立开发和测试 UI 组件。它包括

🏎️ 预打包以提高性能
🪄 零配置
💫 以及更多！

要求

React ≥ 16.8
Vite ≥ 4.0
Storybook ≥ 8.0

入门

在没有 Storybook 的项目中

在您的 React 项目的根目录中运行以下命令，然后按照提示操作

npx storybook@latest init

有关 Storybook 入门的更多信息。

在拥有 Storybook 的项目中

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

npx storybook@latest upgrade

自动迁移

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

手动迁移

首先，安装框架

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

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

.storybook/main.ts

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

运行设置向导

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

Storybook onboarding

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

选项

如有需要，您可以传递一个选项对象以进行额外配置

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

`builder`

类型: Record<string, any>

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