- 综合排序
- 最热优先
- 最新优先
- 来自专栏一道题做一宿
基于Webpack5实现微前端架构
前言 最近这段时间微前端这个概念越来越被提及，它采用了微服务的相关理念，我们可以把一个应用拆分成多个可以互不依赖可以独立开发并单独部署的模块，然后在运行时把它们组合成一个完整的App。 从Webpack5开始，已经内置了对微前端开发的支持，它们提供了一个新的功能叫Module Federation（我也不知道该怎么翻译这个术语会比较恰当），提供了足够的能力来让我们实现微前端开发。 我们会实现一个简单的App，然后把它通过webpack改造成微前端的形式。 我们开始吧！ 这次所有配置都由我们来手动完成。 接下来我们来把它改造成微前端的形式，把Header做成单独的模块，然后其它的做成另外一个模块，这时候就要用到ModuleFederationPlugin了。 今天我们仅仅用Module Federation实现了一个小demo，关于微前端跟webpack的管理都不是一篇文章就能够说得清楚的，还有很多事情可以聊，咱们后面再分别单独展开讲讲，Happy coding
1.2K20发布于 2021-08-13 - 来自专栏前端开发中的事
微前端之qiankun微前端
什么是微前端: 微前端项目是将每一个可以独立开发，测试，部署的子项目集合到一个主项目之下。对于用户来说，主项目仍然是一个完整的产品，而整个组装的过程对于用户来说，是透明的。 微前端不仅仅可以兼容不同的开发环境还可以兼容技术栈。可以做到更大程度的解耦合。 spa网页 [image.png] 微前端网页 [image.png] 为什么需要微前端： 当前应用较大，需要拆解开独立开发 多业务团队，独立开发同一个项目 集合式的中台项目等项目需要 同一个项目内需要兼容不同的架构项目 微前端的特点： 任意的JS框架都可以兼容使用，接入简单。 ，微前端的落地实现 qiankun的特点： 基于 single-spa 封装，提供了更加开箱即用的 API。
3.2K70发布于 2021-04-01 - 来自专栏学习猿地
Web前端学习 第11章 微信开发5 微信支付
一、概述 如果需要实现微信支付功能，需要有一个已认证的微信服务号，并且开通微信支付，开通后微信会提供一个商户ID。有了这个ID才能成功调用微信支付接口。 然后将这个值传递给前端，再由前端调用jsapi完成支付，示例代码如下所示： 1 document.querySelector(".pay").onclick = function(){ 2 function onBridgeReady() { 3 WeixinJSBridge.invoke( 4 'getBrandWCPayRequest', { 5 if (res.err_msg == "get_brand_wcpay_request:ok") { 14 // 使用以上方式判断前端返回 } else { 28 onBridgeReady(); 29 } 30 } 交易类型为【NATIVE】 返回的结果包括一个code_url字段，将这个字段的值传递给前端
1.5K10发布于 2020-07-09 - 来自专栏前端博客
微前端学习笔记(5)：从import-html-entry发微DOMJSCSS隔离
进行了一系列的处理拉取上述 html 中所有的外联 css 并将其包裹在 style 标签中然后嵌入到上述的 html 中支持执行页级 js 脚本 以及 拉取上述 html 中所有的外联 js 并支持执行在微前端中 /* https://https://zhoulujun.net/css/brands.css */ @font-face { font-family: 'Font Awesome 5 Brands'; ... } .fab { font-family: 'Font Awesome 5 Brands'; font-weight: 400; 参考文章：揭开 import-html-entry 面纱 https://blog.csdn.net/qq_41800366/article/details/122093720转载本站文章《微前端学习笔记 (5)：从import-html-entry发微DOM/JS/CSS隔离》,请注明出处：https://www.zhoulujun.cn/html/webfront/engineer/Architecture
92610编辑于 2024-06-06 - 来自专栏智能时刻
【微前端架构】AWS 上的微前端架构
微前端架构将微服务开发原则引入前端应用程序。在微前端架构中，开发团队独立构建和部署“子”前端应用程序。这些应用程序由“父”前端应用程序组合而成，该前端应用程序充当容器来检索、显示和集成各种子应用程序。 带有微前端的微服务后端 微前端的好处 与单体前端相比，微前端具有以下优势： 独立工件：微服务开发的核心原则是工件可以独立部署，这对于微前端仍然适用。 微前端挑战 相反，微前端提出了以下挑战： 父/子集成：微前端引入了确保父应用程序以与单体应用程序相同的一致性和性能显示子应用程序的任务。这一点将在下一节中进一步讨论。 构建微前端 微前端架构模式最困难的挑战是将子应用程序与父应用程序集成。优先考虑用户体验对于任何前端应用程序都至关重要。 结论 微前端架构为前端应用程序引入了微服务开发的许多熟悉的好处。微前端架构还允许您管理小型独立组件，从而简化构建复杂前端应用程序的过程。
2.7K10编辑于 2022-03-08 - 来自专栏grain先森
前端-微信小程序开发(5)：日历组件的实现
作者：叶小钗 http://www.cnblogs.com/yexiaochai/p/9412951.html 接上文： 微信小程序开发(4)：打造自己的UI库 github地址：https:
2.5K20发布于 2019-03-29 - 来自专栏京东技术
微前端概述
Tech 导读 本文由浅到深地对微前端进行了概括性介绍，读者可以了解到微前端的概念、微前端的特点与价值、微前端的实现方案、一个微前端框架应具备的功能，以及微前端的适用场景。 读者可以多关注下本文提到的各个开源的优秀的微前端实现方案，通过对比及借鉴来实现一套适合自身业务的微前端方案。 01 微前端是什么 传统的分而治之的策略已经无法应对现代 Web 应用的复杂性，因此衍生出了微前端这样一种新的架构模式，与后端微服务相同，它同样是延续了分而治之的设计模式，不过却以全新的方法来实现。 3.2.2 EMP EMP是一个基于Webpack5Module Federation搭建的微前端解决方案。 《前端架构从入门到微前端》一书中，将微前端的实现方案分为六种：路由分发、前端微服务化、微应用、微件化、iframe、Web Components。
2.2K40编辑于 2022-03-17 - 来自专栏一Li小麦
微前端随记
微前端 大型组织的组织结构，软件架构在不断变化。导致组织和应用不断膨胀，从而映射到软件架构中。 移动优先->App平台（One App）->中台战略->...? 微前端是一种类似微服务的架构。是微服务理念在浏览器端的应用实践。即将原来由单页面前端应用由单一的单体，转变微多个小型前端应用的聚合体。每个子项目可以独立开发部署，也可以进行并行开发。 微前端的核心思想就是（拆）分（自）治。达到降低维护成本的目的。以下是它的三个基本概念： 自治：不同应用由不同团队维护，但遵循统一的接口规范或框架以便于集成。因此彼此之间不存在依赖。 那么什么时候考虑做微前端？ •遗留系统的迁移：最重要的原因。正在赚钱的东西没有理由毁掉重来。人生苦短，尽量不要重构了。•聚合前端应用：这是前端特有的需求——后台使用微服务，希望的是解耦服务之间的依赖。 ——微前端就是一种“热闹”的技术。因此，在采用之前，需要看看看别人的失败经验。对于未来，仍然有很多路要走。
53510编辑于 2022-03-29 - 来自专栏微信小程序栏目
微前端——理论
***一、微前端1、什么是微前端微前端类似于微服务，它将微服务的理念应用于浏览器端。（1）微服务：把后端的功能进行了拆分，使用统一的网关进行调用。 图片***对前端应用进行拆分，将不同的功能按照不同的维度拆分成多个子应用，实现应用的自治。微前端的核心在于拆, 拆完后再合！ 优点：通用度高缺点：设计难度大例如：用户想要访问A应用，不需要加载其他应用，直接可以打开4、微前端拆分方式不合理的采用微前端，可能会带来很多问题，如前端基础设施不完善，会导致各个应用有大量的重复代码。 （5）跟随后端微服务拆分一旦后端拥有相关服务，前端也可跟随拆分，但是后端拆分方式并不全部适用于前端，还是要具体问题具体分析。 以上两种是现阶段比较常用且较成熟的方案，后期文章中会详细介绍，除此之外，还有Piral、Luigi，以及腾讯的微前端oteam和无界（基于iframe）以及Hel微前端，美团的Bifrost，字节的lModern.js
2.8K130编辑于 2022-10-06 - 来自专栏万丈高楼平地起
微前端乾坤
1.什么是微前端？ 微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 微前端不是单纯的前端框架或者工具，而是一套架构体系， qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台。 *基于 *single-spa 封装，提供了更加开箱即用的 API。 umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。 2.qiankun 框架的应用 主应用中操作 1. 第二种是基于 redux 实现的通信方式 - Shared 通信，适合需要跟踪通信状态，子应用具备独立运行能力，较为复杂的微前端应用。
1.9K20编辑于 2022-03-09 - 来自专栏柒八九技术收纳盒
理解微前端
今天我们来谈谈一个比较时髦的概念- 「微前端」。 「微前端」是一套用于「组织大型前端应用的指导规范」。是受后端「微服务」启发而发展而来。 接下来，我们就从微前端解决了哪些现存前端问题，并在解决这些问题的过程中做出了哪些取舍和权衡。 话不多说，我们开始。 微前端试图解决什么问题？ 有一些底层技术，如「webpack模块联盟」，使微前端成为可能。还有像single-spa这样的流行框架，为实现微前端做出了不小的努力。 这可能是设计上的问题，因为微前端并不指向一个特定的通用实现。这也是为什么对微前端的用途会让人感到困惑的原因之一。 而，「微前端」都是为了「解决组织问题，而不是性能问题」。它被用在由许多团队合作的大型SPA的背景中。 微前端的潜在问题 ❝微前端有着崇高的目标，「旨在解决真正的大型项目组织问题」。
66720编辑于 2022-08-25 - 来自专栏学习猿地
【融职培训】Web前端学习 第11章 微信开发5 微信支付
一、概述 如果需要实现微信支付功能，需要有一个已认证的微信服务号，并且开通微信支付，开通后微信会提供一个商户ID。有了这个ID才能成功调用微信支付接口。 然后将这个值传递给前端，再由前端调用jsapi完成支付，示例代码如下所示： 1 document.querySelector(".pay").onclick = function(){ 2 function onBridgeReady() { 3 WeixinJSBridge.invoke( 4 'getBrandWCPayRequest', { 5 if (res.err_msg == "get_brand_wcpay_request:ok") { 14 // 使用以上方式判断前端返回 } else { 28 onBridgeReady(); 29 } 30 } 交易类型为【NATIVE】 返回的结果包括一个code_url字段，将这个字段的值传递给前端
86030发布于 2020-07-13 - 来自专栏前端自习课
【微前端】1443- 将微前端做到极致-无界方案
本文提供一种基于 iframe 的全新微前端方案，完善的解决了这些核心诉求。 为什么还要造微前端框架 目前较成熟的微前方案有 qiankun、micro-app、EMP 方案，下面分别分析这三个微前端方案： qiankun 方案 qiankun 方案是基于 single-spa 的微前端方案。 module federation 的微前端方案。 ； micro-app 方案对 qiankun 方案做了较多提升但基于 qiankun 的沙箱也相应会继承其存在的问题； EMP 方案基于 webpack 5 联邦编译则约束了其使用范围； 目前的微前端方案在用户的核心诉求上都没有很好的满足
7.1K32编辑于 2022-11-15 - 来自专栏深度学习与python
微前端的未来
最后，我会分享下 2022 年我将关注微前端生态系统的哪些方面。 增加事先设计 微前端架构的主要挑战之一是回答这样一个问题：微前端有多 "微"？ 许多组织都面临这个问题。 在与数个从事分布式架构工作的团队的几次接触中，我发现，“分布式组件”的实现比微前端多得多。通过分布式组件，领域知识在容器和“微前端”之间，甚至是容器和多个“微前端”之间共享。 微前端通信 当同一个视图中有多个微前端时，它们有时候需要相互通信。 在我为设计微前端而创建的心理模型中，我建议微前端之间使用发布 - 订阅模式进行通信，严格执行微前端之间的边界，避免或至少减少设计时耦合，让团队有更大的自主性。 想象一下，一个微前端基础设施会自动把自己注册到一个发现服务中，而 UI 设计器会从发现服务中检索微前端，而不是直接与微前端进行点对点的联系。
71920编辑于 2022-06-13 - 来自专栏西岭老湿
微前端架构实战
这些问题让我们意识到，扩展前端开发规模以便于多个团队可以同时开发一个大型且复杂的产品是一个重要但又棘手的难题。 因此，早在2016年，微前端概念诞生了。 第1章 什么是微前端？ 可以理解微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。 微前端并没有技术栈的约束。每一套微前端方案的设计，都是基于实际需求出发。 如基于Webpack 5 Module Federation实现的EMP微前端方案，可以实现多个应用彼此共享资源分享。 其中，目前值得关注是去中心模式中的EMP微前端方案，既可以实现跨技术栈调用，又可以在相同技术栈的应用间深度定制共享资源，如果刚开始调研微前端的话，可以先尝试了解一下EMP微前端方案，或许会给你带来不错的使用体验
4.9K00发布于 2021-04-25 - 来自专栏WebJ2EE
【微前端】：Why Not Iframe
为什么不用 iframe，这几乎是所有微前端方案第一个会被 challenge 的问题。 但是大部分微前端方案又不约而同放弃了 iframe 方案，自然是有原因的，并不是为了 "炫技" 或者刻意追求 "特立独行"。 如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了。
1.4K10编辑于 2022-03-30 - 来自专栏Dawnzhang的开发者手册
微前端建设方案
第1章 概述 为解决项目前端的高耦合、改动牵一发而动全身、多种技术栈强制混用、前端反复重构不彻底的问题，提出微前端的建设。 微前端指的是一种由独立交付的多个前端应用组成整体的架构风格。 规范性前端 5 主应用前端（改造） 第5章 建设步骤 5.1 前端主架构 搭建前端的基底框架（乾坤），可以集成主应用、业务应用 研发主应用与微前端需要的公共组件、脚本 5.2 Demo测试 研发一个Demo，包含：主架构、主应用（整个GA-OA前端）、应用微前端，可以访问主应用，同时可以访问独立应用微前端。 5.4 公文办理 l 重构公文办理应用微前端 l 公文办理微前端，集成至主架构 l 主应用（GA-OA）剔除公文办理相关源码 5.5 通知通告 l 重构通知公告微前端 l 通知公告微前端，集成至主架构 5 主应用前端（改造） 持续
90841编辑于 2022-05-10 - 来自专栏前端技术研究和应用
浅析微前端技术
CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 WebComponent 组件，从而实现微前端的组件化渲染。 微前端的适用场景微前端的适用场景中大型项目建设微前端项目的初衷就是为未来可能的扩展开发提供可能，因此微前端非常适合具有多个团队维护的大型项目。 如果你把生产力放在首位，可以考虑 微前端 架构微前端的劝退场景业务边界不清晰的项目，在发起一个微前端项目前，你需要对该项目的业务领域及分工有着全面的了解。 如果你不知道某个特定的功能是由哪个团队负责开发及维护的，最终这个微前端项目将会变得一团乱，开发及维护成本极高，而由此带来的人效提升却很少，背离的微前端的初衷。 小型项目，在评估是否需要采用微前端架构前，你需要对平台的规模有大概的认知，不要为了纸面上的优势而强行采用微前端方案，业界还有很多其他小而美的框架可以尝试。微前端是前端发展的必然阶段。
2.1K60编辑于 2023-04-14 - 来自专栏Super 前端
前端架构--从入门到微前端
年中，自己做规划（2019Thinking(上) – 一个前端开发者的个人思考）时，考量了一段时间「微前端」，也关注到了《微前端的那些事儿》的文章，从而了解了作者「黄峰达」，也就购买了下面将要聊的书《 前端架构：从入门到微前端》 本书围绕前端架构的实施，从基础的架构规范，到如何设计前端架构，再到采用微前端架构拆分复杂的前端应用。 设计：架构设计的模式，以及设计和制定前端工作流 基础：通过深入构建系统、单页面应用原理、前端知识体系等，来构建出完整的前端应用架构体系 实施：通过与代码结构的方式，介绍如何在企业级应用中实施组件化架构、 设计系统和前后端分离架构 微前端：引入6种微前端的概念，以及如何划分、设计微前端应用，并展示了如何实现这6种微前端架构 演进：提出更新、迁移、重构、重写、重新架构等架构演进方式，来帮助开发人员更好地设计演进式架构 业务相关内容 微前端？目前预演中，对于目前我们思考的点： 业务边界如何划分？ 应用的标识化或者注册中心的方式如何考量？ 应用通信机制：嵌入业务的特定通信机制 或 剥离业务的通用通信机制？
1.3K21发布于 2020-05-28 - 来自专栏程序那些事儿
微前端那些事儿
什么是微前端 根据Micro-Frontend 官网的定义，微前端是将网站或者 web 应用程序视为由独立团队拥有的功能组合。 构建微前端应用程序有不同的方法，但主要我们可以将它们分为四个重要方面: 路由微前端 组成微前端 微前端通信 定义微前端 微前端的组合 微前端由客户端，服务器端，边缘测组合而成。 微前端之间的通信 与路由一样，微前端之间的通信也取决于组合的类型。当我们在相同或不同页面上使用多个微前端时，我们总是希望可以和其他微前端用户交互。 不同微前端之间的沟通可能不是那么微不足道，尤其是当有不同的团队构建它们时。为了维持独立部署的原则，我们需要确保每个微前端都不知道其他微前端，即使它们是水平分割的并且是同一页面的一部分。 这些自定义事件通过一个常见的类似对象的窗口进行调度，以便所有微前端都可以使用它。 定义微前端 在微前端我们可以使用不同的技术栈，我们可以将vue和react进行结合使用。
70930编辑于 2023-03-07
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号