MicroApp 1.0 正式发布-天涯论坛 - Powered by Discuz! Archiver

5ep9lzv 发表于 2024-10-10 08:14:05

MicroApp 1.0 正式发布

<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/1610786b55944b38a4d5631fe6c380b4~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=M6G3pHB%2FyeXSNLq3o3PaPIjQkmE%3D" style="width: 50%; margin-bottom: 20px;"></div>
大众好，我是Echa。
好信息，2023年10月份京东前端研发团队对外宣布MicroApp 1.0 正式发布。此信息一出，又在Web 研发者各大论坛讨论的沸沸扬扬，说前段时间字节跳动 ByteDance Web Infra 团队才对外宣布 <a style="color: black;">Rspress 1.0 正式发布</a>，这京东前端研发团队又接着发布微前端MicroApp。有的人说她们是商量好的；有的人说各自在重复造轮子，各自卷；有些人说各自为了完成KPI；粉丝们你们怎么看呢？欢迎在评论下说出自己的看法。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/7df8a5ebaadd4c6ea2d75863a552ca7f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=gQZbKFje%2BS%2F%2BcpjLyZCgIflHRdU%3D" style="width: 50%; margin-bottom: 20px;">
 MicroApp v1.0.0 -alpha.6版本
</div>
从去年MicroApp v1.0.0 -alpha.6版本（2022-08-19），历经来多少个日日夜夜。一路迭代更新到此刻MicroApp 1.0版本，京东前端研发团队真心不易，博主这一路来看着成长的。你们这种研发精神，非常值得咱们程序员学习，博主给你们点赞。
借此机会，博主先给大众仔细介绍一下MicroApp 到底是什么，能做什么，有那些优点等等，仅有彻底认识了MicroApp，才可说出自己观点。期盼对大众有所帮忙，多认识，多学点有益无害，说不定哪天团队研发项目中就用上，你说是不是？下面博主给大众一一介绍上面的问题。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">全文大纲</h1>MicroApp 介绍MicroApp 项目背景MicroApp 优良有那些？MicroApp 扩展性怎样呢？MicroApp 研发调试工具介绍：Micro-App-DevTools怎样安排搭建自己的 MicroApp呢？怎样将MicroApp 0.x 版本升级到 1.0 版本呢？<h1 style="color: black; text-align: left; margin-bottom: 10px;">MicroApp 介绍</h1>
传送门：https://micro-zoe.github.io/micro-app/

Github：https://github.com/micro-zoe/micro-app
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/bb3525836af84328bb6c2e12f187151a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=Nafa6RNPFy9KIVIxF%2BGUSJja%2BkY%3D" style="width: 50%; margin-bottom: 20px;">
 MicroApp 官网
</div>
micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提高工作效率。它是日前接入微前端成本最低的框架，并且供给了JS沙箱、样式隔离、元素隔离、预加载、虚拟路由系统、插件系统、数据通信等一系列完善的功能。
micro-app与技术栈无关，对前端框架无限制，任何框架都能够做为基座应用嵌入任何类型的子应用。
微前端的概念是由于思特沃克软件技术（北京）有限机构 ThoughtWorks 在2016年提出的，它借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型模块应用，每一个应用都能够独立研发、独立运行、独立安排，再将这些小型应用融合为一个完整的应用，或将本来运行已久、无相关的几个应用融合为一个应用。微前端既能够将多个项目融合为一，又能够减少项目之间的耦合，提高项目扩展性，相比一整块的前端模块仓库，微前端架构下的前端模块仓库倾向于更小更灵活。
此时此刻， 京东前端研发团队开发MicroApp 诞生。
它重点处理了两个问题：1、随着项目迭代应用越来越庞大，难以守护。2、跨团队或跨分部协作研发项目引起效率低下的问题。千言万语介绍 MicroApp，不如一张图介绍更让粉丝们理解深刻，详细如下图：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/ca3f84c7e995408ba5102db1896b05e7~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=071%2BN60sX60p1J6OXFBsOy3ZN%2Bs%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">MicroApp 项目背景</h1>
在micro-app之前，业内已然有有些开源的微前端框架，比较流行的有2个：single-spa和qiankun。不晓得粉丝们有无用过？
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/5b04787aac9d4ae3ae5cf979ac86732c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=kGMlEuynh9j5jnU07xdZspPgYgw%3D" style="width: 50%; margin-bottom: 20px;">
 single-spa
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/7d51ed10f1884108a211eee08dcde01c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=fijeiNIJG0%2Ft0ho8CV0xjFrRUCQ%3D" style="width: 50%; margin-bottom: 20px;">
 qiankun
