问题标签 [micro-frontend]

我们的团队正在开发一个大型项目，我们希望构建一个具有多个表单、仪表板和功能的大型应用程序。一个单一的 SPA 会变得复杂。因此，我们讨论“微前端”架构的方法。目标是生成包含多个子 SPA 的父 SPA。所有 SPA 都应该使用相同的框架：vueJS。

背后的想法：微前端

• Web 应用程序是由独立团队拥有的功能的组合
• 一个团队有一个独特的业务领域
• 该团队是跨职能的，从数据库到用户界面的端到端功能开发
• 就像独立的系统

我们发现了一些支持这一点的实现：

1. 微前端
2. CanopyTax 的单一 SPA

我们想在前端使用VueJS（vue、vue-router、vue-resource、vue-loade、webpack）

问题

1. 使用VueJS （标准 Vue 工具）实现复合 UI（即微前端）是否可行，是否有示例项目？
2. 我们有不止一个页面，因此我们需要一个解决方案来从一侧导航到另一侧。我们如何实现页面转换？
3. 是否可以在 VueJS 组件之间建立事件总线？
4. 我们如何实现组件之间的双向通信（父子，子父）？

我正在尝试为每个后端微服务提供一个角度模块。因此，当它们在可用时使用彼此的组件和在容器中找不到组件时使用默认的“服务不可用”组件时，要保持每个模块独立和干净。

示例场景：假设有一个销售和会计模块。销售模块需要一个带有选择器的组件：'total-price'。销售模块和会计模块都被主模块使用，但销售不知道会计。当我在销售中调用“总价”标签时，我希望主模块在会计中找到它并在销售中显示它。

这里的“总价”标签选择器就像一个抽象（OO 接口），它的实现被放置在会计模块中，主模块应该有一个 IOC 来搜索并找到实现并将其注入到销售中，并返回一个如果视图不可用，则找不到视图（有点像空对象模式）。这也有助于处理授权并在不允许用户查看某些组件时返回正确的视图。

代码示例： 这是该场景的示例代码，但它无法编译，因为正如我的问题所述，我正在寻找一种编排方式，组合 UI 并将<total-price>组件注入销售而不直接引用会计模块。

我有一个使用 TypeScript 和 Angular-CLI 1.7 版的现有 Angular 应用程序。现在我想将整个 Angular 应用程序嵌入到父反应应用程序中。例如，当在 React 应用程序中到达特定路由时，它应该呈现 Angular 应用程序，并且该 URL 将成为 Angular 应用程序的 base-href，并且 Angular 应用程序内的路由应该可以工作。此外，它应该保持原来的单页应用程序。

我正在寻找一个我可以做的解决方案

我不确定如何在 React Component 类中导入具有所有功能的 AppModule。

我在 Vuejs 中有一个简单的表单。我同样使用了 VueMaterial。现在，作为下一步，我想将此表单/应用程序/微应用程序制作成我们可以调用的任何 Web 组件/共享组件。

我的代码如下

main.js

应用程序.vue

首先，如果我的最终目标是微前端，我不确定我的方法是否正确。

我的意思是，（方法 #1）我应该使用样式化组件并将基本/UI/哑组件编译成 Web 组件。然后使用这些已经编译的 web 组件，让我们现在说 Vue.js，在我更大的 Vue.js 中，Form Component或者通过（方法＃2）在 Vue.js 中做所有事情，最后在 Vue.js 中编译完整的Form组件到 Web 组件转换为相同？

其次，如果上述两种方法相同并且不会产生影响，并且取决于我想要制作组件的大小。然后按照上面的方法 #2，我无法在编译的 Web 组件中看到 VueMaterial。

第三，如果方法#1 更适合首先做更简单的组件，然后在任何框架（Angular、React、Vuejs）中使用相同的组件，那么当我在 Vuejs CLI 中编译组件时，它会删除dist文件夹并吐出新的文件夹。所以，假设我希望我的基础/UI/Dumb 组件作为从 Vuejs + Styled 组件或 Ant Design/material design 到这些组件的 Web 组件库的 Web 组件，我该如何管理 Vuejs 中的编译部分，以便我可以做一个进口

