19年微前端框架如雨后春笋般出现,在开源界和阿里内部都有着不同的业务实践。同时一些对微前端有定制化需求的部门想快速复用,但技术选型存在很高的门槛,对想要进入的部门成本非常大。
为了解决微前端标准不统一的问题,同时推动微前端技术方向的发展。前端委员会层面横向拉通各部门一同共建落地了微前端标准。qiankun 作为微前端开源项目的先驱部队,为了最大程度的保证用户体验,让用户平滑过渡,落地了 qiankun-one 版本。
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: {
title: 'currentTitle'
},
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: {
title: 'currentTitle'
},
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();
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>)
}