javascript - 具有多个独立组件的 UI 架构

Question

问题

我有一个用 React 编写的站点 A。

每当用户导航到站点 A 中的某个页面时，我想将较小的 React 组件呈现到站点 A 中。

每个较小的 React 组件都位于自己的存储库中，站点 A 也是如此。

问题

当站点 A 处于生产状态时，如何将这些组件动态加载到站点 A？

我可以设置什么样的工作流程来在 站点 A 中本地开发较小的 React 组件？

---

我正在考虑使用 Web 组件 ( https://medium.com/@rchaves/building-microfrontends-part-iii-public-path-problem-1ce823be24c9 )，但不想让组件已经部署在某个地方，而只是从服务器加载这些组件。最好有一个解决方案，我可以在我的管道中设置一些东西来指向存在较小组件的存储库，并在构建任何组件时将它们与站点 A 代码一起打包到一个包中。

这也带来了另一个问题，即由于打包的项目不同，会多次加载相同的依赖项(如 React、React DOM)。

其他想法可能是使用 npm 模块、iframe 等。

Answer 1

如果您想要在主应用程序和较小的组件之间完全隔离，iframe 是可行的方法，因为它们可以确保每个组件都可以有自己的 React 版本和依赖项。

如果您需要在这些组件和主应用程序之间共享数据/交互，那么将其添加为 npm 依赖项是一种方法。但这将需要跨所有组件的统一框架版本。或者您可以尝试网络组件。