1. 介绍

MicroApp 是“京东零售”团队在2021年7月正式发布的一个微前端框架，并且抛弃了 Single SPA 的实现理念，基于 CustomElement 和 ShadowDom 来实现。

MicroAPP 宣传的优势有以下几点：

应用接入便捷：主应用只需一行代码即可接入一个微应用（有点夸张哈）

零依赖：本身 MicroApp 并不依赖其他第三方库

框架兼容：本身对其他框架应用都做了适配，并且也兼容 Vite 和 Webpack 应用

其他基本功能：微前端框架都要实现的功能，比如js沙箱、样式隔离、数据通信等

但是因为 MicroApp 依赖 CustomElement 和 proxy，所以浏览器兼容性需要考虑。不过除了已逝的IE，其他浏览器基本都支持。

当然了，因为 MicroApp 发布比较晚，目前也还在 v1 的 alpha 版本，讨论组里面也经常有反馈bug，所以直接上正式项目还有待考虑。

2. 主应用

2.1 路由配置和基础页面

因为 MicroApp 没什么侵入性，所以直接创建用 Vite 创建一个模板项目即可。

npm create vite@latest main-app -- --template vue-ts

📌But： 因为 MicroApp 使用的是 CustomElement，使用的时候与普通 dom 元素一致，在主应用配置路由时最好使用一个空白组件来放置子应用

这样，先创建一个简单的路由配置和对应页面

// router.ts
import { createRouter, createWebHistory } from "vue-router";
const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home/:page*', name: 'home app', component: () => import('@/views/home.vue') },
  { path: '/about/:page*', name: 'about app', component: () => import('@/views/about.vue') },
]
const router = createRouter({
  history: createWebHistory('/'),
  routes: routes,
})
export default router;

// home.vue
<template>
  <micro-app name='home' url='http://localhost:3001/micro-app/home' heep-alive />
</template>
<script lang="ts" setup></script>

// about.vue
<template>
  <micro-app name='about' url='http://localhost:3002/micro-app/about' heep-alive />
</template>
<script lang="ts" setup></script>

🚀 Vue 的路由配置这里需要注意一点：

因为子应用后面通常会有自己的路由，并且不确定是 history 模式还是 hash 模式，所以主应用在配置 path 地址匹配时需要配置 非严格匹配，避免跳转空白页面。

2.2 全局生命周期配置

MicroApp 在主应用注册的时候可以注册全局的生命周期监听函数。

// main.ts
import microApp from '@micro-zoe/micro-app'
const lifeCycles = {
  created() {
    console.log('标签初始化后，加载资源前触发')
  },
  beforemount() {
    console.log('加载资源完成后，开始渲染之前触发')
  },
  mounted() {
    console.log('子应用渲染结束后触发')
  },
  unmount() {
    console.log('子应用卸载时触发')
  },
  error() {
    console.log('子应用渲染出错时触发，只有会导致渲染终止的错误才会触发此生命周期')
  }
}
microApp.start({ lifeCycles })

2.3 主应用插件系统

MicroApp 在主应用启动（调用 microApp.start()）时可以在参数中配置应用插件 plugins，并且插件分为 “全局插件 global“ 与 ”子应用插件 modules“。

插件系统的主要作用就是对js进行修改，每一个js文件都会经过插件系统，我们可以对这些js进行拦截和处理，它通常用于修复js中的错误或向子应用注入一些全局变量

一个插件接收以下配置项：

scopeProperties：可选配置，接收 string数组，配置 强隔离的子应用独享全局变量

escapeProperties：可选配置，接收 string数组，效果与 scopeProperties 相反，配置 子应用共享到基座应用和window的全局变量

options：可选配置，接收一个任意类型数据，传递给 loader 配置的函数使用

loader：必须配置，接收一个函数，函数参数为 code, url, options，并且必须将 code 返回

插件配置方式如下：

import microApp from '@micro-zoe/micro-app'
import painfulJoya from '@micro-zoe/plugin-painful-joya' // 官方封装的子午线埋点插件
microApp.start({
  plugins: {
    // 设置为全局插件，作用于所有子应用
    global: [painfulJoya],
    // 设置 home 子应用的独享配置
    home: [{
      scopeProperties: ['AMap'],
      loader(code, url) {
        console.log('我是插件loder函数', code, url)
        return code
      }
    }],
  }
})

3. 子应用

MicroApp 官方在子应用的处理上提供了两种模式：默认模式和 UMD 模式。

默认模式：该模式不需要修改子应用入口，但是在切换时会按顺序依次执行 所有渲染依赖 的js文件，保证每次渲染的效果是一致的

UMD 模式：这个模式需要子应用暴露 mount 和 unmount 方法，只需要首次渲染加载所有 js 文件，后续只执行 mount 渲染和 unmount 卸载

官方建议频繁切换的应用使用 UMD 模式配置子应用

3.1 Webpack + Vue 子应用

1. webpack 配置

与所有的微前端框架接入子应用一样，首先一样要修改 webpack 的 devServer 配置，来开启跨域请求。

module.exports = {
  devServer: {
    disableHostCheck: true, // 关闭端口检测
    port: 4001,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      jsonpFunction: `webpackJsonp-chile-vue2`
    }
  },
}

2. 设置 PublicPath

这里可以新建一个 public-path.js 的文件，之后在入口处第一行引入

// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}
// 之后，在 main.js 中引入

3. 入口文件配置

上文说到了子应用有两种配置方式，主要就体现在入口文件上。

因为路由配置有特殊性，这里先不引用路由，依然是以 Vue 为例

import './public-path'
import Vue from 'vue'
import App from './App.vue'
let app = null
////////// 1. 首先是默认模式的配置
app = new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
// 监听卸载，因为每次都会重新加载所有js，所以建议配置一个卸载方法去清空依赖项等
window.unmount = () => {
  app.$destroy()
  app.$el.innerHTML = ''
  app = null
  console.log('微应用vue2卸载了 -- 默认模式')
}
////////// 2. umd 加载模式
// 初始化与二次加载时调用
window.mount = () => {
  app = new Vue({
    router,
    render: h => h(App),
  }).$mount('#app')
  console.log("微应用vue2渲染了 -- UMD模式")
}
// 卸载操作放入 unmount 函数
window.unmount = () => {
  app.$destroy()
  app.$el.innerHTML = ''
  app = null
  console.log("微应用vue2卸载了 -- UMD模式")
}
// 如果不在微前端环境，则直接执行mount渲染
if (!window.__MICRO_APP_ENVIRONMENT__) {
  window.mount()
}

4. 路由

这里是子应用路由的简单示例

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
const router = new VueRouter({
  mode: 'history', // hash 模式可以不用配置 base
  //  __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由
  base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./pages/home.vue'),
    },
    {
      path: '/page',
      name: 'page',
      component: () => import( './pages/page2.vue')
    }
  ];
})
export default router;

3.2 Webpack + React 子应用

1. 依旧是修改 webpack 配置，开启跨域访问

2. 配置 PublicPath 和入口文件（public-path.js 配置与上面一致）

这里也区分默认模式和 umd 模式，默认模式就是将 mount 函数提出来直接运行即可，这里省略

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';
window.mount = () => {
  ReactDOM.render(
    <React.StrictMode>
      <Router />
    </React.StrictMode>,
    document.getElementById('root')
  );
}
// 卸载
window.unmount = () => {
  notification.destroy()
  ReactDOM.unmountComponentAtNode(document.getElementById('root'));
}
if (!window.__MICRO_APP_ENVIRONMENT__) {
  window.mount()
}

3. 配置子应用路由

React 的子应用路由配置其实与 Vue 的类似，只是需要配合 ReactRouter 和 jsx 的写法。

import React, { lazy, Suspense, useState, useEffect } from 'react'
import { BrowserRouter, Switch, Route, Redirect, Link } from 'react-router-dom'
function Router () {
  <BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/micro-app/react16/'} >
    <Menu mode="horizontal">
      <Menu.Item key='home'>
        <Link to='/'>home</Link>
      </Menu.Item>
      <Menu.Item key='page'>
        <Link to='/page'>page</Link>
      </Menu.Item>
    </Menu>
    <Switch>
      <Route path="/" exact>
        <Home />
      </Route>
      <Route path="/page">
        <Page />
      </Route>
      <Redirect to='/' />
    </Switch>
  </BrowserRouter>
}
export default Router

4. 应用路由配置说明

基础规则：

主应用是 hash路由，子应用也必须是hash路由

主应用是 history路由，子应用则不受影响

4.1 主应用路由

主应用路由仅控制主应用的页面渲染，与一般单页应用的路由匹配和渲染逻辑一致。

4.2 子应用路由

🚀🚀🚀 主应用使用子应用时，配置的 url 与 baseroute、子应用路由之间 没有任何关系！

子应用与主应用一样是通过 完整的地址栏路由Path（端口号后面的部分） 来进行匹配和渲染的，url 属性仅用于加载子应用 html 文件。

baseroute 属性是用来给子组件使用，以供配置基础路由前缀的，子应用可以通过 window.__MICRO_APP_BASE_ROUTE__ 访问到该属性；并且，子应用使用 hash路由 模式时也 不需要配置 baseroute

根据官方的示例，可以总结以下规则：

url 与路由配置无关，仅作为子应用 html 文件加载地址

主应用与子应用共享地址栏完整的 path路径，但优先级不同：主应用匹配完成之后加载主应用页面，页面中有子应用才渲染子应用并开始子应用路由匹配

仅当主应用子应用 都使用 history 路由模式，且子应用独立运行时 不需要特定模块前缀 的情况下，主应用使用子应用时需要配置 baseroute 声明模块前缀；并且子应用路由需要配置 base 属性。

微前端之 MicroApp 介绍和基础使用

1. 介绍

2. 主应用

2.1 路由配置和基础页面

2.2 全局生命周期配置

2.3 主应用插件系统

3. 子应用

3.1 Webpack + Vue 子应用

3.2 Webpack + React 子应用

4. 应用路由配置说明

4.1 主应用路由

4.2 子应用路由

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

微前端之 MicroApp 介绍和基础使用

1. 介绍

2. 主应用

2.1 路由配置和基础页面

2.2 全局生命周期配置

2.3 主应用插件系统

3. 子应用

3.1 Webpack + Vue 子应用

3.2 Webpack + React 子应用

4. 应用路由配置说明

4.1 主应用路由

4.2 子应用路由

热门文章

最新文章

相关课程

相关电子书

相关实验场景