咱們團隊在早早聊的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。