</div>
single-spa是经过监听 url change 事件，在路由变化时匹配到渲染的子应用并进行渲染，这个思路亦是日前实现微前端的主流方式。同期single-spa需求子应用修改渲染规律并暴露出三个办法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这亦引起子应用需要对入口文件进行修改。由于qiankun是基于single-spa进行封装，因此这些特点亦被qiankun继承下来，并且需要对webpack配置进行有些修改。
micro-app并没有沿袭single-spa的思路，而是借鉴了WebComponent的思想，经过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。并且因为自定义ShadowDom的隔离特性，micro-app不需要像single-spa和qiankun同样需求子应用修改渲染规律并暴露出办法，亦不需要修改webpack配置，是日前市面上接入微前端成本最低的方法。
描述了这么多，老规矩，直接上图会更易理解，详细如下图：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/fd783770347d4b699dd00ed26f7ecfa2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=y036TCO8eT9DUkv0vo14M2dJsGk%3D" style="width: 50%; margin-bottom: 20px;">
 micro-app 架构图
</div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">MicroApp 优良有那些？</h1>
运用简单
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/cfc8e6815252435dad23cc812e6af761~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=evfiDGYgKuPh%2BHTNe5OWZVgdkP0%3D" style="width: 50%; margin-bottom: 20px;"></div><micro-app name=my-app’ url=//localhost:3000/></micro-app>
官方将所有功能都封装到一个类WebComponent组件中，从而实此刻基座应用中嵌入一行代码就可渲染一个微前端应用。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/f5f2d588a4a14e05be4a8fafc528ce07~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=f012urTc0ybvshLEZoXVUeQ3dNA%3D" style="width: 50%; margin-bottom: 20px;"></div>
功能强大
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/b7a23a18a2a9452981a004f6a7144547~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=S3kG7MUiZhs9Ba%2BME13sVpeaDV8%3D" style="width: 50%; margin-bottom: 20px;"></div>
micro-app供给了js沙箱、样式隔离、元素隔离、路由隔离、预加载、数据通信等一系列完善的功能。js沙箱介绍官方运用Proxy拦截了用户全局操作的行径，防止对window的拜访和修改，避免全局变量污染。micro-app中的每一个子应用都运行在沙箱环境，以获取相对纯净的运行空间。
沙箱是默认开启的，正常状况下不意见关闭，以避免显现不可预知的问题。样式隔离MicroApp的样式隔离是默认开启的，开启后会以<micro-app>标签做为样式功效域，利用标签的name属性为每一个样式添加前缀，将子应用的样式影响禁锢在当前标签区域。.test {
color: red;
}

