前端从零到一开发自己组件库并发布到npm

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

注：文章会持续更新

环境

"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 = ({  children}) => {  return (          {children}s      )};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 (          默认按钮        主要按钮      );}

添加组件文档

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

src/Button/index.md

---category: Componentstitle: Button 按钮 # 组件的标题，会在菜单侧边栏展示toc: content # 在页面右侧展示锚点链接group: # 分组  title: 基础组件 # 所在分组的名称  order: 1 # 分组排序，值越小越靠前---# Button 按钮## 介绍基础的按钮组件 Button。## 示例 基础用法## APi| 属性 | 类型                   | 默认值   | 必填 | 说明 || ---- | ---------------------- | -------- | ---- | ---- || type | 'primary' | 'default' | 'default |  false  | 按钮类型 |

添加单元测试

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

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