import {Button, Card, Input} from 'my-web-components';

好的，一种方法是一个一个地手动构建每个组件并将它们复制到一个文件夹my-web-components中并发布相同的npm package内容或将其保留为内部使用。所以，在这里寻找更好的方法！

想到的另一个问题是，如果我确实采用这种方法，当我将 Vue 中的表单组件编译为 Web 组件并且无法渲染 VueMaterial 时，我会不会遇到与现在遇到的相同的问题. 我的困惑是我不确定我是否为 Vuejs 使用样式化组件，我的 Web 组件将如何以精确的样式编译等。

这很宽泛，但希望我在这里已经将所有开始的想法缩小到微前端方法！

期待您的回答。

微前端调查。我使用 cli 创建了一个示例 angular 应用程序，而不是引导应用程序，我创建了一个像这样的入口点：

我将 package.json 的 entry 属性设置为指向这个 ts 文件，打包它，发布并在另一个项目中，我安装它并像这样调用它：

然后使用 webpack 我将它捆绑在一起（使用第二个代码片段作为入口点）并在本地运行它。最令我惊讶的是，我得到了一个错误。

安装技术适用于 cli 生成的项目。我点击 ng serve ，我可以看到应用程序。（发布前）

这种确切的方法与 react（使用生成的项目）非常有效。为什么我不能对 Angular 做同样的事情？我很确定 CLI 项目在构建过程中有一些我看不到的神奇之处。弹出不是一种选择，因为 Angular 6+ 尚未实现该功能。

我想这样做，以便我可以使用 npm 作为工具来处理版本控制和依赖关系。例如，如果我要导入两个 Angular 应用程序，一个在 ^6.0.0 上运行，另一个在 ^6.2.0 上运行，那么在最后一个包中，我最终将只有一个 ^6.2.0 实例。

非常感谢！

我的团队开发了一个 Angular 5 应用程序，该应用程序已经投入生产了一段时间，但我们最近的任务是让该应用程序在公司拥有的其他 3 个站点上运行。一个站点是使用 Angular6 构建的 SPA，另一个也是 SPA，但使用 Angular5，而另一个使用一些较旧的库，例如 jQuery。

管理层希望我们立即与 Angular5 SPA 集成，因此我们只是将整个应用程序导出为带有子路由的模块，并让其他应用程序进行引导。

但恐怕上述方法不适用于非角度网站。这也使两个应用程序紧密耦合，因为“主机”应用程序需要了解我们的应用程序的所有依赖项，这不是一个微不足道的应用程序（我会说是相当大）并安装它们，当两个应用程序需要不同版本的应用程序时，这会导致问题相同的依赖项，更不用说在升级依赖项或框架本身时我们需要同步。我认为将应用程序嵌入更多站点时，这种方法不会扩展。

对于更通用的实现，我的第一个想法是将我们的应用程序升级到 Angular 6 并创建一个带有自定义元素的 Web 组件，但是我们需要支持不支持原生封装的 IE11 和 Edge，因此我们需要在每个使用它的站点，以确保它们不会破坏我们的样式，我也不知道 Web 组件是否可以管理子路由。

另一个想法是使用 iframe，但我的问题是 iframe 调整大小以适应内容以及如何从 iframe 内的“驻留”应用程序在“主机”应用程序中添加子路由。

有没有更好的方法来实现我们需要做的事情？

理想的解决方案应该允许我们的应用程序在多个站点中使用（每个站点都提供特定的配置），而我们不必知道使用我们的应用程序的站点。

谢谢你的帮助。

我正在尝试使用自定义编译器（基于oc-template-react ）设置OpenComponents。

我的组件的 package.json：

oc-my-template-compiler已安装。打包工作正常，但我从注册表中收到以下错误：