/* 转换为 */
micro-app .test {
color: red;
}但主应用的样式依然会对子应用产生影响，倘若出现样式污染，举荐经过约定前缀或CSS Modules方式处理。元素隔离元素隔离的概念来自ShadowDom，即ShadowDom中的元素能够和外边的元素重复但不会冲突，micro-app模拟实现了类似ShadowDom的功能，元素不会逃离<micro-app>元素边界，子应用只能对自己的元素进行增、删、改、查的操作。
举个栗子 :
主应用和子应用都有一个元素<div id=root></div>，此时子应用经过document.querySelector(#root)获取到的是自己内部的#root元素，而不是主应用的。
主应用能够获取子应用的元素吗？
能够的！
这一点和ShadowDom区别，在微前端下主应用持有统一全局的功效，因此咱们无对主应用操作子应用元素的行径进行限制。路由隔离MicroApp经过自定义location和history，实现了一套虚拟路由系统，子应用运行在这套虚拟路由系统中，和主应用的路由进行隔离，避免相互影响。
子应用的路由信息会做为query参数同步到浏览器地址上，如下：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/11b01bc1ec84453e965c3d5b7f6916f6~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=V9sVtZKAzLTEE%2ByfoLxS6NGAzgg%3D" style="width: 50%; margin-bottom: 20px;"></div>
虚拟路由系统还供给了丰富的功能，帮忙用户提高研发效率和运用体验。预加载预加载指的是在子应用尚未渲染时提前加载静态资源，从而提高子应用的首次渲染速度。
为了不影响主应用的性能，预加载会在浏览器空闲时间执行。数据通信micro-app供给了一套灵活的数据通信机制，方便主应用和子应用之间的数据传输。
主应用和子应用之间的通信是绑定的，主应用只能向指定的子应用发送数据，子应用只能向主应用发送数据，这种方式能够有效的避免数据污染，防止多个子应用之间相互影响。
同期咱们亦供给了全局通信，方便跨应用之间的数据通信。
兼容所有框架
为了保准各个业务之间独立研发、独立安排的能力，micro-app做了许多兼容，在任何前端框架中都能够正常运行。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">MicroApp 扩展性怎样呢？</h1>
官方从功能的方向介绍怎样接入微前端，这引起整体的规律不连贯。
在手把手系列中，咱们会侧重于前端框架本身，仔细介绍它们做为主应用和子应用怎样接入微前端。
咱们列举比较流行的前端框架，指出各框架的重视事项，规避各样可能显现的问题。
日前有：reactvueviteangularnextjsnuxtjs
以上框架能够任意组合，换句话说任何一个框架都能够做为主应用嵌入其它类型的子应用，任何一个框架亦能够做为子应用被其它框架嵌入，包含上面无列举出的其它库，如 svelte、umi ...
<h1 style="color: black; text-align: left; margin-bottom: 10px;">MicroApp 研发调试工具介绍：Micro-App-DevTools</h1>
Github：https://github.com/micro-zoe/micro-app-chrome-plugin
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/76aac523b1db447abdaa5b210e51200f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=i7mSc0RQsd%2BA2dS0oRYuHNt7%2FIE%3D" style="width: 50%; margin-bottom: 20px;"></div>
Micro-App-DevTools是基于京东零售推出的一款为micro-app框架而研发的chrome插件，旨在方便研发者对微前端进行数据查看以及调试,提高工作效率。
在chrome中输入chrome://extensions打开扩展程序，将已下载的插件拖入就可
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/8da8583098f948d2a4b5f6f328d5161c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=tfpzc11hMFmUuDGbpncv6nTLEyQ%3D" style="width: 50%; margin-bottom: 20px;"></div>
Micro-App-DevTools 功能Environment环境
可查看Micro app的Environment环境如下：__MICRO_APP_ENVIRONMENT__: 判断应用是不是在微前端环境中
__MICRO_APP_VERSION__: 微前端版本号
__MICRO_APP_NAME__: 应用名叫作
__MICRO_APP_PUBLIC_PATH__: 子应用的静态资源前缀
__MICRO_APP_BASE_ROUTE__: 子应用的基本路由
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/901d2f3611014cfa9f6a41be0e32487d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=5sedk%2Fh3%2B6UKU5VOZu7qtrQXynw%3D" style="width: 50%; margin-bottom: 20px;"></div>Communicate通讯
查看父子应用通讯数据通信面板
功能1、获取父应用数据
点击按钮获取当前被嵌入页面基座应用的JSON格式数据
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/6a8ccacbb76849e493340d82dafaaee9~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=f5q9N4Vs7whx0Z0IHJL%2FI60RpX4%3D" style="width: 50%; margin-bottom: 20px;"></div>
功能2、子应用研发环境模拟
点击按钮转至功能一中子应用研发环境模拟页面，此处模仿内嵌子应用，运用说明如下所示：
在子应用研发环境模拟页面中输入子页面URL等信息
a、子页面URL：此处输入被基座应用嵌入的子应用链接
b、父应用数据：此处输入JSON格式的父应用需要传给子应用的数据
c、子应用嵌入代码：此处表示子应用嵌入的代码
以上即完成微前端的嵌入，效果如下：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/8400680e2e5f4e18827eca1db98eb612~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=t69t0Lvh%2Fs%2FMm9d0UPq6zwNKhVs%3D" style="width: 50%; margin-bottom: 20px;"></div>
快捷打开方式一
点击右上角图标显现目录,选取"打开子应用研发环境模拟"
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/08c92d4e667545feaaeb83074e79a8c1~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=Ng%2FG7jrDdEyNXViqf2Ymheg1grg%3D" style="width: 50%; margin-bottom: 20px;"></div>
快捷打开方式二
点击鼠标右键，选取micro-app下，二级菜单点子应用研发环境模拟
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/ed4e8900309d47d09b111bfb62a7df4f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=x5TByGTGrjpZLzI6c2ttqjgzyAk%3D" style="width: 50%; margin-bottom: 20px;"></div>View子应用视图
查看子应用关联视图信息
点击按钮就可获取当前被嵌入页面基座应用的视图
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/7157571d6384421bbc04e0a0a2282432~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=RXpFaP%2FXBKFHEcWHLqhDw9zXhW8%3D" style="width: 50%; margin-bottom: 20px;"></div>
快捷打开方式
点击鼠标右键，选取micro-app下，二级菜单点击查看子应用范围
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/eeeb88ffa32e4d3e928bd4e76442fcbc~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=SyF5UdPBIDtnTU4A128mSnRtuGA%3D" style="width: 50%; margin-bottom: 20px;"></div>Route路由
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/b41b8dc5bbbd492b8d76a9001de514b1~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=U3PPrBEGCaKSc%2BDY5tPIHvZQWt4%3D" style="width: 50%; margin-bottom: 20px;"></div>
功能1、获取子应用路由
点击查看子应用URL按钮就可获取当前页面下所有子应用的路由位置
功能2、复制及打开子应用路由链接
点击复制按钮复制子应用路由，点击打开按钮直接在浏览器打开子应用链接位置
<h1 style="color: black; text-align: left; margin-bottom: 10px;">怎样安排搭建自己的 MicroApp呢？</h1>
咱们分别列出主应用和子应用需要进行的修改，详细介绍micro-app的运用方式。
主应用安装依赖 npm i @micro-zoe/micro-app --save初始化micro-app// index.js
importmicroAppfrom @micro-zoe/micro-app

microApp.start()嵌入子应用// React

export function MyPage () {
return (
<div>
 <h1>子应用</h1>
 // name：应用名叫作, url：应用位置
 <micro-app name=my-app url=http://localhost:3000/></micro-app>
 </div>
)
}//Vue
<template>
<div>
 <h1>子应用</h1>
 
 <micro-app name=my-app url=http://localhost:3000/></micro-app>
 </div>
</template>
子应用
1、在webpack-dev-server的headers中设置跨域支持。devServer: {
headers: {
Access-Control-Allow-Origin: *,
}
},完成以上过程即完成微前端的接入。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">怎样将MicroApp 0.x 版本升级到 1.0 版本呢？</h1>
从0.x版本迁移到1.0只针针对旧项目
迁移过程安装最新版本npm i @micro-zoe/micro-app@latest --save在start中增多配置// index.js
import microApp from @micro-zoe/micro-app

microApp.start({
disable-memory-router: true, // 关闭虚拟路由系统
disable-patch-request: true, // 关闭对子应用请求的拦截
})vite迁移
这儿只针对子应用是vite的状况，基座为vite不需要特殊处理。
过程1：删除子应用vite.config.js中的配置
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/43d3dd67b6414fb2a0d5cbee69378e5c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=7GnNNlZjDLgaPF2cSTwCz4m6Wp4%3D" style="width: 50%; margin-bottom: 20px;"></div>
过程2：开启iframe沙箱
去除之前的两个配置项：inline、disableSandbox，而后开启iframe沙箱。<micro-app name=名叫作 url=位置 iframe></micro-app>
过程3：删除基座中的自定义插件
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/5de0105349d84a56b19d53242eb7bf9b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=QnLMLux4PuzkejYnjmmYjDyJAww%3D" style="width: 50%; margin-bottom: 20px;"></div>
过程4：删除手动注册的通信对象
删除手动注册的通信对象，改用默认的通信方式进行数据通信
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/5a2ccb8898e14f34a3b52a3bd4be375e~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728788176&x-signature=cvnIUkxT98uE2XKqXj64X9dgIl0%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">最后</h1>
粉丝们，MicroApp 1.0 版本介绍有什么想法呢？
欢迎在评论区分享讨论。
一台电脑,一个键盘,尽情挥洒智慧的人生;
几行数字,几个字母,认真编写生活的美好;
一个灵感,一段程序,推动科技进步,促进社会发展。
创作很难，爱好的老铁们加个关注，点个赞，打个赏，后面会不定时更新干货和技术关联的新闻，速速保藏，谢谢！你们的一个小小举动便是对博主的认可，更加是创作的动力。
创作文案的初心是：沉淀、分享和利他。既想写给此刻的你，亦想贪心写给 10 年、20 年后的工程师们，此刻的你站在浪潮之巅，面对魔幻的互联网世界，很容易把一条河流看成整片大海。将来的读者已然晓得了这段技术的发展历史，但难免会忽略有些细节。倘若将来的工程师们真的创造出了时间旅行设备，能够让你回到此刻。那样博主的创作便是你和当年工程师们的接头暗号，你能感知到她们在这个时代的键盘上留下的余温。

页: [1]

天涯论坛's Archiver

MicroApp 1.0 正式发布