當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

JS微前端MicroApp如何使用

發(fā)布時(shí)間：2023/12/15 综合教程 30 生活家

生活随笔收集整理的這篇文章主要介紹了 JS微前端MicroApp如何使用小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

1. 介紹

MicroApp 是“京東零售”團(tuán)隊(duì)在2021年7月正式發(fā)布的一個(gè)微前端框架，并且拋棄了 Single SPA 的實(shí)現(xiàn)理念，基于 CustomElement 和 ShadowDom 來實(shí)現(xiàn)。

MicroAPP 宣傳的優(yōu)勢(shì)有以下幾點(diǎn)：

應(yīng)用接入便捷：主應(yīng)用只需一行代碼即可接入一個(gè)微應(yīng)用（有點(diǎn)夸張哈）

零依賴：本身 MicroApp 并不依賴其他第三方庫

框架兼容：本身對(duì)其他框架應(yīng)用都做了適配，并且也兼容 Vite 和 Webpack 應(yīng)用

其他基本功能：微前端框架都要實(shí)現(xiàn)的功能，比如js沙箱、樣式隔離、數(shù)據(jù)通信等

但是因?yàn)?MicroApp 依賴 CustomElement 和 proxy，所以瀏覽器兼容性需要考慮。不過除了已逝的IE，其他瀏覽器基本都支持。

當(dāng)然了，因?yàn)?MicroApp 發(fā)布比較晚，目前也還在 v1 的 alpha 版本，討論組里面也經(jīng)常有反饋bug，所以直接上正式項(xiàng)目還有待考慮。

2. 主應(yīng)用

2.1 路由配置和基礎(chǔ)頁面

因?yàn)?MicroApp 沒什么侵入性，所以直接創(chuàng)建用 Vite 創(chuàng)建一個(gè)模板項(xiàng)目即可。

npmcreatevite@latestmain-app----templatevue-ts

But： 因?yàn)?MicroApp 使用的是 CustomElement，使用的時(shí)候與普通 dom 元素一致，在主應(yīng)用配置路由時(shí)最好使用一個(gè)空白組件來放置子應(yīng)用

這樣，先創(chuàng)建一個(gè)簡單的路由配置和對(duì)應(yīng)頁面

//router.ts
import{createRouter,createWebHistory}from"vue-router";
constroutes=[
{path:'/',redirect:'/home'},
{path:'/home/:page*',name:'homeapp',component:()=>import('@/views/home.vue')},
{path:'/about/:page*',name:'aboutapp',component:()=>import('@/views/about.vue')},
]
constrouter=createRouter({
history:createWebHistory('/'),
routes:routes,
})
exportdefaultrouter;

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

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

Vue 的路由配置這里需要注意一點(diǎn)：

因?yàn)樽討?yīng)用后面通常會(huì)有自己的路由，并且不確定是 history 模式還是 hash 模式，所以主應(yīng)用在配置 path 地址匹配時(shí)需要配置 非嚴(yán)格匹配，避免跳轉(zhuǎn)空白頁面。

2.2 全局生命周期配置

MicroApp 在主應(yīng)用注冊(cè)的時(shí)候可以注冊(cè)全局的生命周期監(jiān)聽函數(shù)。

//main.ts
importmicroAppfrom'@micro-zoe/micro-app'
constlifeCycles={
created(){
console.log('標(biāo)簽初始化后，加載資源前觸發(fā)')
},
beforemount(){
console.log('加載資源完成后，開始渲染之前觸發(fā)')
},
mounted(){
console.log('子應(yīng)用渲染結(jié)束后觸發(fā)')
},
unmount(){
console.log('子應(yīng)用卸載時(shí)觸發(fā)')
},
error(){
console.log('子應(yīng)用渲染出錯(cuò)時(shí)觸發(fā)，只有會(huì)導(dǎo)致渲染終止的錯(cuò)誤才會(huì)觸發(fā)此生命周期')
}
}
microApp.start({lifeCycles})

2.3 主應(yīng)用插件系統(tǒng)

MicroApp 在主應(yīng)用啟動(dòng)（調(diào)用 microApp.start()）時(shí)可以在參數(shù)中配置應(yīng)用插件 plugins，并且插件分為 “全局插件 global“ 與 ”子應(yīng)用插件 modules“。

