背景
Module Federation 是允许生成在运行时提供或使用具有其他独立生成的模块
对于很多使用者会产生不同的疑问和困惑，本系列文章旨在解决对使用 EMP OR webpack5 的 module federation 所带来的困惑
课程章节规划
- ModuleFederationPluginOptions 配置
- shared 配置
- 各项配置描述与影响
- 作用域的设置方式
- 多版本共享 设置方式
React
- remotes 配置 与 ESM 结合
- 各项配置与描述影响
- 远程引用模式对使用者的影响
- ssr共享例子
- remotes 与library联动
ModuleFederationPluginOptions 配置
name?:
基站名称
- 类型
string
filename?:
基站文件名，目录路径相对于
output.path
- 类型
string
library?:
基站的库共享配置 将单独章节陈述
- 类型
LibraryOptions
remotes?:
在运行时解析和加载模块的基站位置和请求范围。提供时，属性名用作请求范围，否则将从基站位置自动推断请求范围。
- 类型:
(string | RemotesObject)[] | RemotesObject
remoteType?:
远程基站的外部类型，引用方式
"var"| "module"| "assign"| "this"| "window"| "self"| "global"| "commonjs"| "commonjs2"| "commonjs-module"| "commonjs-static"| "amd"| "amd-require"| "umd"| "umd2"| "jsonp"| "system"| "promise"| "import"| "script"| "node-commonjs";
expose?:
此基站暴露的模块。提供时，属性名将用作公共名称，否则将从请求中自动推断公共名称。
- 类型
(string | ExposesObject)[] | ExposesObject
shared?:
应在共享范围内共享的模块。如果提供了属性名，则属性名将用于匹配此编译中请求的模块。将单独章节展开
- 类型
(string | SharedObject)[] | SharedObject
shareScope?:
用于所有共享模块的共享作用域名称（默认为“default”）。将与 shared 单独章节展开
- 类型
string
runtime?:
运行时块的名称。如果已创建具有此名称的运行时块，或将现有入口点用作运行时。
- 类型
string | false
使用
目前 emp v2中 最传统的使用方式如:
module.exports={
empShare: {
name: 'microApp',//应用名、基站名称
// 按照这个配置 name 一般以 var 的方式暴露到全局
remotes: {
'@microHost': `microHost@http://localhost:8001/emp.js`, //远程地址
},
// 可以通过 library 来设置 其他的暴露方式
library: {type: 'module'} // 以esm 的方式暴露 注意设置了这个 remotes要相对做出调整
exposes: {
'./App': './src/App',
},
// 实现 Module Feration 与 shareLib 只能保留一个
shared: {
react: {requiredVersion: '^17.0.1'},
'react-dom': {requiredVersion: '^17.0.1'},
},
}
总结
目前再团队落地过程中已经从模块联邦的共享下沉为一种微模块 的开发模型。并下沉的超大型项目的尝试，从收益和技能上得到超乎想象的提升！
