具有多个React版本和CSS隔离的模块联合

Question

我有一个模块联合远程存储库：

1. 使用 React 17 构建
2. material-ui 4 包括jss
3. 有来自第三方库的自己的全局CSS，我无法编辑

我有多个主机：

1. 使用不同版本的 React 16 构建，短期内没有升级空间
2. 使用material ui 3 包括jss
3. 拥有来自其他第 3 方库的自己的全局 CSS

有没有办法设计我的遥控器，使它可以在这样的不同环境中工作？

我在这里尝试了很多示例，但没有一个是完整的解决方案：

https://github.com/module-federation/module-federation-examples

Answer 1

找到解决方案。最终创建了一个适配器来包装所有联合组件，然后再从远程公开它们。适配器基本上执行以下操作：

1. 创建一个 div 作为影子容器并附加到父组件。
2. 使用远程 React 版本基于挂载与更新，在该 div 上调用react.dom render / Hydro（在这种情况下，不要将 React 声明为单例） 注意：仅当项目中只有一个 React 16 而其他都在时才有效反应17+
3. 将所有 CSS 注入到 Shadow dom 中
4. 在 Shadow dom 上设置 mui 样式的引用 -> 如果要卸载并重新安装此提供程序，则需要清除 mui 样式缓存
5. 所有弹出框组件都需要将引用传递给父组件，以便它们不会附加到文档根目录

字体是一个问题，因为如果仅在影子 dom 中声明它们就不起作用。它有一个 chromium bug。所以它们也需要在灯光下加载。