现在就变成了一个项目 A 中可以动态加载项目 B,项目 B 也可以动态加载项目 A,A 应用的任何应用可以通过MFD共享给其他应用使用。
我们可以用下面一张图理解下
甚至你可以把B应用利用模块联邦导出,在A应用中使用。
现在终于明白为啥会有module federation了吧,本质上就是多个独立的应用之间,可以相互引用,可以减少重复的代码,更好的维护多个应用。我在 A 项目写的一个组件,我发现 B 项目也有用,那么我可以把这个组件共享给 B 使用。而不是 cv 操作,或者把这个组件搞个独立 npm 仓库(这也是一种比较可靠的方案)
Module Federation官方称为
模块联邦
,模块联邦是webpack5
支持的一个最新特性,多个独立构建的应用,可以组成一个应用,这些独立的应用不存在依赖关系,可以独立部署,官方称为微前端
。什么
模块联邦
,微前端
,瞬间高大上了,但是官方那解释和示例似乎看起来还是似懂非懂。正文开始...
在阅读本文前,本文将会从以下几点去探讨
MDF
MDF
MDF
给我解决了什么样的问题MDF
在多个应用中如何使用MDF
的强大为什么会有 Module Federation
我们先看一下图
在以前,我们每一个项目都会是一个独立的仓库,一个独立项目,一个独立的应用,多个项目应用之间都是互相独立,独立构建,独立部署。
现在假设
application-a
项目有一个组件是Example
,假设application-b
中也有一个组件需要这个组件Example
我们之前的做法就是把
a
项目的Example
拷贝到b
项目中,如果这个Example
组件有依赖第三方插件,那么我们在b
项目也需要安装对应的第三方插件,而且有一种场景,就是哪天这个Example
组件需要更新了,那么两个应用得重复修改两次。于是你想到另外一种方案,我是不是可以把这个独立的组件可以抽象成一个独立的组件仓库,用
npm
去管理这个组件库,而且这样有组件的版本控制,看起来是一种非常不错的办法。但是...,请看下面,MDF 解决的问题
MDF 解决的问题
webpack5
升级了,module Federation
允许一个应用可以动态的加载另一个应用的代码,而且共享依赖项
现在就变成了一个项目 A 中可以动态加载项目 B,项目 B 也可以动态加载项目 A,A 应用的任何应用可以通过
MFD
共享给其他应用使用。我们可以用下面一张图理解下
甚至你可以把
B
应用利用模块联邦导出,在A
应用中使用。现在终于明白为啥会有
module federation
了吧,本质上就是多个独立的应用之间,可以相互引用,可以减少重复的代码,更好的维护多个应用。我在 A 项目写的一个组件,我发现 B 项目也有用,那么我可以把这个组件共享给 B 使用。而不是 cv 操作,或者把这个组件搞个独立 npm 仓库(这也是一种比较可靠的方案)举个栗子
新建一个目录
module-federation
,然后新建一个packages
目录,对应的目录结构如下wsrun
我们在
application-a
与application-b
中新建一个package.json
,我们使用一个工具wsrun
,可以批量启动或者打包多个应用在
application-a
应用中,我们主要看下以下几个文件我们在看下入口
entry
文件app.js
在
App.jsx
Example.jsx
至此我们
application-a
这个项目已经 ok 了我们再看下
application-b
我们在
application-b/src/compments
新建了两个组件Example
Example1
在
webpack.config.js
中我们在exposes
中导出了,这样能给其他应用使用在 html 中引入
remoteEntry.js
由于我需要在
application-a
中使用application-b
暴露出来的组件因此我需要在
application-a
的模版页面中引入如果我需要在
application-b
中需要application-a
中的组件,同样需要引入在根目录下执行
npm run start
,注意子应用里面的名字也必须是start
,相当于批量开启应用application-a
application-b
至此你会发现application-a
需要application-b
应用的两个组件就已经无缝的应用到了自己应用中去我们会发现,在
application-a
应用共享出来的模块,在application-b
中的要提前在html
中下载引入。注意的一些问题
这样会导致在
application-a
中的 Example`无法使用 正确的做法是另外
exposes
只能暴露内部jsx
的组件,不能是js
文件,不能是整个App.jsx
应用。主要是App.jsx
有引用application-a
的引用如果
application-b
中,App.jsx
改成以下那么此时我可以把整个
application-b
应用当成组件在application-a
中使用,但是得把当前应用暴露出去在
application-a
的App.jsx
握草,真是感叹,MDF 真的是太强了,这不是妥妥的可以替代传统的那种
iframe
嵌套另外一个独立的项目正确做法
另外推荐几篇关于
MDF
的参考资料以及文章喝水不忘挖井人,参照官网以及以上一些资料,经本地不断的测试,终于了解
webpack5 MDF
的一些使用场景以及它在具体业务使用的可能性,更多关于 MDF 信息参考官方文档总结
了解
module federation
,官方解释就是模块联邦
,主要依赖内部 webpack 提供的一个插件ModuleFederationPlugin
,可以将内部的组件共享给其他应用使用MDF
解决了什么样的问题,允许一个应用 A 加载另外一个应用 B,并且依赖共享,两个独立的应用之间互不影响写了一个例子,进一步理解
MDF
本文示例code example