点击关注「百度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源创计划”，欢迎正在阅读的你也加入，一起分享。