PC 端 React 组件库基本框架

一、业务组件库产生背景

基于antd二次开发业务组件。

二、技术栈

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

三、业务组件功能

1、扫码框（WMScanCode） 2、搜索表单（WMSeachFrom） 3、数字动画（WMTweenOne）

四、开发组件&文档

安装依赖

yarn install
or
npm install

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

yarn doc // 本地预览 组件
or
npm run doc

组件开发

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

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

yarn p  
or
npx p 

提交规范

yarn commit
or
npm run commit

commit 提交规范步骤提示

开发

yarn doc
or
npm run doc // 本地预览

文档打包

yarn build:doc
or
npm run build:doc // 线上预览打包

五、组件库打包

yarn build // 发布正式
or
npm run build

yarn build:dev // 发布测试包(未压缩)
or
npm run build:dev

六、发布前准备

1. 首先确保已经登录 npm 账号并且拥有发布权限
2. 生成版本号、打 tag 和生成更改日志.

yarn release -- --release-as <版本号>
# Or
npm run release -- --release-as <版本号>

七、发布到 npm

如果之前没有登录过 npm 的话，需要先登录再执行发布命令

手动发布

 yarn build

 yarn publish

自动发布

yarn pub
or
npm run pub

八、组件库使用

1. 确保项目安装了 antd react react-dom
2. 直接 npm 安装使用包

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

体验 demo

安装 npm 包

yarn add @wm-hosp/sum_react
or
npm install @wm-hosp/sum_react

组件里使用

import React from 'react';
import { WMButton, WMModal } from '@wm-hosp/sum_react'

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" />
        <WMButton onClick={showModal}>点击我展示弹窗</WMButton>
        <WMModal title="Basic Modal" visible={visible} onOk={closeModal} onCancel={closeModal}>
          <p>Some contents...</p>
        </WMModal>
      </header>
    </div>
  );
}

export default App;