Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@zhangsongsong/sum_react

Package Overview
Dependencies
18
Maintainers
1
Versions
64
Issues
File Explorer

Advanced tools

@zhangsongsong/sum_react

基于 React 的业务组件库

    0.6.3latest

Version published
Maintainers
1
Yearly downloads
3,341

Weekly downloads

Readme

Source

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 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 <版本号>

成功之后把 tag 推到远程

git push --follow-tags origin master

七、发布到 npm

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

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;

单元测试

yarn test or npm run test

FAQs

What is @zhangsongsong&#x2F;sum_react?

基于 React 的业务组件库

Is @zhangsongsong&#x2F;sum_react popular?

The npm package @zhangsongsong&#x2F;sum_react receives a total of 2 weekly downloads. As such, @zhangsongsong&#x2F;sum_react popularity was classified as not popular.

Is @zhangsongsong&#x2F;sum_react well maintained?

We found that @zhangsongsong&#x2F;sum_react demonstrated a healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 09 Nov 2021
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc