我们团队在早早聊的B站直播间分享了EMP微前端---团队半年以来的技术果实。内容比较丰富，分为三篇文章阐述，欢迎大家关注EMP库后续。这篇文章主要讲四个实战项目。
续上两篇文章：
EMP微前端分享内容回顾（上）
EMP微前端分享内容回顾（中）
前言
![]()
EMP在我司内部其实应用了挺多的业务项目和中台项目，其中拿四个项目来讲解一下具体的实战过程：
![]()
PK条项目
![]()
![]()
PK条是包含了业务逻辑的组件，用于显示多人之间的pk进度，主要用到PC客户端的内嵌页面web项目和移动端APP的内嵌页面web项目中。所以，我们要解决的是，pc web项目和移动端web项目之间如何共享这个组件资源。
有三种方案，一种是简单的复制粘贴，我们就不考虑了。第二种是npm包方式，如果使用的话，需要维护一个UI库，基于前面说到的npm包方式的痛点，也句不采用了。第三种就是我们说的EMP微前端方案。
![]()
使用EMP微前端改造的前后对比，可以将PK条这一业务逻辑组件放在远程组件基站维护，然后暴露出来，供应用项目使用。
![]()
这是最终实现的产品效果图，PC web项目引入该资源组件，可以传参数自定化和修改样式。
后面的维护，只要在远程基站中，更新迭代PK条组件的功能，就可以同步更新到这些应用项目中，提升了更新速度，维护起来也比较方便。
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游戏项目接入微前端，可以看：
《cocos2d 项目如何使用和接入EMP》
YY PC客户端
![]()
![]()
YY语音是欢聚时代旗下一款知名的集娱乐，交友，游戏，教育等于一身，并包含移动端、web端，PC端三端的国内聊天直播软件。
为了能够让用户在产品中得到更好的体验，同时摒弃过时技术，保持对前沿技术的探索，与时俱进，公司决定对YY PC客户端（以下简称PC端）现有一些主要模板进行web改造。
![]()
改造之前，我们存在以上三点痛点。
![]()
这是改造的主要经历，一共有三段。
第一段，改造现有项目为EMP微前端。开始改造新频道模板的时候，用create-react-app搭建了一个普通项目进行开发和部署。但后面要继续接新模板的时候，想要每个模板都抽离成一个个独立部署的应用，方便专门的人维护（一个模板的逻辑很复杂很多，可以抽离成一个项目了）。于是，这时候对新频道模板的项目进行了微前端改造，花了半天的时间。
第二段，用emp脚手架新建应用项目。在改造了新频道模板的项目为微前端后，我们将需要用到的功能资源，全部都整和到了基站管理，然后emp init项目之后，可以直接使用基站资源，起一个新项目很是迅速。
第三段，一键更新多个项目，同时维护多个项目。后面，有越来越多的模板改造成一个个不同的应用项目，这时候就体验到一键更新的好处了。如果多个模板的应用项目使用的共享资源需要更新，只需要更新基站，就可以很好达到我们的目的了。
![]()
这是产品效果图。
![]()
这是我们前前后后使用EMP微前端后带来的收益。
更详细的YY PC客户端实战内容，可以看：
EMP微前端实战之YY语音PC客户端模板重构
欢聚变色龙
![]()
![]()
在开发过程中，经常会遇到不同的业务方需要快速上线一些诸如协议页、图文介绍页、引导页等的静态页面和榜单、抽奖等动态页面来支撑线上业务，但是无论是静态还是动态页面，这样的研发和上线成本无疑是巨大的，这样一个能够提供让不同业务方的产品和运营能够快速配置活动上线的平台的需求就油然而生了，下面列举一些痛点：
- 活动上线成本
- 支持多语言
- 不同业务之间的活动组件无法复用
- 组件无法实现动态更新
![]()
![]()
这是效果图。
![]()
中途有代码展示，可以看录屏。
更详细关于欢聚变色龙项目实战，可以看： 欢聚变色龙落地EMP微前端
感谢
![]()
![]()
这是我们的efoxTeam/emp开源仓库，欢迎大家关注。另外，我们的掘金团队账号是：Efox。
![]()
