具有多个独立组件的 UI 的架构
Architecture of a UI with multiple separate components
问题
我有一个用 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 依赖项是一种方法。但这将需要跨所有组件的统一框架版本。或者你可以试试 web-components.
我自己的项目也遇到过类似的问题，我发现 git submodules 工作得很好。
我考虑过的另一种可能有用的方法是使用 private npm package 和所有较小的组件。
问题
我有一个用 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 依赖项是一种方法。但这将需要跨所有组件的统一框架版本。或者你可以试试 web-components.
我自己的项目也遇到过类似的问题，我发现 git submodules 工作得很好。
我考虑过的另一种可能有用的方法是使用 private npm package 和所有较小的组件。