多个 React 应用合二为一 shell

Question

我必须开发一个包含一个主应用程序 (Shell) 和多个子应用程序的 React 应用程序架构。

要求

1) 主 App 必须提供用户身份验证和其他一些核心功能。

2) 每个子应用程序应由自治团队并行开发。 每个团队将完全独立，对其他团队的了解为零。 子应用程序不会相互连接。

3）（可选）Main App 应该在运行时运行 Child App，这意味着如果 Child App 更新了，Main App 会检查它并运行一个新的实际版本的 Child App。 主要目标是尽可能少地重建主应用程序。

4）后端是范围广泛的微服务。

问题

这是可能的？ 你能给我一些建议吗？

它应该是多个反应应用程序？ 我了解如何将一个 React 应用程序呈现到另一个应用程序中，但无法想象如何在它们之间连接 redux 操作。

也许 Child Apps 将只是独立的模块，但它将如何启动？ 也许有人在 GitHub 或有用的链接上看到了类似的项目？

谢谢你的建议。

Answer 1

是的，你想做的是一个新的流行语：微前端，与微服务配对。

我还没有找到一个单一的、社区支持的或非常流行的解决方案，但确实存在一些解决方案——不幸的是，你的情况基于 WebComponents。

一些让你开始研究的帖子，我相信你会从这里找到你的出路：

微前端：一种构建可扩展网络应用程序的方法

使用 React 和 Node 构建微前端

一些大公司的“框架”也可以使用，比如 Zalando 的这个框架：https: //www.mosaic9.org/

但是我不认为任何现成的解决方案都能满足您的需求，因为这个前端解决方案会影响您产品的许多层（从存储库模式到 CI/CD、您的 Nginx/CDN 设置、您的开发环境以及Docker 可能......）任何“框架”可能会做出对你的情况无效的假设。

不过我觉得它很有趣，我正在跟进新闻。 希望这可以帮助您找到解决方法。 ;)

Answer 2

我正在做类似的事情。 single-spa ( https://single-spa.js.org/ ) 看起来是目前最灵活、最成熟的解决方案。

您也可以研究简单地使用动态导入（es6 导入函数），或 react-loadable 在运行时加载组件子应用程序。 不幸的是，JS Web 框架和工具不喜欢在运行时加载东西，但这并不困难。

我正在考虑使用 nextJS 的“app shell”来快速加载 SSR 页面，然后使用import()动态加载“子应用程序”

Answer 3

2023 年更新：您可以使用WebpackModuleFederation解决此问题

你需要调整你的 webpack.js 来使用遥控器：

// webpack.prod.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
       app1: 'app1@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};

你的第二个正面需要包括：

// webpack.component.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteEntry', // this name needs to match with the entry name
      exposes: ['./public-path'],
      // ...
    }),
  ],
};

有关更多信息，请遵循官方文档或从示例存储库中获得启发