咱们团队在早早聊的B站直播间分享了EMP微前端---团队半年以来的技术果实。内容比较丰富，分为三篇文章阐述，欢迎你们关注EMP库后续。这篇文章主要讲四个实战项目。html
续上两篇文章：前端
EMP微前端分享内容回顾（上）react
EMP微前端分享内容回顾（中）webpack
前言
EMP在我司内部其实应用了挺多的业务项目和中台项目，其中拿四个项目来说解一下具体的实战过程：ios
PK条项目
PK条是包含了业务逻辑的组件，用于显示多人之间的pk进度，主要用到PC客户端的内嵌页面web项目和移动端APP的内嵌页面web项目中。因此，咱们要解决的是，pc web项目和移动端web项目之间如何共享这个组件资源。git
有三种方案，一种是简单的复制粘贴，咱们就不考虑了。第二种是npm包方式，若是使用的话，须要维护一个UI库，基于前面说到的npm包方式的痛点，也句不采用了。第三种就是咱们说的EMP微前端方案。github
使用EMP微前端改造的先后对比，能够将PK条这一业务逻辑组件放在远程组件基站维护，而后暴露出来，供应用项目使用。web
这是最终实现的产品效果图，PC web项目引入该资源组件，能够传参数自定化和修改样式。npm
后面的维护，只要在远程基站中，更新迭代PK条组件的功能，就能够同步更新到这些应用项目中，提高了更新速度，维护起来也比较方便。axios
cocosd游戏项目
目前cocos2d游戏最主要的开发方式是经过官方提供的GUI图形界面工具——creator，经过 creator 开发者无需关注构建自己，只需经过界面操做便可对游戏代码进行构建打包。可是这样也存在着如下几个问题：
构建闭源，致使开发者对项目构建没法定制化，假如编译出来的代码存在兼容性问题，那只能进入 creator 安装目录寻找对应的某个配置文件进行修改，这种侵入性的修改颇有可能会引起不稳定性。 没法使用其余构建工具进行打包，意味着项目没法使用新的技术方案，只能局限于 creator 设定的框架之中 游戏组件在不一样项目之间难以复用，组件一般包含了 prefab、sprite 等资源，如何发布托管并在其余项目复用组件，简单地经过 creator 是没法作到的。 发版流程繁琐，由于开发多个cocos2d游戏可能会复用一些资源，若是使用npm包方式抽离的话，发布流程会比较麻烦。
咱们要作的第一步是，接入webpack模型，为后面微前端改造作准备。
首先看看单一 creator 的开发过程，它会在本地服务开启 7456 的端口服务，整个本地开发流程如上图。
接入 webpack 和 emp 后的开发过程，首先 webpack 会经过 axios 抓去 creator服务生成出来的 index.html文件做为 template，并开启一个新的服务，并经过 devServer 将资源请求转发回 creator的端口服务，确保资源访问正常，开发流程图如上图。
因而咱们成功解决了两个痛点。
第二步，正式接入EMP微前端。
上图是具体接入过程说明。
这是使用资源的代码图。
须要注意一点，cc全局变量。
经过接入EMP微前端，成功解决了剩下的两个痛点。
这是咱们的效果图。
详细的cocos2d游戏项目接入微前端，能够看：
YY PC客户端
YY语音是欢聚时代旗下一款知名的集娱乐，交友，游戏，教育等于一身，并包含移动端、web端，PC端三端的国内聊天直播软件。
为了可以让用户在产品中获得更好的体验，同时摒弃过期技术，保持对前沿技术的探索，与时俱进，公司决定对YY PC客户端（如下简称PC端）现有一些主要模板进行web改造。
改造以前，咱们存在以上三点痛点。
这是改造的主要经历，一共有三段。
第一段，改造现有项目为EMP微前端。开始改造新频道模板的时候，用create-react-app搭建了一个普通项目进行开发和部署。但后面要继续接新模板的时候，想要每一个模板都抽离成一个个独立部署的应用，方便专门的人维护（一个模板的逻辑很复杂不少，能够抽离成一个项目了）。因而，这时候对新频道模板的项目进行了微前端改造，花了半天的时间。
第二段，用emp脚手架新建应用项目。在改造了新频道模板的项目为微前端后，咱们将须要用到的功能资源，所有都整和到了基站管理，而后emp init项目以后，能够直接使用基站资源，起一个新项目非常迅速。
第三段，一键更新多个项目，同时维护多个项目。后面，有愈来愈多的模板改形成一个个不一样的应用项目，这时候就体验到一键更新的好处了。若是多个模板的应用项目使用的共享资源须要更新，只须要更新基站，就能够很好达到咱们的目的了。
这是产品效果图。
这是咱们前先后后使用EMP微前端后带来的收益。
更详细的YY PC客户端实战内容，能够看：
欢聚变色龙
在开发过程当中，常常会遇到不一样的业务方须要快速上线一些诸如协议页、图文介绍页、引导页等的静态页面和榜单、抽奖等动态页面来支撑线上业务，可是不管是静态仍是动态页面，这样的研发和上线成本无疑是巨大的，这样一个可以提供让不一样业务方的产品和运营可以快速配置活动上线的平台的需求就油然而生了，下面列举一些痛点：
- 活动上线成本
- 支持多语言
- 不一样业务之间的活动组件没法复用
- 组件没法实现动态更新
这是效果图。
中途有代码展现，能够看录屏。
更详细关于欢聚变色龙项目实战，能够看： 欢聚变色龙落地EMP微前端
感谢
这是咱们的efoxTeam/emp开源仓库，欢迎你们关注。另外，咱们的掘金团队帐号是：Efox。