如何从延迟加载的另一个微前端初始化组件

Question

我在做一个微型前端应用程序。当需要时，MFE是懒惰负载的。每个MFE公开组件。为了尽量减少MFE之间的耦合，建议避免在MFE之间传递支持和回调，并依赖于像Pub/Sub模式这样的间接通信(我们希望框架不可知论)。我看到了一些库，它们提供订阅事件/特定主题和发布事件的功能，其中一些库还支持检索最新事件。

所以会是这样的：

1. MFE A需要使用一些初始化数据从MFE B初始化组件B.X
2. MFE A发布事件-主题："B.X init“数据：{.}
3. MFE A渲染组件B.X
4. MFE B被加载并初始化(如果还没有加载)
5. MFE B订阅主题为"B.X init“的事件
6. MFE B用接收到的数据初始化组件X

我的问题是：

1. 有更好的方法吗？
2. 在同一个组件的两个实例中，如何用不同的数据初始化每个实例？关于这件事的另一个信息？

谢谢

Answer 1

我将尝试回答“大”部分，并将细节/实现留给您，因为这个问题中包含了许多隐含的问题。

我想说，1 MFE访问另一个MFE组件似乎是错误的(同样，您是如何公开这个内部组件的？)

似乎在开发时，您必须运行另一个MFE (或者在某个阶段，可能是所有MFE )，以便让另一个MFE可以使用一个组件--您应该像自己写的那样努力保持它们不耦合。

我建议共享一些与事件系统相结合的公共组件。

这是一张图片(来自底部的链接)，说明了公共组件(或其他类似util库)的共享。

​

我将展示基本的方法：

1. 创建一个公开共享组件的共享库

{  
  "name": "@shared/ui",  
  "type": "module",  
  ... rest of values  
}

1. 导入每个MFE使用它

//package.json
"dependencies": {
  "@shared/ui": "*"
}
//MFE
import { MyButton } from '@shared/ui';
function App1() {
    return (
        <div>
           <div>App 1</div>
           <MyButton/>
        </div>
    )
}

这是一个静态导入--根据您的需要，您可以添加一个事件侦听器，该监听器可以更改MFE的状态并导致重呈现(在SO上可以找到许多示例)，并在发布的事件中接收到的值。

1. 查看我的答案这里，了解基本事件通信--这是一个基本的发布/子系统，应该满足您的需求。

因此，总结一下：

• 共享公共组件
• 使用事件进行通信
• 在MFE中：
  • 导入共享组件
  • 侦听/订阅相关事件--init(并使用您的逻辑呈现)共享组件

附加:如果您有一个shell应用程序，它“保存”结构并充当入口点，您可以将这个共享库添加到Webpack5 &的共享部分(在shell应用程序中)。

希望这会有所帮助--这是基本的，但如果你有了这个想法，你可以从现在开始朝你的方向前进。欢迎提出问题/评论。

顺便说一句，奥莱利的这篇重读真是太棒了！检查标题“模块联盟”下的部分，以进行代码共享。