乐趣区

关于前端:去中心化组件共享方案-Webpack-Module-Federation模块联邦

jiezi

在大型利用中，咱们可能会对其进行拆分，分成容器、主利用和多个子利用，使拆分后的利用独立开发与部署，更加容易保护。但无论是微利用、公共模块利用，都须要放到容器中能力应用。

如果多个利用之间心愿资源共享，除了应用 npm 包的模式，基于 Webpack 5 Module Federation（模块联邦）实现的 EMP 微前端计划也能够一试，它不限度技术栈，但依赖于 Webpack5。

应用场景

如果利用 B 须要应用利用 A 中的 User 模块，那么利用 B 就相当于容器，同时利用 A 也能够应用来自利用 C 的 Menu 模块，此时利用 A 变成了容器。

如何应用

要想应用 Module Federation，必定是须要搭建 webpack 环境，配置形式也比较简单，应用 ModuleFederationPlugin 别离导出 / 导出即可。

A 利用导出文件

webpack 配置须要导出的文件门路和名称

 // 其余配置省略
const Mfp = require('webpack').container.ModuleFederationPlugin;

module.exports = {  
  plugins: [
     new Mfp({
        // 对外提供打包后的文件名
        filename: 'user.js',    
        // 导出的利用 / 组织什么名字
        name: 'userComponent',
        // 要导出哪一个文件，key 值为引入时的名字，value 为以后文件门路
        exposes: {
            './username': './src/username.js',
            './userHobby': './src/userHobby.js',
        }
    })
  ]
}

B 利用导入文件

webpack 设置须要导入的资源地址和名称

const Mfp = require('webpack').container.ModuleFederationPlugin

plugins: [
    new Mfp({
        name: 'root',
        // key 值为导入后应用的名字，value 为导出的 filename@文件地址 /name，设置本地服务地址不便调试
        remotes: {userComponent: 'userComponent@http://localhost:3001/user.js'}
    })
]

在须要应用的 js 文件中异步导入，userComponent 是定义的导入后的名字，斜杠（/）加上导出文件 webpack 配置 exposes 属性的文件名

const Username = React.lazy(()=>import('userComponent/username'))
const UserHobby = React.lazy(()=>import('userComponent/userHobby'))

return (
<React.Suspense fallback="loading"> 
    <Username/>
    <UserHobby/>
</React.Suspense>)

引入后，http://localhost:3001/user.js 将会被加载，并且资源内容挂载到 window 对象中。

这样，便能够达到利用之间共享组件的目标。

以上就是 Webpack Module Federation（模块联邦） 的介绍，更多无关 前端 、 工程化 的内容能够参考我其它的博文，继续更新中~

退出移动版