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

码农世界 2024-06-04 前端 122 次浏览 0个评论

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

注：文章会持续更新

环境

	"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 (
    
      
    
  )
};
export default Button;

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

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

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

添加demo示例

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

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

// src/Button/demo/base.tsx
import React from 'react';
import { Button } from 'dumi2-demo';
export default () => {
  return (
    <>
        
      
    
  );
}

添加组件文档

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

src/Button/index.md

---
category: Components
title: Button 按钮 # 组件的标题，会在菜单侧边栏展示
toc: content # 在页面右侧展示锚点链接
group: # 分组
  title: 基础组件 # 所在分组的名称
  order: 1 # 分组排序，值越小越靠前
---
# Button 按钮
## 介绍
基础的按钮组件 Button。
## 示例 

基础用法
## APi

| 属性 | 类型                   | 默认值   | 必填 | 说明 |
| ---- | ---------------------- | -------- | ---- | ---- |
| type | 'primary' | 'default' | 'default |  false  | 按钮类型 |