webpack 5 模块联邦实现微前端疑难问题解决说明webpack 5 新增 Module Federation（模块联邦）功能，他可以帮助将多个独立的构建组成一个应用程序，不同的构建可以独立的开发与部署。借助模块联邦我们可以一定程度的实现微前端概念1. 什么是微前端？微前端将微服务理念扩展到前端开发，一般来讲一个微服务架构中会有多个后端团队开发不同的业务服务，而前端通常只有一个团队，集中维护一
主应用1. 引入并注册import { registerMicroApps, start } from 'qiankun'
// 注册微应用
registerMicroApps([
{
name: 'thd-psy-web',
entry: '/thd-sz-web/child/thd-psy-web/',
container: '#thd-psy-web',
转载
2024-01-17 15:13:37
225阅读
第1章 概述为解决项目前端的高耦合、改动牵一发而动全身、多种技术栈强制混用、前端反复重构不彻底的问题，提出微前端的建设。微前端指的是一种由独立交付的多个前端应用组成整体的架构风格。具体的，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是一个整体。第2章 需求分析2.1 现状分析目前GA-OA项目的前端是一个整体项目，每一次变更整体打
# qiankun加载jquery项目
随着前端开发的不断发展，微前端成为了一个热门话题。qiankun 是一个开源的微前端框架，可以帮助我们将多个独立的前端项目整合到一个页面中。本文将介绍如何使用 qiankun 加载一个基于 jQuery 的子项目。
## 1. 准备工作
首先，我们需要创建一个基于 jQuery 的子项目。可以使用如下代码创建一个简单的项目：
```html
原创
2024-06-10 04:24:06
131阅读
随着移动互联网的发展和越来越多创业公司的加入，Web前端工程师的岗位空缺越来越大，薪资迅速上涨。Web前端工程师比以往更具有号召力。想要自学成为炙手可热的Web前端工程师？靠零碎化的短视频可不行，你需要更加对症下药的体系化好课程——WEB课程视频教程 ，为想要自学成才的Web前端新星们献上一套完整的自学课程，此次课程包含了10个阶段全套的在线课程，同时提供了视频和源代码的mian fei下载。从w
前言由于最近作者在学习微前端，web component也是其中一大特性，部分微前端框架使用到，也是深入学习了一下相关的知识，分享出来。Web Component是什么？Web Component 实际上一系列技术的组合，主要包含 3 部分：自定义元素。 在 HTML 基础标签外扩展自定义标签元素，也就是我们平时使用框架的"组件"；Shadow DOM。 主要用于将 Shadow DOM 的内容与
在公司里面，一般团队都是按照业务划分的，在没有微前端的时候，如果几个团队维护一个项目肯定会遇到一些冲突，比如合并代码的
原创
2024-09-05 10:10:17
2039阅读
一、微前端的优势什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略几个核心价值：技术栈无关，独立开发、独立部署，增量升级，独立运行时特点基于single-spa封装，提供了更加开箱即用的 API。HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。样式隔离，确保微应用之间样式互相不干扰。JS 沙箱，确保微应用之间 全局
Android的应用框架的外特性空间的描述在SDK文档有十分清楚的描述，Android应用的基本概念，组件生命周期等等有详细的描述。在外特性空间中，Android提供了Activity,Service,Broadcast receivers，Content Provider,Intent，task等概念，我在这里不讨论这些概念定义，因为SDK文档已经讲得够详细。在阅读SDK文档和研究Activit
qiankun框架的底层原理现在我们手写一个简易的qiankun框架，实现基础的父应用中切换路径跳转子应用、沙箱隔离等qiankun框架的功能。我们在已经配置好的qiankun主应用中不使用qinakun框架，而是引入我们自己手写的简易框架来实现本有的qiankun框架功能比如路由跳转、沙箱隔离、css样式隔离等。// 引入qinakun框架内的方法
// import { registerMic
转载
2024-04-14 16:07:04
429阅读
JQuery 是一个兼容多浏览器支持的JavaScript库,其核心理念是write less,do more(写得更少,做得更多),它是轻量级的js库,兼容CSS3还兼容各种浏览器,需要注意的是后续版本将不再支持IE6/7/8浏览器,jQuery使用户能更方便地处理HTML、events、实现动画效果,并且方便地为网站提供AJAX交互,jQuery还有一个比较大的优势是,它的文档说明很全,而且各
转载
2023-11-08 21:07:31
139阅读
本文主要通过对微前端框架single-spa的基座应用加载子应用的single-spa-vue函数库进行分析，通过代码维度分析让大家了解在single-spa加载子应用的时候都做了哪些事情。如何通过优化single-spa-vue函数库保持子应用的状态。
作者：京东物流 宁冲1 前言什么是微前端？
微前端是指存在于浏览器中的微服务。本文主要通过对微前端框架s
转载
2024-05-17 18:08:10
57阅读
最近负责的新项目用到了qiankun，写篇文章分享下实战中遇到的一些问题和思考。单独访问在线子应用：subapp/sub-vuesubapp/sub-react为什么要用qiankun项目有个功能需求是需要内嵌公司内部的一个现有工具，该工具是独立部署的且是用React写的，而我们的项目主要技术选型是vue，因此需要考虑嵌入页面的方案。主要有两条路：
iframe方案
qiankun微前端方案两种方
转载
2024-02-10 20:56:49
230阅读
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 一、什么是微前端 “微前端”一词最早在2016年提出，它将后端微服务的概念扩展到前端世界。简单来说，就是将大型的wen渐进式项目拆分成一个个小型工程，即微应用。每个微应用都能独立开发、部署、运行，然后由主 ...
转载
2021-02-21 21:15:00
294阅读
2评论
qiankun文档: 快速上手微前端 : 是最近一年国内前端领域被频繁提及的关键字，虽然它并不是一个全新的领域/技术，但很显然在当今越来越多的前端应用即将步入第 3 个、第 5 个甚至更久的年头的背景下，如何给 巨石应用/遗产应用 注入新鲜的技术血液已经成为我们不得不正视的问题，而微前端正是解决这类问题的一个非常合适的解决方案。qiankun : 是一个生产可用的微前端框架，它基于 si
转载
2024-03-25 23:10:37
51阅读
1、概述由于项目是基于vue-cli4改造的，所以webpack相关配置我们就在vue.config.js里操刀，没有该文件的直接在项目根目录新建vue.config.js即可，具体配置api参考官方文档2、process.env先说一下这个，因为后面会用到这里存储的变量值。 在系列文章上一篇中说到了.env文件，里面定义的变量会自动加入到process.env变量中，这里再简单说明一下，先看目录
转载
2024-10-14 12:41:06
376阅读
jquery的多页项目，不需要安装依赖，开发阶段也不需要启动本地服务器，直接在浏览器打开，很多情况下用jquery开发还是很方便很快捷的；也会有一些痛点，比如浏览器缓存问题，更新了图片，css或js后，如果引入路径或文件名称不变的话，用户访问的资源可能还是从浏览器缓存获取的旧资源，手动维护文件名称或引入路径又很麻烦，这就需要引入webpack了webpack4 安装依赖package.json"d
转载
2023-07-17 10:33:05
217阅读
前端开发者必备的 Nginx 知识nginx在应用程序中的作用解决跨域请求过滤配置gzip负载均衡静态资源服务器nginx是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器，最初由俄罗斯人Igor Sysoev编写。nginx现在几乎是众多大型网站的必用技术，大多数情况下，我们不需要亲自去配置它，但是了解它在应用程序中所担任的角色，以及如何解决这些问题是非常必要的。下面
注意：qiankun 属于无侵入性的微前端框架，对主应用基座和微应用的技术栈都没有要求。构建主应用基座我们先使用 vue-cli 生成一个 Vue 的项目，初始化主应用。将普通的项目改造成 qiankun 主应用基座，需要进行三步操作：创建微应用容器 - 用于承载微应用，渲染显示微应用；注册微应用 - 设置微应用激活条件，微应用地址等等；启动 qiankun；创建微应用容器我们先在主应用中创建微应
转载
2024-10-14 09:49:52
905阅读
目录一.整体项目准备二.基座应用搭建三.子应用配置数据传递及项目管理命令待更新一.整体项目准备安装 npm run all 方便后面的开发和代码处理npm i npm-run-all其他命令之后在写 二.基座应用搭建我们要拉一个基座项目进来, 为了后期修改方便,我这里的基座应用本身也是个单独项目用引入子仓库的方法引入进来那就copy一下我之前vite-vue3项目教程里的代码拉
