好多前端小伙伴干了五六年，一直在做切图仔，一看项目没啥亮点。今天开始，我就分享下自己开发组件库的历程。

注：文章会持续更新

环境

"dumi": "^2.2.0", "father": "^4.1.0",

这里我们站在巨人的肩膀上，先整出来组件库，从零自己搞也可以，不过会非常浪费时间。

注意：版本很重要，后面会列举father在打包过程中的坑，这里就不展开了。

创建项目

先创建空文件夹，并进入，执行npx create-dumi// 选择组件库模板React Library # 用于构建组件库，有组件例子// 启动npm start

配置

主要是导航和菜单的配置： .dumirc.ts

这块比较简单，看官网即可

修改Foo选项为组件库

修改Foo选项为组件库，在.dumirc.ts文件中添加配置

import { defineConfig } from 'dumi';export default defineConfig({ // ... themeConfig: { name: 'dumi2-demo', nav: [ { title: '介绍', link: '/guide' }, { title: '组件', link: '/components/Foo' }, // components会默认自动对应到src文件夹 ], }, // ...});

项目名称换行

.dumirc.ts

export default defineConfig({ // ... styles: [ `.dumi-default-header-left { width: 220px !important; }`, ],});

处理打包时less报错问题

问题：demo中使用less是可以的，但是组件用less打包时会报错； 环境：father v4

解决方案：安装 @babel/runtime 即可 ，会自动处理yarn add @babel/runtime -D

注意：版本的坑来了，网上找到解决方案（如配置lessInBabelMode）大多是 father v2版本的，好多配置已失效。

开发基础组件

开发button组价并暴露出去

src/Button/index.tsx

import React, { type FC } from 'react';export interface ButtonProps { type?: 'primary' | 'default'; children?: React.ReactNode;}const Button: FC<ButtonProps> = ({ children}) => { return ( <div> <button>{children}s</button> </div> )};export default Button;

组件源代码添加好后，需要在src/index.ts中引入后暴露一下：

// src/index.tsexport { default as Button } from './Button';

在这里引入并暴露出去以后，就可以在项目中通过import { Button } from ‘dumi2-demo’;来引入了。

添加demo示例

每一个组件我们可以加一个demo示例，方便使用者能更方便的使用。

在Button目录下新建一个demo文件夹，内建一个基础演示base.tsx文件

// src/Button/demo/base.tsximport React from 'react';import { Button } from 'dumi2-demo';export default () => { return ( <> <Button type="default">默认按钮</Button> &nbsp; <Button type="primary">主要按钮</Button> </> );}

添加组件文档

再在该文件同目录新建一个index.md文件作为文档说明，这也是生成静态文档站点所需要的。

src/Button/index.md

---category: Componentstitle: Button 按钮 # 组件的标题，会在菜单侧边栏展示toc: content # 在页面右侧展示锚点链接group: # 分组 title: 基础组件 # 所在分组的名称 order: 1 # 分组排序，值越小越靠前---# Button 按钮## 介绍基础的按钮组件 Button。## 示例 <!-- 可以通过code加载示例代码，dumi会帮我们做解析 --><code src="./demo/base.tsx">基础用法</code>## APi<!-- 会生成api表格 -->| 属性 | 类型 | 默认值 | 必填 | 说明 || ---- | ---------------------- | -------- | ---- | ---- || type | 'primary' | 'default' | 'default | false | 按钮类型 |

添加单元测试

参考3.5节 https://juejin.cn/post/7222804347830206525#heading-10

今天先写到这，有时间继续写