在实际项目中,同一条业务线一般都有自己的一套规范,这套规范可能是基于 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 <ComponentName>
or
npx plop <ComponentName>
yarn commit
or
npm run commit
commit 提交规范步骤提示
yarn build:doc
or
npm run build:doc
可以打包后部署到 github pages 上 戳这里看 添加 GitHub Actions 持续集成 提交自动部署
yarn build
or
npm run build
- 首先确保已经登录 npm 账号并且拥有发布权限
- 生成版本号、打 tag 和生成更改日志,其他用法详情见standard-version
yarn release -- --release-as <版本号>
# Or
npm run release -- --release-as <版本号>
成功之后把 tag 推到远程
git push --follow-tags origin main
如果之前没有登录过 npm 的话,需要先登录再执行发布命令。放到 npm scripts 里 pub 命令,其实就是打包和发布的组合命令,执行发布之前先打包文档部署。或者不想要部署文档就直接执行发布命令好了
yarn pub
or
npm run pub
- 确保项目安装了
antdreactreact-dom - 直接 npm 安装使用包
tips: rollup 打包已经实现按需引入,无需引入插件
安装 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 (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<BaseButton onClick={showModal}>点击我展示弹窗</BaseButton>
<BaseModal title="Basic Modal" visible={visible} onOk={closeModal} onCancel={closeModal}>
<p>Some contents...</p>
</BaseModal>
</header>
</div>
);
}
export default App;
yarn test
or
npm run test