JS微前端MicroApp如何使用

這篇文章主要介紹“JS微前端MicroApp如何使用”，在日常操作中，相信很多人在JS微前端MicroApp如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS微前端MicroApp如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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如何使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！