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

标签 javascript reactjs server architecture web-component

问题

我有一个用 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 等。

最佳答案

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

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

关于javascript - 具有多个独立组件的 UI 架构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55224890/

相关文章:

javascript - 最好将一些大型或多个小型商店与 React 和 Reflux 一起使用

php - 使用Gmail SMTP发送邮件php不要到达

http - 有人可以解释这些 apache bench 结果吗,有什么突出的地方吗?

javascript - 检查两个数组之间的元素是否相同,然后从中赋值

javascript - 当我在同一浏览器上对另一个选项卡进行任何更改时如何刷新选项卡数据

reactjs - 如何在加载内部图像之前暂停整个组件?

node.js - 为什么我的 websocket 服务器无法正确提供 HTML 页面?

javascript - 如何将函数应用于对象或类似对象的数组

javascript - switchMap() 如何解析一个 Promise?

javascript - 启用按钮仅在所有字段均已填写时才提交