插件系統(tǒng)的主要作用就是對(duì)js進(jìn)行修改，每一個(gè)js文件都會(huì)經(jīng)過插件系統(tǒng)，我們可以對(duì)這些js進(jìn)行攔截和處理，它通常用于修復(fù)js中的錯(cuò)誤或向子應(yīng)用注入一些全局變量

一個(gè)插件接收以下配置項(xiàng)：

scopeProperties：可選配置，接收 string數(shù)組，配置 強(qiáng)隔離的子應(yīng)用獨(dú)享全局變量

escapeProperties：可選配置，接收 string數(shù)組，效果與 scopeProperties 相反，配置 子應(yīng)用共享到基座應(yīng)用和window的全局變量

options：可選配置，接收一個(gè)任意類型數(shù)據(jù)，傳遞給 loader 配置的函數(shù)使用

loader：必須配置，接收一個(gè)函數(shù)，函數(shù)參數(shù)為 code, url, options，并且必須將 code 返回

插件配置方式如下：

importmicroAppfrom'@micro-zoe/micro-app'
importpainfulJoyafrom'@micro-zoe/plugin-painful-joya'//官方封裝的子午線埋點(diǎn)插件
microApp.start({
plugins:{
//設(shè)置為全局插件，作用于所有子應(yīng)用
global:[painfulJoya],
//設(shè)置home子應(yīng)用的獨(dú)享配置
home:[{
scopeProperties:['AMap'],
loader(code,url){
console.log('我是插件loder函數(shù)',code,url)
returncode
}
}],
}
})

3. 子應(yīng)用

MicroApp 官方在子應(yīng)用的處理上提供了兩種模式：默認(rèn)模式和 UMD 模式。

默認(rèn)模式：該模式不需要修改子應(yīng)用入口，但是在切換時(shí)會(huì)按順序依次執(zhí)行 所有渲染依賴 的js文件，保證每次渲染的效果是一致的
UMD 模式：這個(gè)模式需要子應(yīng)用暴露 mount 和 unmount 方法，只需要首次渲染加載所有 js 文件，后續(xù)只執(zhí)行 mount 渲染和 unmount 卸載

官方建議頻繁切換的應(yīng)用使用 UMD 模式配置子應(yīng)用

3.1 Webpack + Vue 子應(yīng)用

1. webpack 配置

與所有的微前端框架接入子應(yīng)用一樣，首先一樣要修改 webpack 的 devServer 配置，來開啟跨域請(qǐng)求。

module.exports={
devServer:{
disableHostCheck:true,//關(guān)閉端口檢測(cè)
port:4001,
headers:{
'Access-Control-Allow-Origin':'*',
},
},
configureWebpack:{
output:{
jsonpFunction:`webpackJsonp-chile-vue2`
}
},
}

2. 設(shè)置 PublicPath

這里可以新建一個(gè) 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. 入口文件配置

上文說到了子應(yīng)用有兩種配置方式，主要就體現(xiàn)在入口文件上。

因?yàn)槁酚膳渲糜刑厥庑裕@里先不引用路由，依然是以 Vue 為例

import'./public-path'
importVuefrom'vue'
importAppfrom'./App.vue'
letapp=null
//////////1.首先是默認(rèn)模式的配置
app=newVue({
router,
render:h=>h(App),
}).$mount('#app')
//監(jiān)聽卸載，因?yàn)槊看味紩?huì)重新加載所有js，所以建議配置一個(gè)卸載方法去清空依賴項(xiàng)等
window.unmount=()=>{
app.$destroy()
app.$el.innerHTML=''
app=null
console.log('微應(yīng)用vue2卸載了--默認(rèn)模式')
}
//////////2.umd加載模式
//初始化與二次加載時(shí)調(diào)用
window.mount=()=>{
app=newVue({
router,
render:h=>h(App),
}).$mount('#app')
console.log("微應(yīng)用vue2渲染了--UMD模式")
}
//卸載操作放入unmount函數(shù)
window.unmount=()=>{
app.$destroy()
app.$el.innerHTML=''
app=null
console.log("微應(yīng)用vue2卸載了--UMD模式")
}
//如果不在微前端環(huán)境，則直接執(zhí)行mount渲染
if(!window.__MICRO_APP_ENVIRONMENT__){
window.mount()
}

