咱們團隊在早早聊的B站直播間分享了EMP微前端，內容比較豐富，分爲三篇文章闡述，歡迎關注EMP庫後續。 這篇文章主要講EMP的是生態搭建和使用體驗。html
繼上一篇前端
EMP微前端分享內容回顧（上）react
生態打造
從上圖能夠看出，底部是EMP的生態系統，裏面主要有emp-cli腳手架、格式規範插件、ts輔助插件等，後面完善了更多的場景demo和插件，推薦能夠上emp庫的demo例子學習：webpack
https://github.com/efoxTeam/emp/tree/main/projectsgit
基於這些腳手架生態，上層的使用設計也有必定的技巧。比較推薦的使用方式是，能夠搭建一個應用基站，基站內部能夠放置多個項目的共享資源（組件、模塊、方法等），這些共享資源放在基站，可讓專門的幾我的維護，確保穩定性和可靠性。其餘的業務項目，好比圖中的APP1和APP2，可使用基站資源。github
另外，其實APP1和APP2項目直接，也是能夠進行資源共享的。web
下面是EMP生態的主要腳手架工具和插件列表：（後面不止了）工具
看過源碼的朋友，能夠看到efoxTeam/emp庫中的emp-cli腳手架，是使用了lerna進行管理的，這種管理方式比較清晰明瞭，能夠在project中並行執行多個項目。post
@efox/emp-cli腳手架是其中比較重要的一部分，能夠從上圖看到，目前emp是基於webpack5執行的，利用了webpack的chain特性，從全局項目的emp.config.js文件中讀取配置，來執行dev、build等命令。能夠看到命令中有emp tsc這種更新遠程d.ts聲明文件的命令，這也是下面要提到的ts規範：學習
使用ts其實能夠帶來上圖比較多的好處，對於一個團隊的規範來講，是友好的。因此emp是推薦你們使用ts的。
像上圖使用ts後，在業務項目中，只要執行了emp 的同步遠程的聲明文件（ emp tsc）的命令，就能夠在引入組件的時候，知道組件須要傳什麼參數，返回什麼參數了。
經過emp腳手架命令，還有emp-yune-dts-plugin插件的輔助，就能夠將多項目之間的聲明文件彼此同步，提高團隊協做的規範性。
使用體驗
首先，咱們能夠來一個簡單的demo體驗。咱們以react項目爲demo，分別執行命令emp init建立兩個項目：react-base和react-project。
咱們能夠看到，react-base和react-project兩個項目下，都有一個配置文件：emp-config.js。
咱們細看emp-config.js配置文件裏面的內容，其中在webpack chain中，使用了mf插件，主要的字段如圖所示。
同時在在webpack chain中，使用了html插件，便於引入其餘應用資源入口。
咱們整理了一系列的emp教程文章，能夠看wiki列表：
https://github.com/efoxTeam/emp/wiki
值得期待的是，爲了下降使用門檻和便於管理，咱們如今正在開發GUI可視化工具。
這是GUI的項目列表圖。
GUI新建項目，會調用emp init命令去建立對應模板。
這是項目儀表盤，便於管理單個項目。
單個項目可能引入多個基站，能夠引入基站、查看基站列表和詳細信息：
GUI很快就能夠和你們見面啦，敬請期待！！！
後續：
EMP微前端分享內容回顧（下）