ehome-merchant
发布 react组件 的脚手架
相关博客(详细说明):使用npm发布一个react组件
开发组件
-
安装依赖:
npm inpm start
-
打包组件
npm run build
组件功能测试
-
项目根目录下执行:
npm linkcd src/examplenpm link ehome-merchant # 此处为package.json中定义的name字段
-
修改example/src/app.js 文件内容(将原本导入开发组件替换成打包后的组件):
// import ReactDemo from '../../src' // 组件源代码import ReactDemo from 'ehome-merchant'; // npm link 测试打包组件的功能// import 'ehome-merchant/lib/main.min.css'; // npm link 测试打包组件的功能 -
根目录执行:
npm start
组件发布到npm
-
查看当前使用的源地址:
npm config list -
如果不是官方源地址,通过下面的命令切换 npm 源:
npm config set registry http://registry.npmjs.org -
组件发布到 npm:
npm run libnpm publish -
取消发布(最好不要,别人可能下载了你的包):
npm unpublish ehome-merchant --force # 此处为package.json中定义的name字段
npm 包的使用与下载
-
下载:
npm i ehome-merchant # 假设你的包名字叫ehome-merchant -
使用方法:
# 组件中引入import FinancialDetailsModule from 'ehome-merchant';<FinancialDetailsModule{...this.props}$$context={$$context}callBack={() => console.log(需要组件回调处理的函数)}/>$$context 组件需要的参数,例如:$$context: {merchantId // 商户idcommunityIdnamespaceIdorganizationIdpoolId // 积分池id 老接口memberType // 对应接口的 platformFlag 字段; 注册时需要按模块性质给对应的参数 1-个人 2-企业tag1 (communityId) // 注册时要用paymentPayeeType // 角色 主要是支付相关模块已经注册时要用到的字段 老的接口paymentPayeeId // 用户id 主要是支付相关模块要用到的字段 老的接口}// paymentPayeeType paymentPayeeId memberType poolId 这些字段需要业务提供,老的实现是分开两个个接口获取的,需要业务后端统一成一个接口返回
各个业务模块
// 模块名 + Module例如 注册步骤 register-application --> RegisterApplicationModule引入注册步骤模块如: import RegisterApplicationModule from 'ehome-merchant';以下是所有模块名[{name: '商户列表',dataType: 'business-list',}, {name: '商户设置',dataType: 'business-setting',}, {name: '活动管理',dataType: 'activity-config'}, {name: '活动促销',dataType: 'activity-management'}, {name: '卡券发放',dataType: 'cardcoupon-grant'}, {name: '卡券管理',dataType: 'cardcoupon-management'}, {name: '卡券记录',dataType: 'cardcoupon-records'}, {name: '商户主页',dataType: 'fund-management'}, {name: '财务明细',dataType: 'financial-details'}, {name: '积分账户',dataType: 'integral-account'}, {name: '基础设置',dataType: 'integral-basis'}, {name: '积分赠送',dataType: 'integral-give'}, {name: '积分概况',dataType: 'integral-overview'}, {name: '积分记录',dataType: 'integral-record'}, {name: '积分银行积分记录',dataType: 'integral-records'}, {name: '积分规则',dataType: 'integral-rule'}, {name: '发票管理',dataType: 'invoice-management'}, {name: '会员规则',dataType: 'member-config'}, {name: '会员列表',dataType: 'member-list'}, {name: '订单管理',dataType: 'order-management'}, {name: '商户收款码',dataType: 'payment-code'}, {name: '凭证管理',dataType: 'payment-doc'}, {name: '交易明细',dataType: 'trade-inquiries'}, {name: '商户信息',dataType: 'business-info'}, {name: '注册步骤',dataType: 'register-application'}, {name: '去注册',dataType: 'register-home'}]
# 暂不支持例如 卡券促销这种多个tabs的页面,需要业务自己引入,主要原因是:避免业务组件太庞大
// 卡券促销import { CardcouponManagementModule, CardcouponGrantModule, CardcouponRecordsModule } from 'ehome-merchant';const params = {...this.props,$$context};<div className={prefixCls}><FunctionTabs routes={routes} /><Route path={`${match.url}/cardcoupon-management`} component={CardcouponManagementModule} {...params} /><Route path={`${match.url}/cardcoupon-grant`} component={CardcouponGrantModule} {...params} /><Route path={`${match.url}/cardcoupon-records`} component={CardcouponRecordsModule} {...params} /></div>
# 回调函数 callBack
import RegisterApplicationModule from 'ehome-merchant';<RegisterApplicationModule callBack={() => console.log(需要组件回调处理的函数)} />