4. 路由

這里是子應(yīng)用路由的簡單示例

importVuefrom'vue'
importVueRouterfrom'vue-router'
Vue.use(VueRouter);
constrouter=newVueRouter({
mode:'history',//hash模式可以不用配置base
//__MICRO_APP_BASE_ROUTE__為micro-app傳入的基礎(chǔ)路由
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')
}
];
})
exportdefaultrouter;

3.2 Webpack + React 子應(yīng)用

1. 依舊是修改 webpack 配置，開啟跨域訪問

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

這里也區(qū)分默認(rèn)模式和 umd 模式，默認(rèn)模式就是將 mount 函數(shù)提出來直接運(yùn)行即可，這里省略

importReactfrom'react';
importReactDOMfrom'react-dom';
importRouterfrom'./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. 配置子應(yīng)用路由

React 的子應(yīng)用路由配置其實(shí)與 Vue 的類似，只是需要配合 ReactRouter 和 jsx 的寫法。

importReact,{lazy,Suspense,useState,useEffect}from'react'
import{BrowserRouter,Switch,Route,Redirect,Link}from'react-router-dom'
functionRouter(){
<BrowserRouterbasename={window.__MICRO_APP_BASE_ROUTE__||'/micro-app/react16/'}>
<Menumode="horizontal">
<Menu.Itemkey='home'>
<Linkto='/'>home</Link>
</Menu.Item>
<Menu.Itemkey='page'>
<Linkto='/page'>page</Link>
</Menu.Item>
</Menu>
<Switch>
<Routepath="/"exact>
<Home/>
</Route>
<Routepath="/page">
<Page/>
</Route>
<Redirectto='/'/>
</Switch>
</BrowserRouter>
}
exportdefaultRouter

4. 應(yīng)用路由配置說明

基礎(chǔ)規(guī)則：

主應(yīng)用是 hash路由，子應(yīng)用也必須是hash路由

主應(yīng)用是 history路由，子應(yīng)用則不受影響

4.1 主應(yīng)用路由

主應(yīng)用路由僅控制主應(yīng)用的頁面渲染，與一般單頁應(yīng)用的路由匹配和渲染邏輯一致。

4.2 子應(yīng)用路由

主應(yīng)用使用子應(yīng)用時(shí)，配置的 url 與 baseroute、子應(yīng)用路由之間 沒有任何關(guān)系！

子應(yīng)用與主應(yīng)用一樣是通過 完整的地址欄路由Path（端口號(hào)后面的部分） 來進(jìn)行匹配和渲染的，url 屬性僅用于加載子應(yīng)用 html 文件。

baseroute 屬性是用來給子組件使用，以供配置基礎(chǔ)路由前綴的，子應(yīng)用可以通過 window.__MICRO_APP_BASE_ROUTE__ 訪問到該屬性；并且，子應(yīng)用使用 hash路由 模式時(shí)也 不需要配置 baseroute

根據(jù)官方的示例，可以總結(jié)以下規(guī)則：

url 與路由配置無關(guān)，僅作為子應(yīng)用 html 文件加載地址

主應(yīng)用與子應(yīng)用共享地址欄完整的 path路徑，但優(yōu)先級(jí)不同：主應(yīng)用匹配完成之后加載主應(yīng)用頁面，頁面中有子應(yīng)用才渲染子應(yīng)用并開始子應(yīng)用路由匹配

僅當(dāng)主應(yīng)用子應(yīng)用 都使用 history 路由模式，且子應(yīng)用獨(dú)立運(yùn)行時(shí) 不需要特定模塊前綴 的情況下，主應(yīng)用使用子應(yīng)用時(shí)需要配置 baseroute 聲明模塊前綴；并且子應(yīng)用路由需要配置 base 屬性。

總結(jié)

以上是生活随笔為你收集整理的JS微前端MicroApp如何使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：动态调用类 java_Java动态调用类
下一篇：域名的分类有哪些