从 hybrid开发----》微前端

news/2024/9/15 13:14:31/

为什么开始写关于微前端的一系列博客?

1. 学生时代讨论关于hybrid APP的应用开发,历史的选择总是变化的,需要更进一步深入。

2. 之前工作项目中见到过沙箱隔离之后CSS冲突,需要学一下如何解决

-----------------------------  start ----------------------------------

 通过webpack将react应用打包为systemjs模块,在通过systemjs在浏览器中加载模块

在微前端架构中,微应用被打包为模块,但浏览器不支持模块化,需要使用 systemjs 实现浏览器中的模块化。

systemjs 是一个用于实现模块化的 JavaScript 库,有属于自己的模块化规范。

在开发阶段我们可以使用 ES 模块规范,然后使用 webpack 将其转换为 systemjs 支持的模块。

案例:**通过 webpack 将 react 应用打包为 systemjs 模块,再通过 systemjs 在浏览器中加载模块。

可用的资料

https://www.cnblogs.com/tangxing/p/7223456.html

 在基座页面下,加载子应用  用System.import 来导入  子应用。

 LOOK! 就像工作中使用的微前端!

 

明天继续。。。 

附:关于qiankun的入门

【微前端】10分钟学会乾坤大挪移 - 掘金


http://www.ppmy.cn/news/33699.html

相关文章

【Django 网页Web开发】05. 数据库操作,实战用户管理(保姆级图文)

目录1. 安装第三方模块2. ORM2.1 自己手动创建数据库2.2 django连接数据库2.3 建表语句写在哪里?2.4 建表语句写好后如何运行生效?3. 操作表3.1 创建数据表3.2 修改数据表4. 操作数据4.1 插入数据4.2 删除数据4.3 修改数据4.4 查询数据5. 实战&#xff1…

Qt基础之三十三:海量网络数据实时显示

开发中我们可能会遇到接收的网络数据来不及显示的问题。最基础的做法是限制UI中加载的数据行数,这样一来可以防止内存一直涨,二来数据刷新非常快,加载再多也来不及看。此时UI能看到数据当前处理到什么阶段就行,实时性更加重要,要做数据分析的话还得查看日志文件。 这里给出…

MYSQL常用命令大全

文章目录 基本语句链接数据库显示已有数据库创建数据库选择数据库显示数据库中的表显示当前数据库的版本信息,链接用户名删除数据库创建表表 增加将查询结果插入到新表中:表 删除表 修改表 查询in子查询between ~ and ~ 模糊查询模糊查询regexp中的OR:多个信息查询同义词:删…

linux语法复习-01天-用户管理-关机和重启

学习环境推荐使用VMware(搭建linux虚拟机) XShell(在windows命令操作) Xftp(从windows传输文件)linux操作系统大同小异,基本语法都是一样的,我用的是CentOS 7.X,其他版…

48天强训 Day1 JavaOj

48天强训 & Day1 & JavaOj 1. 编程题1 - 组队竞赛 组队竞赛_牛客笔试题_牛客网 (nowcoder.com) 1.1 读题 1.2 算法思想基础 我们应该尽量的让每一个队伍的中间值都最大化~我们应该尽量的让每一个队伍的最小值都足够小~前33%的不应该都作为每个队伍的最大值~ 接下来…

攻防世界-first

