去中心化的组件共享方案——Webpack Module Federation

在大型应用中，我们可能会将其拆分为容器、主应用和多个子应用，这样拆分后的应用可以独立开发和部署，更易于维护。但无论是微应用还是公共模块应用，都需要放在容器中才能使用。

如果你想在多个应用之间共享资源，除了使用npm包之外，还可以尝试基于Webpack 5 Module Federation的EMP微前端解决方案。它不限制技术栈，而是依赖于Webpack5。

使用场景

如果应用B需要使用应用A中的User模块，那么应用B就相当于一个容器。同时，应用程序A也可以使用应用程序C的Menu模块。此时，应用程序A就变成了一个容器。

使用方法

如果要使用Module Federation，肯定需要搭建webpack环境。配置方法比较简单。可以使用ModuleFederationPlugin单独导出/导出。

应用程序导出文件

Webpack配置需要导出文件路径和名称

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

模块. 导出 = {
插件：[
     新制造商（{
        // 向外界提供打包后的文件名
        文件名：'user.js'，
        //导出的应用程序/组织的名称是什么？
        名称：'用户组件'，
        //导出哪个文件，键值为导入时的名称，值为当前文件路径
        暴露：{'./用户名': './src/用户名.js',
            './userHobby': './src/userHobby.js',
        }
    })
  ]
}

B 应用程序导入文件

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

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

插件：[
    新制造商（{
        名称：'根'，
        //键值为导入后使用的名称，值为导出的文件名@文件地址/名称。设置本地服务地址，方便调试。
        遥控器：{
            userComponent: 'userComponent@http://localhost:3001/user.js'
        }
    })
]

在需要使用的js文件中，异步导入。 userComponent是导入后定义的名称。斜杠（/）加上导出文件 webpack 配置的文件名暴露了属性

const 用户名 = React.lazy(()=>import('userComponent/用户名'))
const UserHobby = React.lazy(()=>import('userComponent/userHobby'))

返回 （

    
    
)

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

这样就可以达到应用程序之间共享组件的目的。

以上是Webpack Module Federation（模块联邦）的介绍。更多关于前端、工程，可以参考我的其他博文，持续更新中~