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 等。

标签： javascriptreactjsserverarchitectureweb-component

Answer 1

If you want complete isolation between the main app and the smaller components, iframes are the way to go as they can ensure that each component can have its own React versions and dependencies.

If you need to share data / interaction between these components and the main app, then adding it as an npm dependency is one way to go. But this will require uniform framework versions across all components. Or you can try web-components.