题目下载:下载 IDA载入 __int64 __fastcall main(int a1, char **a2, char **a3) {__useconds_t *v3; // rbpunsigned int v4; // eaxint *v5; // rcxint v6; // edxunsigned int v7; // eaxsigned __int64 v8; // rcx__int64 v9; // raxchar v10; // blchar v11;…

自动标注工具 Autolabelimg

原理简介~~ 对于数据量较大的数据集,先对其中一部分图片打标签,Autolabelimg利用已标注好的图片进行训练,并利用训练得到的权重对其余数据进行自动标注,然后保存为xml文件。 一、下载yolov5v6.1 https://github.com/ultralytic…

织梦dedecms程序安全设置

升级到dedecms最新版本 dedecms后台一般支持在线升级,如果不行,请到官方网站查询手工升级办法www.dedecms.com 权限设置: 主机控制面板中点击 “文件管理” 选中wwwroot目录 在点击 “权限” 按钮,将整站所有文件设置为只读。 老…

HNUCM省赛训练赛第14场题解

这边是这次训练赛的地址,都是中文题了这次。 目录A——TicketB——GCDC——FunctionG——CircleH——ClockI——TangramJ——TetrisA——Ticket 水题一道,没什么好讲的,但是我们wa了一发,题目没给清楚,实际上我们需要的…

ChatGPT-4.0 : 未来已来,你来不来

文章目录前言ChatGPT 3.5 介绍ChatGPT 4.0 介绍ChatGPT -4出逃计划!我们应如何看待ChatGPT前言 好久没有更新过技术文章了,这个周末听说了一个非常火的技术ChatGPT 4.0,于是在闲暇之余我也进行了测试,今天这篇文章就给大家介绍一…

智慧灌区管理平台-大中型灌区信息化监测系统

智慧灌区管理平台平台概述柳林智慧灌区管理平台以物理灌区为单元、时空数据为底座、数学模型为核心、水利知识为驱动,对物理灌区全要素和建设运行全过程进行数字映射、智能模拟、前瞻预演,与物理灌区同步仿真运行、虚实交互、迭代优化,实现对…

前端如何丢掉你的饭碗?

对于后端而言,我们常有“删库跑路”的说法,这说明后端的操作对于信息系统而言通常影响很大,可以轻易使信息系统宕机、崩溃,直接导致项目失败。所以,不要去逼后端程序员! 作为前端程序员,我们似…

从零实现深度学习框架——学习率调整策略介绍

引言 本着“凡我不能创造的,我就不能理解”的思想,本系列文章会基于纯Python以及NumPy从零创建自己的深度学习框架,该框架类似PyTorch能实现自动求导。 要深入理解深度学习,从零开始创建的经验非常重要,从自己可以理解的角度出发,尽量不使用外部完备的框架前提下,实现我…

【Spring事物三千问】Spring配置多数据源 vs 给多个数据源添加事物管理

在 Spring 中配置多数据源 与 给多个数据源添加事物管理是有区别的。 如果只需要使用到多个数据源,而不需要进行事物管理,是可以进行简单处理的。 Spring 中配置多数据源 如果不需要对数据源进行事物管理的话,在 Spring 中配置多个数据源是…

指针:程序员的望远镜

指针:程序员的望远镜一、什么是指针1.1 指针的定义1.2 指针和普通变量的区别1.3 指针的作用1.4 指针的优点和缺点二、指针的基本操作2.1 取地址运算符"&"2.2 指针的声明与定义2.3 指针的初始化2.4 指针的解引用2.5 指针的赋值2.6 指针的运算2.7 指针的…

FreeRTOS-编程风格

数据类型 portCHAR -- char portSHORT -- short portLONG -- long portTickType : 用于定义系统时基计数器的值和阻塞时间 -- unsigned short int , 当 FreeRTOSConfig.h 宏 configUSE_16_BIT_TICKS 为 1 时为 16 位 -- unsigned int , 当 FreeRTOSConfig.h 宏…

curosr使用c++实现图片视频转字符画风格带gui

talk is cheap show you the code 99%的代码都是通过cursor写出来的,提示太长了会卡住,所以最好先列一个提纲,每个步骤一定要详细 比如 实现一个函数,输入图片路径,然后把图片转换成字符画,再把字符画保存…

MySQL相关面试题解析(一)

文章目录 1.有如下数据库表,其中两个事务按照如下顺序执行,回答下列问题?2.同样是上面的数据库表,如果修改事务如下,回答下列问题?3.同样是上面的数据库表,如果修改事务如下,回答下列问题?1.有如下数据库表,其中两个事务按照如下顺序执行,回答下列问题? create ta…

蓝桥杯刷题冲刺 | 倒计时21天

作者:指针不指南吗 专栏:蓝桥杯倒计时冲刺 🐾马上就要蓝桥杯了,最后的这几天尤为重要,不可懈怠哦🐾 文章目录1.迷宫1.迷宫 题目 链接: 迷宫 - 蓝桥云课 (lanqiao.cn) 本题为填空题,只…

Redis缓存雪崩、缓存击穿、缓存穿透

用户的数据一般都是存储于数据库,数据库的数据是落在磁盘上的,磁盘的读写速度可以说是计算机里最慢的硬件了。 当用户的请求,都访问数据库的话,请求数量一上来,数据库很容易就奔溃的了,所以为了避免用户直…