GET http://localhost:3030/hi-there/1.0.0/?__oc_Retry=0

我想我应该用oc.registerTemplate注册模板，但我不确定我应该在哪里做。开发注册表不应该关心它吗？

我们目前面临一些棘手的架构问题，即在一个复合 Web UI 中将多个Web 组件与单个后端服务集成到一个流畅的 Web 应用程序中。

（可协商的）设计决策有一些限制：

1. 微服务应该服务于它自己的前端（WebComponent），我们希望使用 HTML Imports 来允许将这样的 WebComponent 包含到复合 UI
2. 前端 WebComponent 需要能够从其后端微服务接收实时更新/事件
3. 页面（复合 UI 中使用的 Web 组件的总和）应仅使用一个连接/永久占用的端口与后端通信

我做了一个草图来代表我们的抽象/非技术要求以供进一步讨论：

据我了解，问题可以改写为：我们如何

a) 集中沟通进入

b) 在退出时分发通信

两端的单一传输路径。

这两个任务需要在传输路径的两侧解决，例如。后端和前端。

对于后端，我非常希望采用不仅由 Sam Newman 描述的 BFF 模式能够满足我们的需求。上述草图的右半部分（后端）可能与此类似：

传输路径可能最好使用标准化的网络技术，例如。https和websocket (wss)用于最需要的双向通信。我很想了解在网络技术领域具有同等高采用率的替代方案。

对于前端，我们目前缺乏关于先前描述的模式或框架的想法和知识。

棘手的是，多个基本独立的 Web 组件需要一起找到才能使用 ONE 中央通信路径。例如，如果前端将通过实现一个（大）Angular 应用程序来实现，我们将实现并注入一个“BackendConnectorService”（待讨论的名称）并注入到我们的各种组件中。

但是由于我们希望使用解耦的 Web 组件，因此不存在用于共享业务逻辑和依赖注入的此类背景层。我们是否应该编写一个专有的 JS 库，如果尚未从我们的每个组件中加载到窗口上下文中，并将用于（按照约定）与后端通信？

这将大致整合到如下草图中：

我们是否在思考/设计我们的应用程序错误？

我感谢每一个合理的想法或提示，以证明一个经过验证的模式/框架。

此外，您对问题和架构的看法可能有助于解决我们目前面临的问题。

我有 Angular 6微前端应用程序。它在主应用程序中有 4 个不同的应用程序。以及如何在这些应用程序之间实现路由。以及如何在主应用程序（我在主应用程序中有很多子路由）和子应用程序中实现路由。我正在使用“@angular/elements”。请在此存储库中找到我的代码https://github.com/nagaraju123/microfrontend

场景：

作为微前端实现并托管在 S3 上的共享组件...

• 包含托管在 S3 上的整个应用程序（webpacked）的 JS 包
• JS 包包含带有最新提交的哈希，例如 component.{hash}.js

问题：

当我们发布一个新包时，考虑到浏览器/CDN 缓存，确保新包在发布后被所有客户端使用的最佳策略是什么？重要提示：我们希望客户立即获得更新（内部）。

例子

1. 在发布时，生成一个 component.html 文件，该文件根据最新的哈希值拉入包（脚本标签）。将新的 component.html 发送到 S3。客户使用<link rel-'import' href='somedomain.com/component.html'>总是给他们最新的发货版本。

问题：捆绑包仍然可以利用 CD/浏览器缓存，但无法缓存 HTML 文件，因为我们需要它在任何版本中都是热的。同样奇怪的是，我们必须进行两次下载才能获得一个捆绑包。

2. 作为 NPM 模块交付，客户端可以在构建时使用该模块。

问题：如果我们有 10 个客户端，则所有 10 个客户端都需要构建和发布才能与新组件一起发布。假设 package.lock 不会导致通配符出现问题（不太清楚）。

注：内部组件；可能会发生频繁的变化，例如 AB 测试等。