问题标签 [micro-frontend]

我正在采用将 React 组件包装到自定义元素中的方法，但是我觉得它是过度设计的，我看不到好处。我的代码看起来像这样：

是一个自定义元素是一个呈现 React 组件的自定义元素，该组件还包含一些子组件，例如共享 UI 组件库和其他 React 组件的本地自定义元素的一部分。

问题是我正在努力让 React 组件将道具和事件传递给自定义元素，我设法通过“字符串化”JSON 数据将道具解析为 HTML 属性。

我担心的是；所有这些额外的复杂性是否会增加任何价值？如果自定义元素实际上是 React 组件，我会不会更好？如何在 React 组件中轻松共享通用自定义元素？

所以我的公司正在为我们的应用程序使用微前端架构。这是我一直在这里开创的一个项目，到目前为止它非常成功。但是，我希望就我们面临的一项突出挑战获得一些建议。

当您使用 Webpack 构建 JavaScript 应用程序时，其中一个选项是向 URL 添加哈希。每次构建都会生成此哈希，因此只有在文件本身发生更改时哈希才会更改。所以文件名看起来像这样：

这样做的好处是浏览器缓存。浏览器会尝试缓存一些东西以避免消耗过多的数据。因此，如果它再次看到相同的文件名/U​​RL，它将只使用缓存的版本，而不是重新下载它。因为文件名中的哈希只有在文件被重新构建时才会改变，所以我们可以安全地依赖浏览器缓存这个文件来减少我们用户的在线下载负担，同时仍然相信他们将永远查看最新更改。

这是我们的微前端架构面临的挑战。指导原则之一是每个微前端都可以单独发布，这意味着基础应用程序（即用户导航到的初始应用程序）和它将加载的微前端应用程序之间没有直接依赖关系。

我们通过简单的静态标签来实现这一点。每次我们添加一个新的微前端，我们只需要更新一次基础应用来添加一个新的标签：

在上面的示例中，该 URL 使用 nginx 代理重定向到实际部署的微前端。由于涉及我们公司基础设施的愚蠢和令人沮丧的原因，这是一个相对 URL，但这是完全不同的。

重点是您会注意到它指向“app.js”，而不是“app.12ab34.js”。我们没有使用哈希，因为我们不想在每次微前端更改时更新基础应用程序。相反，我们返回一个 Cache-Control 标头以防止微前端的任何浏览器缓存。

这也不理想，因为在我们获得独立性的同时，我们失去了对微前端代码的缓存。

所以，我的问题是：如果我们要在微前端的文件名中启用哈希，有没有一种方法可以设置基础应用程序，我们不必为哈希更改更新它？换句话说，有没有一种完全不同的方式来连接这些我还没有想到的应用程序？

太感谢了。

我正在研究如何将我们的应用程序的前端单体应用到微前端架构中。我在 AngularJS 和微前端看到的所有文档通常都在谈论使用 Angular 提供的 UpgradeModule 以及如何在混合状态下运行应用程序时慢慢取出 Angular JS 组件。

这不是我想要做的。在这一点上，我们不想投资将 AngularJS 组件迁移到 Angular 8+。我们正在尝试使用 Angular 8 应用程序作为容器应用程序（处理导航、身份验证、页眉、页脚）的微前端架构，然后将我们的 AngularJS 单体作为 Web 组件存在于 Angular 8 容器内。这可能吗？如果是怎么回事？

据我所知，使用微前端时有两种流行的情况——

1) 带有组件的单页（每个都有自己的服务） 2) 可从仪表板/导航栏访问多个页面（每个部分都有自己的服务）

我已经挖掘了一段时间，据我所知，案例 1 在使用 Angular 自定义元素时非常简单。

问题是我需要解决案例 2。根据设计，我有一个仪表板（页面侧面的导航栏），其中包含不同组件入口点（报告、用户等）的路由列表。

我希望这部分成为容器，并且容器导航栏上的每条路线都通向一个单独的微前端，该微前端可以独立存在并作为容器的一部分。因此，当我构建完整站点时，我将拥有例如 reportService、userService 等......以及主/容器服务。

我无法弄清楚实现该目标的最佳方法是什么，我看过各种各样的文章，但我仍然看不到一条清晰的道路（准备好产品等...）

是否有任何流行且可用于生产的方法？

