點擊關注「百度Geek說」
更多技術乾貨等着你
一、EMP是什麼
二、EMP 出現的背景
三、EMP 的優勢
-
巨型項目解耦。把巨型項目分解成多個小型項目，分團隊開發維護。 -
快速封裝可複用模塊。無需單獨拆包發佈到 NPM，可直接暴露需要共享的模塊。引入端僅需要簡單配置輸出端的地址即可在代碼上使用該共享模塊。 -
動態更新。把複用的業務模塊放在同一個基站應用之中進行管理和維護，並且暴露出去可以給多個應用使用。如果業務模塊需要更新邏輯的話，只需要發佈部署基站應用，其他應用並不需要任何操作，只需要訪問時刷新，即可使用最新業務模塊。
四、EMP 架構設計
![]()
五、EMP 生態
1.初始化
npx @efox/emp-cli init
-
可以選擇以下模板項目進行初始化，推薦試用 React Typescript 模板
![]()
-
按提示執行 cd my-emp && yarn && yarn dev之後，項目將會自動打開在瀏覽器。 -
React 基站：
![]()
-
如果你想預先安裝 @efox/emp-cli，可以通過全局安裝npm install -g @efox/emp-cli或yarn global add @efox/emp-cli。 -
建議你卸載該包使用 npm uninstall -g @efox/emp-clioryarn global remove @efox/emp-cli確保 npx 使用的@efox/emp-cli是最新版本。
2. EMP 唯一的配置文件 emp-config.js ,
以 React 爲例，解釋配置核心：
/**
* @type {import('@efox/emp-cli').EMPConfig}
*/
module.exports = {
webpack() {
return {
devServer: {
/**
* 設置 devServer
*/
port: 8002,
},
}
},
async moduleFederation() {
return {
/**
* name: 對外暴露項目名,
*/
name: 'demo',
/**
* filename: 對外暴露引用文件名,
*/
filename: 'emp.js',
/**
* remotes 遠程模塊
* remotes: {
* '引用別名': '遠程模塊項目名@遠程模塊的emp.js文件地址',
* },
*/
remotes: {
'@emp/demo1': 'demo1@http://localhost:8001/emp.js',
},
/**
* exposes 暴露模塊
* exposes: {
* '對外暴露的相對路徑': '當前項目相對路徑',
* },
*/
exposes: {
'./components/Hello': 'src/components/Hello',
'./helper': 'src/helper',
},
/**
* shared 共享的第三方依賴
* shared: ['依賴名'],
*/
shared: ['react', 'react-dom'],
}
},
}
以 Vue2 爲例，解釋配置核心：
const withVue2 = require('@efox/emp-vue2')
module.exports = withVue2(({config}) => {
const projectName = 'vue2Project'
const port = 8008
config.output.publicPath(`http://localhost:${port}/`)
config.devServer.port(port)
config.plugin('mf').tap(args => {
args[0] = {
...args[0],
...{
/**
* name: 對外暴露項目名,
*/
name: projectName,
/**
* filename: 對外暴露引用文件名,
*/
filename: 'emp.js',
/**
* remotes 遠程模塊
* remotes: {
* '引用別名': '遠程模塊項目名@遠程模塊的emp.js文件地址',
* },
*/
remotes: {
'@v2b': 'vue2Base@http://localhost:8009/emp.js',
},
/**
* exposes 暴露模塊
* exposes: {
* '對外暴露的相對路徑': '當前項目相對路徑',
* },
*/
exposes: {
'./Content': './src/components/Content',
},
/**
* shared 共享的第三方依賴
* shared: ['依賴名'],
*/
shared: ['vue/dist/vue.esm.js'],
},
}
return args
})
config.plugin('html').tap(args => {
args[0] = {
...args[0],
...{
title: 'EMP Vue2 Project',
},
}
return args
})
})
七、已有項目無痛升級到 EMP 微前端架構
-
@vue/cli Vue2 模版升級到微前端 EMP -
React CRA 項目升級到微前端 EMP
八、跨框架調用實現
EMP 不推薦大家跨框架調用，因爲這樣會增加維護成本和風險。但是我們還是支持：
-
Vue3 調用 Vue2 組件 -
Vue&React 互相調用
九、對比 NPM 拆包
-
但是 npm 拆包有一定工作量：
-
需要把可複用模塊從業務項目抽離到一個新的 package -
搭建新的構建配置 -
單獨建 repo -
在原有業務項目重新引用 -
可能會因爲封裝，需要重新設計 API
-
更新 npm 包版本 -
更新 A 應用的npm包版本 -
重啓 A 應用進行驗證 -
發佈部署 A 管理系統應用 -
對 B 和C 應用循環2和3、4步驟
-
但是 npm 包會拖慢構建速度：通過 npm 引入 n 個的業務模塊後，在構建時相當於將n個業務模塊的代碼“複製”到了項目中，構建時需要同步去構建這些業務子模塊，導致 bundle size 變大，構建時長會增加，開發體驗變差，發佈效率也會隨之降低。
十、總結
-
本文用較短的篇幅介紹了 EMP 的誕生背景、使用場景、生態以及如何無痛使用。 -
EMP 在不斷迭代升級，同時生態日漸完善，歡迎各位來了解、使用 EMP 微前端解決方案。 -
期待大家一起探討，歡迎來提issue或者新功能： https://github.com/efoxTeam/emp
十一、QA
-
如果有問題的話，可以先來看看我們的 issue 哦。世界這麼大，說不定你和別人遇到一樣的問題： https://github.com/efoxTeam/emp/issues?q=is%3Aissue+is%3Aclosed
招聘信息
百度直播研發部招聘研發崗位，包括客戶端-Android/iOS方向，服務端-Go/PHP方向。我們負責百度直播業務，對直播業務感興趣歡迎加入我們。
簡歷投遞郵箱：[email protected] （投遞備註【直播研發】）
本文分享自微信公衆號 - newbe技術專欄（newbe36524）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。