一个 shell 中的多个 React 应用程序

Question

我必须使用一个主应用程序（外壳）和多个子应用程序来开发 React 应用程序架构。

要求

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

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

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

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

问题

这是可能的？你能给我一些关于如何做的建议吗？

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

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

感谢您的建议。

Answer 1

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

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

一些可以让您开始研究的帖子，我相信您会从这里找到方法：

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

使用 React 和 Node 构建微前端

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

然而，我不认为任何现成的解决方案会让你覆盖，因为这个前端解决方案会影响你产品的很多层（从存储库模式到 CI/CD，你的 Nginx/CDN 设置，你的开发环境Docker 可能......）任何“框架”都可能使假设在您的情况下无效。

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

Answer 2

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'],
      // ...
    }),
  ],
};

有关更多信息，请参阅官方文档或从示例存储库中获取灵感