React组件库搭建指南：轻松创建并发布你的组件库！

2023-05-30 02:02:06

使用 dumi2 搭建 React 组件库：从入门到发布

构建和发布自己的 React 组件库对于简化开发流程和与他人共享您的工作至关重要。dumi2 是一个功能强大的工具，可以帮助您轻松实现这一目标。在本指南中，我们将逐步介绍使用 dumi2 创建和部署 React 组件库和函数库的详细流程。

一、准备阶段

1. 安装 dumi2

要开始使用，请使用以下命令全局安装 dumi2：

npm i dumi2 -g

2. 创建新项目

使用 dumi2 创建一个新项目：

dumi new my-component-lib

二、构建组件库

1. 创建组件

组件是组件库的基本构建模块。在 src/components 目录中，创建组件文件，例如 Button.js：

import React from 'react';

export const Button = ({ children, ...props }) => {
  return (
    <button {...props}>
      {children}
    </button>
  );
};

2. 编写单元测试

编写单元测试对于确保组件的正确性至关重要。在 src/components/__tests__/Button.test.js 中创建测试文件：

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { Button } from '../Button';

describe('Button', () => {
  it('should render correctly', () => {
    const { getByText } = render(<Button>Click me</Button>);
    expect(getByText('Click me')).toBeInTheDocument();
  });

  it('should fire onClick event', () => {
    const onClick = jest.fn();
    const { getByText } = render(<Button onClick={onClick}>Click me</Button>);
    fireEvent.click(getByText('Click me'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

3. 编写文档

清楚的文档对于组件的理解和使用至关重要。在 src/components/Button.md 中创建文档文件：

# Button

Button 组件是一个简单且可定制的按钮，可用于各种应用程序。

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | 按钮的内容。 |
| onClick | function | - | 按钮被点击时要调用的函数。 |

## 使用

import { Button } from 'my-component-lib';

const App = () => {
return (
<Button onClick={() => alert('Hello world!')}>Click me
);
};

三、构建和部署文档站点

1. 构建文档站点

使用以下命令构建文档站点：

dumi build

2. 部署文档站点

将 docs/.umi 目录中的文件部署到服务器或 CDN。

四、发布 npm 包

1. 创建 package.json 文件

在项目根目录下，创建 package.json 文件：

{
  "name": "my-component-lib",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.module.js",
  "typings": "dist/index.d.ts",
  "scripts": {
    "build": "dumi build",
    "start": "dumi dev",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.2"
  }
}