Storybook 7.x 使用指南：在 webpack5 和 vite 中构建 UI 组件

2024-02-20 18:51:59

Storybook 7.x 使用指南

Storybook 是一个用于独立构建 UI 组件和页面的前端开源工具，无需繁琐的工作即可构建 UI。前段时间刚刚发布了 7.x 版本，本文将简单介绍一下其在 webpack5 和 vite 中的使用步骤。

一、安装和配置

在使用 Storybook 之前，您需要先安装它。您可以使用以下命令进行安装：

npm install -g @storybook/cli

安装完成后，您可以在项目中创建一个新的 Storybook 项目：

npx sb init

这将在您的项目中创建一个新的 .storybook 文件夹，其中包含 Storybook 的配置文件和一些示例故事。

接下来，您需要在项目中安装 Storybook 的依赖项。您可以使用以下命令进行安装：

npm install -D @storybook/addon-essentials @storybook/react

二、在 webpack5 中使用 Storybook

如果您使用的是 webpack5，则需要在项目的 webpack 配置文件中添加一些配置项。您可以在 webpack.config.js 文件中添加以下配置：

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.stories\.jsx?$/,
        loader: require.resolve('@storybook/source-loader'),
        exclude: [/node_modules/],
        enforce: 'pre',
      },
      // ...
    ],
  },
  // ...
};

三、在 vite 中使用 Storybook

如果您使用的是 vite，则需要在项目的 vite.config.js 文件中添加一些配置项。您可以添加以下配置：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  // ...
});

四、运行 Storybook

安装并配置好 Storybook 后，您就可以运行它了。您可以使用以下命令运行 Storybook：

npm start-storybook

这将在您的本地机器上启动 Storybook，您可以在浏览器中访问它。

五、编写故事

Storybook 中的故事是用来演示 UI 组件和页面的。您可以使用以下命令创建一个新的故事：

touch src/stories/Button.stories.js

在创建的故事文件中，您可以使用以下代码创建一个新的故事：

// src/stories/Button.stories.js
import React from 'react';
import Button from '../src/Button';

export default {
  title: 'Button',
  component: Button,
};

export const Primary = () => <Button variant="primary">Primary</Button>;
export const Secondary = () => <Button variant="secondary">Secondary</Button>;