EMP Share 共享模式
empshare 介绍
实现3重共享模型
- [基础库] -> [基站] -> [引用]
empshare与moduleFederation配置可以config.empShare里面进行配置shareLib 基于库共享模式
- 可以进行 cdn 加载
- ES import DEMO
- DLL方式构建共享 [需自行实现]
shareLib 代替了MF里面的 shared 可以更好实现重型项目，大型团队的共享灵活性问题
注意!!! 在
moduleFederation配置中,如果项目需要导出模块供其它项目使用,除了在 empShare.exposes 中配置外,还需要在项目根目录中添加bootstrap.js或bootstrap.ts文件作为 webpack 导出模块的引导文件 为什么? 如何配置?
empshare 配置
js
module.exports={
empShare: {
name: 'microApp',
remotes: {
'@microHost': `microHost@http://localhost:8001/emp.js`,
},
exposes: {
'./App': './src/App',
},
// 实现 Module Feration 与 shareLib 只能保留一个
shared: {
react: {requiredVersion: '^17.0.1'},
'react-dom': {requiredVersion: '^17.0.1'},
},
// 实现 emp share 的 三级共享模式 与 shared 只能保留一个,地址可以自行判断
shareLib: {
react: 'React@https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js',
'react-dom': 'ReactDOM@https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js',
}
},
}module.exports={
empShare: {
name: 'microApp',
remotes: {
'@microHost': `microHost@http://localhost:8001/emp.js`,
},
exposes: {
'./App': './src/App',
},
// 实现 Module Feration 与 shareLib 只能保留一个
shared: {
react: {requiredVersion: '^17.0.1'},
'react-dom': {requiredVersion: '^17.0.1'},
},
// 实现 emp share 的 三级共享模式 与 shared 只能保留一个,地址可以自行判断
shareLib: {
react: 'React@https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js',
'react-dom': 'ReactDOM@https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js',
}
},
}empshare.useImportMap 配置
开启 useImportMap 实验特征 可以实现 ImportMap 功能，ESM 可以平滑切换开发和生产环境