JS微前端MicroApp基础使用

目录

• 1. 介绍
• 2. 主应用
• 2.1 路由配置和基础页面
• 2.2 全局生命周期配置
• 2.3 主应用插件系统
• 3. 子应用
• 3.1 Webpack + Vue 子应用
• 3.2 Webpack + React 子应用
• 4. 应用路由配置说明
• 4.1 主应用路由
• 4.2 子应用路由

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 属性。

以上就是JS微前端MicroApp基础使用的详细内容，更多关于JS微前端MicroApp基础的资料请关注我们其它相关文章！