0

我们希望在一个单页应用程序下呈现几个 Web 应用程序(angular 7+)。我们正在寻找一个可以使用的微前端架构/框架。正如我们所看到的,这些是我们的实施选项:

使用 single-spa 开源框架:https ://github.com/CanopyTax/single-spa 使用 Iframes(友好的 Iframes)托管应用程序(shell)并根据当前 URL 加载每个应用程序。使用网络组件。其他?当前状态是一个单体 FE 应用程序,它通过 IFRAME 将另一个子应用程序作为内部应用程序使用(这种方法对我们来说是不可扩展的,因为托管应用程序将所有产品构建在一起,并且没有真正分离。)

我们的要求是微前端的通常要求: 独立开发 - 每个团队都可以在自己的 repo 上工作并构建他们的产品,而不管其他产品如何。

独立部署 - 每个应用程序都可以在生产中升级而无需停机,也不会干扰其他应用程序。

共享组件——我们在我们的应用程序中使用 Angular7,并且我们已经编写了一个专有的第三方库(共享组件和逻辑),应该在所有产品之间共享以实现相似的外观和感觉。

我们希望能够在不关心其他应用程序的情况下升级每个应用程序的框架(Angular、RXjs、Typescript 等以及我们的专有组件库)。

我们尝试使用 single-spa 框架,但我们遇到了一些问题,目前我们发现自己在思考这是否适合我们,或者我们是否应该尝试不同的方法。

我们使用单水疗的问题是:

  1. 资产加载是有问题的。(我们必须在托管应用程序的根文件夹中拥有资产文件,并且在切换到另一个应用程序时会遇到资产冲突)。
  2. 我们仍然不知道如何处理所有应用程序的全局样式(我们使用 sass 进行样式设置,它必须与每个应用程序的本地样式一起遵守)
  3. 升级 Angular 框架(或所有其他框架)对于一个应用程序来说是不可能的,它是全有或全无(因为我们有一个 Angular 实例)。
  4. 我们必须实现不同的捆绑来开发托管应用程序的另一端(外壳)。

当我们考虑Iframe(使用友好的 Iframe)解决方案时,我们可以想象所有子应用程序之间的完全分离。通信仅通过帖子消息进行。在这种方法中,我们可以将 UI 代码从中分离出来,并使 APIS 单独通过 IFRAME 工作

使用 iframe 有什么陷阱吗?

更通用的实现是使用自定义元素创建Web 组件,但我们需要支持不支持原生封装的 IE11 和 Edge,因此我们需要在使用它的每个站点中测试我们的应用程序,以确保它们没有破坏我们的风格,我也不知道 Web 组件是否可以管理子路由。

理想的解决方案应该允许我们的父应用程序通过路由请求子应用程序,而它们之间在资源和资产方面没有任何耦合,并且在这些方面应该是独立的。我们需要的另一个主要特性是这些应用程序应该有一个通知机制。

提前致谢。

4

0 回答 0