百度工程师带你了解Module Federation

作者：百度Geek说 2023-03-01 18:40:54开发 前端 本文介绍了Module Federation的百度概念、应用场景，工程并结合具体的师带代码示例帮助大家对Module Federation的模块共享，公共依赖加载有个初步的百度认识，方便后续更深入的工程学习相关内容，同时也给微前端的师带探索提供一种新的思路，定会给大家一定的百度提升和启发。

1、工程什么是师带Module Federation（MF）？

普遍直译为『模块联邦』，我们看看官网是百度怎么说的？

Motivation

Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually. This is often known as Micro-Frontends, but is not limited to that.

多个独立的构建可以形成一个应用程序。这些独立的工程构建不会相互依赖，因此可以单独开发和部署它们。师带

这通常被称为微前端，百度但并不仅限于此。工程

通俗点讲，师带即MF提供了能在当前应用中远程加载其他服务器上应用的能力。对此，可以引出下面两个概念：

• host：引用了其他应用的应用
• remote：被其他应用所使用的应用

它与我们普遍讨论的基座应用、微应用有所不同，它是去中心化的，相互之间是平等的，每个应用是单独部署在各自的服务器，每个应用都可以引用其他应用，也能被其他应用所引用，即每个应用可以充当host的角色，亦可以作为remote出现。

2、应用场景

• 微前端：通过shared以及exposes可以将多个应用引入同一应用中进行管理。
• 资源复用，减少编译体积：可以将多个应用都用到的通用组件单独部署，通过MF的功能在runtime时引入到其他项目中，这样组件代码就不会编译到项目中，同时亦能满足多个项目同时使用的需求，一举两得。

3、如何使用

项目结构如下：

module-home：首页，在layout展示一个字符串。

module-layout：布局，只包含一个html模板。

module-lib：暴露工具方法，共享lodash库。

3.1 相关配置参数一览

3.2 各应用的配置

// apps/module-lib/webpack.config.js
plugins: [
new ModuleFederationPlugin({ 
name: 'lib',
filename: 'remoteLib.js',
library: {  type: 'var', name: 'lib' },
exposes: { 
// 提供工具方法
'./utils': './index.js',
},
shared: ["lodash"]
})
]


// apps/module-home/webpack.config.js
plugins: [
new ModuleFederationPlugin({ 
name: 'home',
filename: 'remoteHome.js',
library: {  type: 'var', name: 'home' },
exposes: { 
// 提供挂载方法
'./mount': './index.js',
},
shared: ["lodash"]
})
]


// apps/module-layout/webpack.config.js
plugins: [
new ModuleFederationPlugin({ 
name: 'main',
filename: 'remoteMain.js',
remotes: { 
'lib': 'lib@http://localhost:3001/remoteLib.js',
'home': 'home@http://localhost:3003/remoteHome.js',
},
shared: ['lodash']
}),
new HtmlWebpackPlugin({ 
template: path.resolve(__dirname, './public/index.html'),
inject: 'body'
})
]


// apps/module-layout/boot.js
import { getUid, setUid} from 'lib/utils' // 使用module-lib中暴露的方法
import { mount} from 'home/mount' // 使用module-home中暴露的挂载方法
import _ from 'lodash';
setUid();
setUid();
console.log(getUid())
console.log(_.get)


mount()

如下图所示：在layout中展示了home挂载的节点，控制台也打印了调用lib中方法的log，同时lib分享的lodash也生效了（全程只加载了一个lodash）。

3.3 以remoteLib为例简要分析

// 定义全局变量
var lib;
/
(责任编辑：焦点)