micro-app（微前端框架）

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)

  }