Garfish 微前端框架中解决 RxJS 模块加载报错问题

问题背景

在使用 Garfish 微前端框架时，当子应用关闭沙箱模式并引入 RxJS 库时，可能会出现 TypeError: Cannot read properties of undefined (reading '__GARFISH_EXPORTS__') 的错误。这个问题主要发生在 React 或 Vue 子应用中，特别是当使用 Vite 作为构建工具时。

问题原因分析

经过深入排查，发现这个问题是由于 RxJS 和 Garfish 在 window 对象上的冲突导致的。具体表现为：

1. 当关闭沙箱模式时，RxJS 模块无法正确访问 Garfish 提供的 __GARFISH_EXPORTS__ 对象
2. 在模块加载过程中，window 对象的上下文不一致，导致 RxJS 内部无法找到预期的 Garfish 导出对象
3. 使用 Vite 构建时，模块加载机制与 Garfish 的模块隔离机制产生了冲突

解决方案

方法一：使用动态导入

在子应用的 HTML 入口文件中，移除传统的脚本引入方式，改为使用动态导入：

<!-- 移除原来的脚本引入 -->
<!-- <script type="module" src="/main/index.tsx"></script> -->

<!-- 改为动态导入 -->
<script type="module">
  import('./main/index.tsx').then((module) => {
    // 可以在这里处理模块导出
  });
</script>

这种方法可以确保模块在正确的上下文中加载，避免了 window 对象的冲突问题。

方法二：启用沙箱模式并使用 GarfishEsModule 插件

如果项目允许使用沙箱模式，可以启用沙箱并配合 GarfishEsModule 插件：

import { GarfishEsModule } from '@garfish/es-module';

Garfish.run({
  // ...其他配置
  plugins: [GarfishEsModule()],
  apps: [
    {
      name: 'sub-app',
      activeWhen: '/sub-app',
      sandbox: true, // 启用沙箱
      entry: 'http://localhost:3001',
    },
  ],
});

实现细节

1. 动态导入的优势：

   • 避免了脚本直接加载时的上下文问题
   • 提供了更好的模块隔离性
   • 允许在导入后处理模块导出

2. 沙箱模式的注意事项：

   • 沙箱模式会增加一定的性能开销
   • 需要确保所有依赖都能在沙箱环境中正常工作
   • 某些特殊的浏览器 API 可能需要额外配置

最佳实践建议

1. 对于简单的子应用，推荐使用动态导入方案，性能更好
2. 对于复杂的子应用或需要严格隔离的场景，使用沙箱模式更安全
3. 确保所有子应用的入口文件都采用一致的加载方式
4. 在升级 Garfish 或 RxJS 版本时，需要重新测试模块加载逻辑

总结

Garfish 微前端框架与 RxJS 的集成问题主要源于模块加载上下文的冲突。通过采用动态导入或启用沙箱模式，可以有效解决这个问题。开发者应根据具体项目需求选择最适合的方案，确保微前端架构的稳定性和可维护性。