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'},
   },
}
复制代码

总结

目前再团队落地过程中已经从模块联邦的共享下沉为一种微模块 的开发模型。并下沉的超大型项目的尝试，从收益和技能上得到超乎想象的提升！