蘑菇物联 前端工程化实践（一）-- 前端组件化

背景：

• 公司当前的前端开发现状是，各个项目组各自封装各自的组件，无法快速复用和统一管理，影响开发效率，增加迭代成本
• 目前国内访问国外服务器被墙的现状，在项目初始化和迭代过程中，出现npm包无法下载，下载慢的问题，即便切换其他镜像下载有时也不理想，（不同源的包甚至有些微差异，目前在样式方面有体现）

公司当前正处于高速发展期间，无论是从前端体系方面还是当下需求来说，都有必要来做一套符合公司的业务场景的组件库（包括工具库）。理想的情况是自己做一套组件，但考虑到当前是市场上已经有很多成熟的知名组件库，所以我们可能不需要再封装基础组件库，那我们可以针对公司的业务场景，封装一套高阶组件， 当然这需要投入多人长期的精力，甚至可以按一个正式的项目来做。

使用

1.安装

npm install umi_cps

或者用yarn安装

yarn add umi_cps

2. 使用

import { 
  MgButton,
} from 'umi_cps'
const Demo = () => <MgButton>蘑菇的第一个button</MgButton>
export default Demo

3.组件开发调试

npm run doc:dev

4.组件构建

npm run build

5.构建使用文档

npm run build

5.仓库发布

// 第一种：已配置好Rsa
npm run doc:deploy

//第二种：本地登录发布
npm run pub