ModuleFederationPlugin 系列: 配置
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'}, }, } 复制代码
总结
目前再团队落地过程中已经从模块联邦的共享下沉为一种微模块
的开发模型。并下沉的超大型项目的尝试,从收益和技能上得到超乎想象的提升!
作者:YYGFE
链接:https://juejin.cn/post/7066340243519209509