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

news/2025/3/14 16:22:54/

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

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目录 在点击 “权限” 按钮,将整站所有文件设置为只读。 老…