微前端父子应用及兄弟应用间组件或方法共享方案

原创

已于 2024-07-17 16:16:55 修改 · 1.4k 阅读

收录于

当前文章被以下社区和专栏收录：

于 2024-07-17 16:16:03 首次发布

背景

我们的很多web应用在持续迭代中功能越来越复杂，参与的人员、团队不断增多，导致项目出现难以维护的问题，这种情况PC端尤其常见，微前端为我们提供了一种高效管理复杂应用的方案。
但是在使用微前端的过程中，通常会有一些公共方法或公共组件，本文将对如何实现父子应用以及兄弟应用之间进行方法及组件共享提出几种解决方案以及其各自优缺点及适用场景

模块联邦（Module Federation）

webpack5引入了模块联邦，可以让不同的应用共享模块。具体步骤如下：

Remote（提供者模块）

    // webpack.config.js
    module.exports = {
   
   
        // 其他配置...
        plugins: [
            new ModuleFederationPlugin({
   
   
            name: 'component_app',
            filename: 'remoteEntry.js',
            exposes: {
   
   
                './Button': './src/Button.jsx',
                './Dialog': './src/Dialog.jsx',
                './Logo': './src/Logo.jsx',
                './ToolTip': './src/ToolTip.jsx',
            },
            shared