编辑：这个想法是例如 - 能够让两个团队各自在网站的单独部分（单独的上下文）上工作，而不会相互影响。两者都有站点的独立部分，并且在部署时可以将更改添加到主包含站点。这两个子站点之间的连接很少（如果有的话），它们可以单独运行或在容器内运行。

我添加了一篇文章的链接，该文章解释了我的问题以及更多内容，并且做得比我做得更好 https://martinfowler.com/articles/micro-frontends.html

我正在使用stenciljs. 它用于创建我们可以在任何地方重复使用的 Web 组件的出色库。我想知道模板编译器是如何工作的。我的意思是当我创建任何组件的构建时，它会在其中创建多个文件夹dist，当我们必须使用该组件时，我们只需要添加 1 或 2 个文件，如下所示。（我使用 bit.dev 上传我的组件）

同时，我尝试使用 react 相同的组件，但在 react 中，它们并没有像模板一样创建多个文件夹。

所以这里是模板创建的文件夹列表是dist文件夹

1. cjs
2. 收藏
3. esm
4. esm-es5
5. 手风琴
6. 类型和一些 index.js 文件

所以我的问题是所有这些文件夹的用途是什么。我担心这一点，因为当我在一些微型前端应用程序中收集我的所有模块时，我不希望所有组件都有这么多的文件夹。

所以如果我能理解它的用法，我可以在我的微前端应用程序中调试和管理重复的文件夹和代码。

任何帮助表示赞赏

更新

我已经使用模板检查了 ionic 及其构建，所以当我在 ionic 中构建 hello word 应用程序并检查www文件夹时，它包含我在整个应用程序中没有使用的所有组件的块。它的 3 MB ！！！！如果我不使用它，为什么要离子导入所有组件事件？

在这种情况下，我已经尝试过最好的反应..当我在反应中添加模板组件时，每个组件只有一个文件，然后相同的问题为一个组件生成多个文件，仅在其他地方只反应一个文件:) 不是这样凉爽的 ？:)

我们计划采用微前端，我们的项目是在 Asp.Net Core MVC 中，我们希望在其中拥有多个应用程序，每个应用程序由不同的团队拥有，他们可以独立开发、测试和部署。我正在寻找的是，如果前端的每个组件都有自己的 URL，因为我们希望组件可以独立部署，单独的 URL 意味着它是自己的服务器和主机环境，那么我们如何管理跨多个组件的会话？如果有人可以指导微前端考虑，那也很棒：

1. 安全
2. 独立可部署组件
3. 在组件之间传递事件或共享数据
4. 按母版页编排组件

我正在使用 Single-Spa-Angular 库构建微前端。我使用“ng add single-spa-angular”创建了三个不同的子应用程序，其中两个应用程序运行良好，但一个应用程序显示以下错误：

和

谁能帮我吗。

感谢 Shashi Bhushan Verma

我正在使用微前端（https://micro-frontends.org/）客户端架构。我对 Razor 组件感兴趣（服务器端渲染：https ://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0 ），但看起来不可能支持带有 Razor 组件的微前端。

我错过了什么吗？

我一直在测试 Angular Elements。基本上我创建了 2 个角度元素：一个简单的按钮和一个简单的输入。你可以在这里查看它们：http: //kaloyanmanev.com/edo-button.js和http://kaloyanmanev.com/edo-input.js

这两个元素都包括它们自己的 polyfills、main、runtime、脚本和样式，如下所示：https ://blog.angulartraining.com/tutorial-how-to-create-custom-angular-elements-55aea29d80c5

我正在尝试将它们包含在这样的 HTML 文件中：

基本上发生的事情是我得到了 2 个按钮，但它们之间没有输入，当然还有那个讨厌的错误：

当我单独使用脚本时，它可以工作......如果我将它们都包含在内，它不会。我研究了一下，但找不到任何解决方案。真的没有办法在一页中使用 2 个角度元素吗？

这个问题很可能是由 Angular 使用的 zone.js 引起的。我尝试将其从元素的 polyfill 中删除，但随后出现错误，指出 zone.js 是必需的，并且没有任何元素起作用。

那么如何使用这些元素呢？

*编辑

我从包中删除了 polyfill，并从 CDN 中包含了 zone.js。尽管如此，还有另一个错误发生：

我对整个“微服务”主题还很陌生，并开始阅读有关复合 UI 的内容。

现在我的问题是，复合 UI 和微前端之间有区别吗？还是它基本上描述了同一件事？

干杯