Vite + Storybook 打造您的React组件库：速度和灵活性的完美结合

2023-11-02 16:31:42

前言

组件库是现代前端开发中不可或缺的一部分。它允许您创建和共享可重用的组件，从而提高开发效率和代码的一致性。在本文中，我们将探讨如何使用 Vite 和 Storybook 来创建一个自己的 React 组件库。

Vite：极速构建利器

Vite 是一个新兴的前端构建工具，以其极快的启动速度和增量构建而闻名。它使用原生 ESM 方式提供源码，并使用 esbuild 预构建依赖，从而将启动速度提高了 10-100 倍。此外，Vite 还支持 Rollup 打包代码，让您可以轻松地构建生产就绪的组件。

Storybook：组件演示与开发环境

Storybook 是一个用于构建组件演示和开发环境的工具。它允许您创建交互式的组件演示，以便您可以轻松地查看和测试组件的行为。Storybook 还提供了强大的开发环境，让您可以快速地迭代和修改组件。

打造 React 组件库

现在，让我们一步一步地创建一个 React 组件库：

初始化项目

首先，使用以下命令创建一个新的 Vite 项目：

npx create-vite-app my-component-library

安装 Storybook

接下来，使用以下命令安装 Storybook：

npm install --save-dev @storybook/react @storybook/addon-actions @storybook/addon-links

配置 Storybook

在项目的根目录下创建一个名为 .storybook/main.js 的文件，并添加以下内容：

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

创建组件

现在，您可以在 src 目录下创建您的组件。例如，您可以创建一个名为 Button.js 的组件：

import React from 'react';

const Button = ({ children, onClick }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

创建组件演示

接下来，您可以在 src 目录下创建组件演示文件。例如，您可以创建一个名为 Button.stories.js 的文件：

import React from 'react';
import Button from './Button';

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

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  children: 'Primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
  children: 'Secondary',
};