https://github.com/thbgh/thb-components

前端业务组件库
https://github.com/thbgh/thb-components

actions antdesign react styleguide ui-components

Last synced: about 12 hours ago
JSON representation

前端业务组件库

• Host: GitHub
• URL: https://github.com/thbgh/thb-components
• Owner: thbgh
• License: mit
• Created: 2022-05-14T14:41:10.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-16T15:53:45.000Z (over 2 years ago)
• Last Synced: 2024-12-16T06:18:55.863Z (about 1 month ago)
• Topics: actions, antdesign, react, styleguide, ui-components
• Language: JavaScript
• Homepage: https://thbgh.github.io/thb-components/
• Size: 2.24 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 前端业务组件库

## 一、业务组件库产生背景

> 在实际项目中，同一条业务线一般都有自己的一套规范，这套规范可能是基于 antd 等通用 UI 组件的改造，很多时候业务场景都是相似的，为保证多个项目的通用组件统一视觉和交互，因此根据实际业务场景，抽出通用组件形成业务组件库就很有必要，同时也更容易维护。

## 二、技术栈

> 基于 react + antd 根据统一设计规范抽出业务通用组件库文档站基于 react-styleguildist + webpack 最终的业务组件用 rollup 打包

## 三、业务组件开发原则

> 低耦合、模块化、可复用

## 四、开发组件&文档

### 安装依赖

```

yarn install

or

npm install

```

### 调试、开发组件库启动文档服务

```

yarn doc

or

npm run doc

```

### 组件开发

新组件以文件夹形式统一放到 `components` 下，最终在 `components` 下的 `index.js` 文件中导出

利用 plop 工具快速生成组件文件夹，会根据模板文件生成以组件命名的文件夹，同时修改`components` 下的 `index.js`

```

yarn plop 

or

npx plop 

```

## 提交规范

```

yarn commit

or

npm run commit

```

commit 提交规范步骤提示

### 文档打包

```

yarn build:doc

or

npm run build:doc

```

可以打包后部署到 github pages 上 [戳这里看](https://thbgh.github.io/thb-components/) 添加 GitHub Actions 持续集成 提交自动部署

## 五、组件库打包

```

yarn build

or

npm run build

```

## 六、发布前准备

1. 首先确保已经登录 npm 账号并且拥有发布权限

2. 生成版本号、打 tag 和生成更改日志，其他用法详情见[standard-version](https://github.com/conventional-changelog/standard-version)

```

yarn release -- --release-as <版本号>

# Or

npm run release -- --release-as <版本号>

```

成功之后把 tag 推到远程

```

git push --follow-tags origin main

```

## 七、发布到 npm

如果之前没有登录过 npm 的话，需要先登录再执行发布命令。放到 npm scripts 里 pub 命令，其实就是打包和发布的组合命令，执行发布之前先打包文档部署。或者不想要部署文档就直接执行发布命令好了

```

yarn pub

or

npm run pub

```

## 八、组件库使用

1. 确保项目安装了 `antd` `react` `react-dom`

2. 直接 npm 安装使用包

tips: rollup 打包已经实现按需引入，无需引入插件

## 体验 demo

安装 npm 包

```

yarn add thb-components

or

npm install thb-components

```

组件里使用

```

import React from 'react';

import { BaseButton, BaseModal } from 'thb-components'

function App() {

  const [visible, setVisible] = React.useState(false);

  const showModal = () => {

    console.log('showmodal');

    setVisible(true);

  };

  const closeModal = () => {

    console.log('closemodal');

    setVisible(false);

  }

  return (

    


      

        

        点击我展示弹窗

        

          
Some contents...

        

      

    

  );

}


export default App;

```

## 单元测试

```

yarn test

or

npm run test

```