https://gitee.com/helibin/micro-app
micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。
micro-app与技术栈无关，也不和业务绑定，可以用于任何前端框架。
微前端分为基座应用和子应用，我们分别列出基座应用和子应用需要进行的修改，具体介绍micro-app的使用方式。
基座应用以vue框架为例
1、安装依赖
yarn add @micro-zoe/micro-app
2、在入口处引入依赖
// main.jsimportmicroAppfrom'@micro-zoe/micro-app'microApp.start()
3、分配一个路由给子应用
// router.jsimportVuefrom'vue'importVueRouterfrom'vue-router'importMyPagefrom'./my-page.vue'Vue.use(VueRouter)constroutes=[{// 👇 非严格匹配，/my-page/xxx 都将匹配到 MyPage 组件path:'/my-page/*',name:'my-page',component:MyPage,},]exportdefaultroutes
4、在my-page页面中使用组件
<!-- my-page.vue --><template><div><h1>子应用</h1><!-- name为应用名称，全局唯一，url为html地址 --><micro-appname='app1'url='http://localhost:3000/'baseurl='/my-page'></micro-app></div></template>
url和子应用路由的关系请查看路由一章
子应用以react框架为例
1、添加路由前缀(如果基座应用是history路由，子应用是hash路由，不需要设置路由前缀，这一步可以省略)
// router.jsimport{BrowserRouter,Switch,Route}from'react-router-dom'exportdefaultfunctionAppRoute(){return(// 👇 添加路由前缀，子应用可以通过window.__MICRO_APP_BASE_URL__获取基座应用下发的baseurl<BrowserRouterbasename={window.__MICRO_APP_BASE_URL__||'/'}><Switch>...</Switch></BrowserRouter>)}
2、在webpack-dev-server的headers中设置跨域支持。
devServer:{headers:{'Access-Control-Allow-Origin':'*',},},
子应用以angular框架为例
import microApp from '@micro-zoe/micro-app'
ngAfterContentInit(): void {
let dom = document.createElement("micro-app");
dom.setAttribute("name", "home-inspection");
dom.setAttribute("url", this.uri);
dom.setAttribute("data", this.data);
this.el.nativeElement.appendChild(dom);
//子应用向父应用发送消息
window.microApp.dispatch({imglist: src})
//父应用事件监听
microApp.addDataListener("home-inspection", (args)=>{
console.log(args.imglist)
}, true)
}
