原文地址

距 qiankun 开源已曩昔了 11 个月，距上次官方 发声 已曩昔 8 个月。

Announcing qiankun@2.0

2019 年 6 月，微前端结构 qiankun 正式发布了 1.0 版别，在这一年不到的时间内，咱们收成了 4k+ star，收成了来自 siE H pngle8 * K – ? Q-spa 官方团队的问好，支撑了阿里 200+ 线上运用d D 8 U N s ) ^ R，也成为社区很多团队选用的微前端处理, m D L 6 Z d x #计划。

在今天8 I T ~ ; ~ f，qiankun 将正式发布 2.0 版别。

qiankun@2.0 带来了一些新才能的一起，只做了很小的 API 调整，1.x 的用户能够很轻松的迁移到 2.x 版别，详细信息见下方 晋级j R o ( ( . z ` N指南 小节。

qiankun 简介

或许有的朋友还不太了解 微前端 和 qiankun 是什么。

微前端是最近一年国内前端范畴被频频提及的关键字，虽d y ) c { 然它并不是一个全新的范畴/技术，但很显然在当今越来越多的前端运用行将步入第 3 个、第 5 个乃至更久的年头的背景下，如何给 巨石运用/遗产运用 注入新鲜的技术血液已经成为咱们不得不正视的问题，而微前端正是处理这类问题的一个十分适宜的处理计划。

qiankun 是一个出产 N * f = F可用的微前端结构，它根据 single-spU | Q & N g f E Ga，具备 js 沙箱、款式阻隔、HTML Loader、预加载 等微前端体系所需的才能。qiankun 能够用于任意 js 结构，微运用接入像嵌入一个 iframe 体系相同简略。

更多信息能够查阅咱们的 官方站点

定位改变

qiankun 2% _ V ] 8.0 带来的@ ` R j e h f [最大改变便是 qiankun 的定位将由} E H t % Z : 微前端y ` _ R } 0 N结构 转变为 微运用加载器。

此前 qiankun 的典型运用场景是 route-based 的控制台运用，做为一个微运用的聚合结构而被运用。

image-20200415232001094

如上图所示，在这种场景下，一个负责聚合与切换的主3 9 b ! S 5 !运用 与 多个彼此单独的微运用 一同构成了整个大的微前端运用，一/ o 6 . v般来说页面上活跃着的也往往只要一个微运用。

而这是微前端的场景之一，在另外一些场景下，你应该能够在同一个页1 3 X _ 9 D 面中，0 , 1 _ B x p加载多个不同的微运用，每个微运用都是主运用的组成_ 9 K 9 C 9 { m i部分 或许是 供给一些增强才能，这种场景能够说是微运用粒度的前端组件化。

因而，qiankun@2.0 将跳出 route-based 的微前端场景，供给愈加通用的微Z H E $运用加载才能，让用户能够愈加自在的组合微m D M y Q A Q ~ 0运用来建立产品。

本次晋G ? t 7 & )级带来了什么？

新功用

  • 支撑多运用并E n x / r P行及多实例沙箱
  • 支撑手动 加载/卸载 微运用
  • 支撑 IE11 沙箱兼容
  • 官方的极简微运用通讯计划
  • 支撑根据 Sha3 d m ( J 1 4 t $dow DOM 的款式阻隔

此外咱们还做了

  • 晋级 single-spa 到 5.x 版别
  • 更灵活的 prefetch 的定制策略
  • 配套的 webpack 插件
  • 更友爱的部署场景支撑W ) d – J 6，如主动为微运用注入运行时 publicPath 等
  • 更简略易懂的 API，重构0 b ,了许多代码，使d | ] M 其更清晰和更具扩展性
  • 修正了一些 bug

另外咱们还晋级了相应的 umi qiankun plugin，在 umi 场景下你能够这样去加载一个微运用：

import { MicroApp } from 'umi';
function MyPage() {
return (
<div>
<MicroApp name="qiankun"/>
</div>
);
}

发布日志

多运用支撑

在 qiankun@1.x 中，咱们的沙箱、款式阻隔等机制只能对单一微运用场景收效，多个微运用q N v * E r 5 D共存的支撑才能尚不齐备。

而在 2.0 版别中，咱们终于完善了这一功用，现在，你能够一起激H 6 d M ] W I活多个微运用，而微运用之间能够保持互不搅扰。

**在多运用场景下，每个微运用的沙箱都是彼此阻隔的，也便是说每个微运用对全局的影响都会局u y – 0 d / 2限在微运用自己的效果域内。**比如 A 运用在 window 上新增了个特点 test，这? i 3 D 5 & S个特点只能在 A 运用自己的效果域经过 win* h S E jdow.test 获取到，主运用或许其他微运用都无法拿到这个变量。

可是留意，页面上不能一起显示多个b 0 & ] % f M依靠于H & G s } ;路由的微运用，由于浏览器只要一个 url，如果有多个依靠路由的微运用一起被激活，那么大概率会导致其中一个 404。

为了更便利的一起装载多个微运用，咱们供给了一个全新的 API loadMicroApp ，用于手动控制微运用：

import { loadMicroApp } fro9 [ % /m 'qiankun';
/** 手动加载一个微运用 */
const microAF Z R { 8 W N Rpp = loadMicroApp(
{
name: "microApp",
entry: "https://localhost:7001/mic. P J f @ #ro-app.html",
con: z 3 F Z D _ 1tain` P m Cer: "#mi- % F 9 4 + k e vcroApp"
}
)
// 手动卸载
microApp.mountPromise.then(() => micron o ( q V ` p 6 KApp.unmount());

这Z ~ F C 8 k 3也是 qiankun 作为一个运用加载器的运用方法。

根据这个 api，你能够很容易的封装一个自己的微运用容器组件，比如：

class MicroApp extends React.Component {
microAppRef = null;
componentDidMount() {
coY E Jnst { naf # 3 _ qme, entry } = this.props;
this.microAppRef = loadMicroApp({ naz X u m r e H Ame, entry, co* R S p sntainer: '#container' });
}
componentWillUnmount() {
thisd ` % m h.microAppRef.mountPromise.then(() =&g i ` t v d & p Wgt; this.J * ; a %microAppRef.unmount());
}
render() {
return <div id="container"/>;
}
}

兼容 IE11 的沙箱才能

在 qiankun issue 区域呼声最高的便是 IE 的兼容，有不少小伙伴都等待 qiankun 能够在 IE 下运用。

qiankun 1.x 在 IE 运用的主要阻止便是 qiank; t v % u { N sun 的沙箱运用了 ES6 的 Proxy，而这q D t无法经过 p* / l w ;loyfill 等方法弥补。这导致 IE 下的 qiankun 用户无法敞开 qiankun 的沙箱l H b i x功用，导致 js 阻 } @ p %隔、款式阻隔这些才能都无法启用。

为此，咱们实现了一个 IE 特供的快照沙箱，用于这些不支撑 Proxy 的浏览器；这不需求用| Q Z户手动敞开，在代理沙箱不支撑的环境中，咱们会主动降级到快照沙箱。

留意，由于快照沙箱不能做到互相之间的完全独立，所以 IE 等环境下咱们不支撑多运用场景， singlur 会J & S i E被强制设为 true。

根据 shadow DOM 的款式阻隔

款式阻隔也是微前端面临的一个重要问题，在 qiankun@1.x 中，咱们支撑了微运用之间的款式阻隔（仅沙箱敞开时收效），这尚x @ { q Z存一些问题：

  1. 主子运用之间的款式阻隔依靠手动装备插件处理
  2. 多运用场景下微运用之间的款式阻隔亟待处理

为此，咱们引入了一个新的选项， sandbox: { strictStyleIsolation?:^ 4 G X boolean } 。

在该选项敞开的情况下，咱们会以 Shadow DOM 的方式嵌入微运用，以此g % 2 y 4 + + z z来做到运用款式的真正阻隔：

import { loadMid # ? } y h f pcroApp } from 'qiankun'
loadf K f )MicroApp({xxx}, { sandbox: { strictStyleIsolation: true } });

Shadow4 i ( DOM 能* M d L S + [ c够做到款式之间的真正阻隔（1 r | p 0 # U P而不是依靠分配前缀等约定式阻隔），其方式如下：e x r d – h _

image.png

图片来自 MDN

在敞开 strictStyleIsolation 时，咱们会将微运用刺进到 qiankun 创立好t R , q N ! ( z –的 Shadow Tree 中，微运用的款式（包含动态刺进的款式）都会被挂载到x p ( _ f R这个 Shadow Host 节点下，因而微运用的款式只会效果在 Shadow Tree 内部，这样就做到了款式阻隔。

可是敞开 Shadow DOM 也会引发一些别的问题：

一l 4 + l R m B 8 @个典型的问题是，一些组件或许会跳过 Shadow Boundary 到外部 Document Tree 刺进节点，而这部分节点的款式就会g n T丢失；比如 antd 的 Modal 就会烘托节点至^ 5 3 F z ducument.body ，引发款式丢失；针对方才的 antd 场景你能够经过他们供给的 ConfigProt b T cvider.getPopupContainer API 来指定k J 4 = * –在 Shado6 X ow Tree 内部的节点为挂载节点，但另外一些其他的组件库，或许你的一些代码也会遇到同样的问题，需求你额定留神。

此外 Shadow DOM 场景下还会有一些额定的事情处理、鸿沟处理等问题，后续咱k . H ` r { u Q们会逐渐更新官方文档辅导用户更顺畅的敞开 Shadow DOM。

所以请根据实际情况来选择是否敞开根据 shadow DOM 的款式阻隔，并做好相应的查看和处理。

官方的V ( = B [ 4 N极简通讯计划

微8 B [前端场景下，咱们以为最合理的通讯L S 0 k h %计划是经过 URL 及 CustomEvent 来处理。但在一些简略场景下，根据 pL 2 R 3 G |rops 的计划会更直接便捷，因而咱们为 qiankun 用户供给这样一组 API 来完结运用间的通讯：

主运用创立同享状态：7 f g

import { inite @ % J ) . IGloabal+ . D D ` 5 *State } frv E a 5 |om 'qiankuJ ( P v yn';
initGloabalState({ user: 'kuitos' });

微运用经K m L h过 props 获取同享状态并监听：

export function mount(props) {
props.onGlobalStateChange((state, prevState) =&g} 0 } ht; {
console.log(state, prevStateF E |);
});
};

更详细的 API 介绍能够查看官方文档。

咱们会继续为咱们带来什么

除了基本的日常E T P o z U # @保护、bugfix 之外，咱们还会测验走的更远：

  1. 官方支撑的 qiankun webpP u n ( ! ? Oack 插件，处理一些由于装备不当呈现的问题
  2. 自定义的沙箱规则
  3. 微运用嵌套支撑
  4. 更友爱的调试体验
  5. 与 Webpack5 Module Federation 的结合，供给官方的运用辅导或插件
  6. 更多的实验性（experimental）测验，如根据原生 Portal 标签的微运用烘托，根据运行时的更轻量的款式阻隔计划。

晋级c _ X 7 _指南

2.0 版别 调整了相当多的内部 API 姓名，但咱们运用的外部 API 改变并不大（基本完全兼容 1.x），你能够在十分钟内完结晋级。

render 更改为 container

import { registerMicroApps } from 'qiankun'
registerMicroApps(
[
{
name: 'react16',
entry: '//localhost:7100',
-     activeRule:g H 9 l location => location.pathname.startsWith('/react'),
+     actz u oive@ J iRule: '/react',
-? ~ ? u     render: renderFn,
+     container: '#subapp-viewport',
},
]
)

现在你能够简略的指定一个挂载节点即可，而不用自己手写对应的 rendeI Y Z W 7 ?r 函数了。简略场景下 activeRule 装备也不需求再手写函数了（当然仍是支撑自定义函数），只需求给出一个前缀规则字符串即可，一起支撑 react-rov 2 z 9uter 类的动态规则，如 /react/:appId/name （来自 single-spa 5.x 的支撑）。

一起，微运用收到的 props 中会新增一个 container 特点，这便是你的挂载节点的 DOM，这对处理动态增加的容器? ` [以及敞开了 Shadow DOM 场景下十分有用。

留意，旧的 render 装备仍然能够运用，咱们做了兼容处理便利不想晋级的用户；但 render 存在时，container 就不会收效。

start 的装备改变

由于咱们引入了一些新的才能C ` R B g d B，由于 stara J x / v u yt 的装备也发生了一些改变：

import { start } from 'qiankun'
startI u b M W U I({
-  jsSandbox: truU t 3 e,
+  sandbox: {
+    stricF . & - ptStg | xyleIsolation: tr` W + c i 0ue
+  }
})

新的 API loadMicroApp

这个 APa o A bI 用于手动* C } ] n 2 % e F挂载一个微运用

/** 用于加载一个微运用 */
loadMicroApp(app: LoadableApp, cQ M 1 b M `onfiguration?: FrameworkF 5 2 Q Y P |Configuration)

运用详情可见上面 多运用支撑 小节。