Garfish 微前端框架中解决 RxJS 模块加载问题的实践

问题背景

在使用 Garfish 微前端框架时，开发者可能会遇到一个典型问题：当子应用关闭沙箱模式并引入 RxJS 库时，控制台会抛出"TypeError: Cannot read properties of undefined (reading 'GARFISH_EXPORTS')"错误。这个问题在 React 和 Vue 子应用中都有可能出现，特别是在使用 Vite 构建工具时更为常见。

问题本质分析

这个问题的根本原因在于 RxJS 库与 Garfish 的模块加载机制存在冲突。具体表现为：

1. 当关闭沙箱模式时，RxJS 无法正确访问 Garfish 提供的模块导出对象
2. 通过调试发现，RxJS 内部访问的 window 对象与其他依赖不一致
3. 错误发生在 Garfish 的模块加载系统中，特别是 GARFISH_EXPORTS 相关逻辑

解决方案

经过 Garfish 团队的分析和验证，提出了以下解决方案：

1. 修改子应用入口文件加载方式

传统的直接通过 script 标签加载入口文件的方式：

<script type="module" src="/main/index.tsx"></script>

需要改为动态 import 方式：

import('./main').then((module) => {
  module.default();
});

2. 确保正确的导出方式

在子应用的入口文件中，需要确保正确导出应用实例。以 Vue 子应用为例：

export const provider = () => {
  const app = createApp(App);
  return {
    render() {
      app.mount('#app');
    },
    destroy() {
      app.unmount();
    },
  };
};

3. 版本兼容性检查

确保使用的相关库版本兼容：

• Garfish: 1.17.5+
• RxJS: 7.8.1+
• Vite: 5.2.8+

实现细节

对于 React 子应用

1. 移除 index.html 中的直接 script 引用
2. 使用动态 import 加载应用入口
3. 确保使用 @garfish/bridge-react-v18 桥接

对于 Vue 子应用

1. 同样移除直接 script 引用
2. 使用动态 import 方式
3. 确保使用 @garfish/bridge-vue-v3 桥接
4. 正确导出 provider 函数

注意事项

1. 动态 import 和直接 script 引用不能同时存在
2. 子应用的挂载点需要与主应用协调一致
3. 开发环境和生产环境都需要测试此解决方案
4. 如果使用 TypeScript，需要确保模块类型正确声明

总结

通过将子应用的加载方式从静态 script 标签改为动态 import，可以有效解决 Garfish 微前端框架中 RxJS 模块加载的问题。这种解决方案不仅适用于 RxJS，对于其他可能在沙箱环境下出现问题的库也同样有效。关键在于确保模块系统能够正确识别 Garfish 提供的导出对象，而动态 import 正是实现这一目标的有效手段。

在实际项目中，开发者还应该注意版本兼容性和正确的桥接方式，这些因素都会影响到最终解决方案的效果。通过遵循上述实践，可以顺利在 Garfish 微前端架构中集成 RxJS 等第三方库。