基于Module Federation的Ember JS应用与React微前端宿主集成咨询

可行性结论 #

完全可以实现，核心依赖Ember 3.28+版本对自定义webpack构建的支持能力，具体实现逻辑如下：

核心实现步骤 #

• 配置Ember子应用的联邦模块规则
  确保你的Ember项目安装了ember-auto-import v2+版本，在ember-cli-build.js中配置autoImport的webpack选项，引入ModuleFederationPlugin，按需配置name、filename、exposes等字段，你可以根据需求暴露Ember应用的生命周期方法、独立组件或者路由模块。共享依赖部分建议将ember-source、@ember/runloop等Ember核心依赖设为单例，或者配置为Ember子应用单独加载，避免和宿主环境的依赖产生版本冲突。
• 配置React宿主的联邦模块规则
  在React宿主的webpack配置中添加ModuleFederationPlugin的remotes配置，指向Ember子应用构建产物对应的remoteEntry.js地址即可。
• 实现跨框架适配层
  在Ember侧对外暴露mount和unmount两个通用方法：
  • mount方法接收DOM容器、初始化参数、路由前缀等入参，内部完成Ember应用的实例化、配置注入和挂载渲染
  • unmount方法接收DOM容器，内部完成Ember应用的销毁、事件解绑和资源清理，避免出现内存泄漏
    在React宿主侧调用上述暴露的方法，在需要渲染Ember子应用的组件生命周期中触发对应的挂载、卸载逻辑即可。
• 路由隔离适配
  如果是整应用接入，建议给Ember子应用配置统一的路由前缀，和React宿主的路由规则做隔离，避免出现跳转冲突。

注意事项 #

如果你的Ember项目版本低于3.28，建议先升级到支持ember-auto-import v2+的稳定版本，低版本Ember默认使用Broccoli构建流程，注入Module Federation逻辑的实现成本会更高。目前公开的可复用示例较少，你可以按照上述核心逻辑自行实现，重点解决好Ember生命周期导出和依赖共享两个核心问题即可。

内容的提问来源于stack exchange，提问作者Steve Lennon