根据阿里巴巴微前端统一规范的完成适配的 qiankun 版本
19 年在阿里内部伴随各 BU 业务的发展，出现了 qiankun、icestark、alfa 等微前端框架，可满足各自温饱使用，但是周边生态建设很难相互使用，包括后续的互通使用，阿里巴巴前端委员会拉通各部们弄微前端的同学成立共建组，分成统一规范、推荐框架、管控治理、生态周边建设 4 个方向
目前微前端规范初版已完成编写，icestark 和 alfa 完成升级适配，为保证 qiankun 同学使用体验，暂不对框架本身进行大升级防止存量业务问题，故根据规范完成 qiankun 的上层接口规范适配，产出 qiankun-one 版本，供有需要的同学使用
$ npm i qiankun-one --save import { IAppConfig , IAppManifest , IOptions , IApp } from 'qiankun-one'
const appConfig : IAppConfig = {
name : "wei-micro-app-example1" ,
entry : [
"//wei.alicdn.com/micro-app-example/0.1.0/index.js" ,
"//wei.alicdn.com/micro-app-example/0.1.0/index.css"
] ,
activePath : '/demo1' ,
// 传递下发的props
props : {
title : 'currentTitle'
} ,
// 根据 string 运行时查找DOM节点
container : "#root-slave" ,
} import { setup , start } from 'qiankun-one' ;
import Sandbox from '@ali/sandbox' ;
setup ( {
appConfigs : [ {
name : "wei-micro-app-example1" ,
entry : [
"//wei.alicdn.com/micro-app-example/0.1.0/index.js" ,
"//wei.alicdn.com/micro-app-example/0.1.0/index.css"
] ,
activePath : '/demo1' ,
// 传递下发的props
props : {
title : 'currentTitle'
} ,
// 根据 string 运行时查找DOM节点
container : "#root-slave" ,
} , {
name : "wei-micro-app-example2" ,
entry : {
"scripts" : [
"//wei.alicdn.com/micro-app-example/0.1.0/chunk-libs.js" ,
"//wei.alicdn.com/micro-app-example/0.1.0/index.js"
] ,
"styles" : [
"//wei.alicdn.com/micro-app-example/0.1.0/chunk-libs.css" ,
"//wei.alicdn.com/micro-app-example/0.1.0/index.css"
]
} ,
activePath : '/demo2' ,
} , {
name : "wei-micro-app-example3" ,
entry : "//wei.alicdn.com/micro-app-example/0.1.0/index.html" ,
activePath : '/demo3' ,
} ] ,
options : {
sandbox : new Sandbox ( ) ,
prefetch : true ,
// 生命周期钩子函数
beforeMount : ( app ) => { } ,
// ...
} ,
} )
start ( ) ;
配置
说明
类型
是否必填
默认值
setup
注册 app 微应用函数
IConfig是
[]
start
开始运行微应用函数
-
是
-
配置
说明
类型
是否必填
默认值
appConfigs
微应用配置集
IAppConfig[]是
-
options
额外的配置
IOptions是
-
配置
说明
类型
是否必填
默认值
name
微应用名称，用以标识一个微应用
String
是
-
entry
微应用的资源信息描述
String/[String, String]/<IAppManifest>是
-
activePath
微应用受当前路由影响的激活规则
IActivePath是
-
container
微应用挂载的节点
HTMLElement是
-
props
微应用传入的参数
Object是
-
配置
说明
类型
是否必填
默认值
sandbox
是否启用内置的沙箱隔离，或者使用自定义的沙箱实例。
boolean/ISandbox 否
false
prefetch
是否预加载微应用的资源。
Boolean否
false
activePath
微应用受当前路由影响的激活规则。
IActivePath是
-
container
微应用挂载的节点。
HTMLElement是
-
props
微应用传入的参数
Object是
-
beforeMount
微应用生命周期 - 加载前
-
-
-
afterMount
微应用生命周期 - 加载后
-
-
-
beforeUnmount
微应用生命周期 -卸载前
-
-
-
afterUnmount
微应用生命周期 - 卸载后
-
-
-
beforeUpdate
微应用生命周期 -更新前
-
-
-
afterUpdate
微应用生命周期 - 更新后
-
-
-
IAppManifest - entry 配置规范
配置
说明
类型
是否必填
默认值
script
js 相关资源
String[]是
-
styles
css 相关资源
String[]是
-
import React , { useEffect , useRef } from 'react'
import { createMicroApp } from 'qiankun-one' ;
interface IApp extends Required < IAppConfig > {
load ( ) : void ;
mount ( container : HTMLElement , props ?object ) : void ;
unmount ( ) : void ;
update ( props ?object ) : void ;
}
const APP = ( ) => {
const containerRef : React . MutableRefObject < any > = useRef();
useEffect(() => {
const WidgetInstance : IApp = createMicroApp ( {
name : 'widgetName' ,
container : containerRef . current ,
entry : [
"//wei.alicdn.com/micro-app-example/0.1.0/index.js" ,
"//wei.alicdn.com/micro-app-example/0.1.0/index.css"
] ,
} , {
sandbox : true ,
prefetch : true
} )
WidgetInstance . load ( ) ;
} , [])
return (< div ref = { containerRef } > </ div > )
}
配置
说明
类型
是否必填
默认值
createMicroApp
注册 app 微应用入口
IConfig是
[]
配置
说明
类型
是否必填
默认值
load
加载子应用
-
-
-
mount
子应用生命周期 - 装载后触发
HTMLElement/Props -
-
unmount
子应用生命周期 - 卸载后触发
-
-
-
update
子应用生命周期 - 更新时触发
props-
-