JS微前端MicroApp基礎(chǔ)使用
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 并不依賴其他第三方庫(kù)
框架兼容:本身對(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)目即可。
npm create vite@latest main-app -- --template vue-ts
??But: 因?yàn)?MicroApp 使用的是 CustomElement,使用的時(shí)候與普通 dom 元素一致,在主應(yīng)用配置路由時(shí)最好使用一個(gè)空白組件來放置子應(yīng)用
這樣,先創(chuàng)建一個(gè)簡(jiǎn)單的路由配置和對(duì)應(yīng)頁面
// 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 的路由配置這里需要注意一點(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 import microApp from '@micro-zoe/micro-app' const lifeCycles = { 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 返回
插件配置方式如下:
import microApp from '@micro-zoe/micro-app' import painfulJoya from '@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) return code } }], } })
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' import Vue from 'vue' import App from './App.vue' let app = null ////////// 1. 首先是默認(rèn)模式的配置 app = new Vue({ 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 = new Vue({ 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)用路由的簡(jiǎn)單示例
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傳入的基礎(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') } ]; }) export default router;
3.2 Webpack + React 子應(yīng)用
1. 依舊是修改 webpack 配置,開啟跨域訪問
2. 配置 PublicPath 和入口文件(public-path.js 配置與上面一致)
這里也區(qū)分 默認(rèn)模式 和 umd 模式,默認(rèn)模式就是將 mount 函數(shù)提出來直接運(yùn)行即可,這里省略
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. 配置子應(yīng)用路由
React 的子應(yīng)用路由配置其實(shí)與 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. 應(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 屬性。
以上就是JS微前端MicroApp基礎(chǔ)使用的詳細(xì)內(nèi)容,更多關(guān)于JS微前端MicroApp基礎(chǔ)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript原型鏈中函數(shù)和對(duì)象的理解
這篇文章主要為大家介紹了JavaScript原型鏈中函數(shù)和對(duì)象的理解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06前端使用xlsx庫(kù)導(dǎo)出帶有樣式的excel文件
這篇文章主要為大家介紹了前端使用xlsx庫(kù)導(dǎo)出帶有樣式的excel文件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08微信小程序 網(wǎng)絡(luò)請(qǐng)求(GET請(qǐng)求)詳解
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)請(qǐng)求(GET請(qǐng)求)詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11前端AI機(jī)器學(xué)習(xí)在瀏覽器中訓(xùn)練模型
這篇文章主要為大家介紹了前端AI機(jī)器學(xué)習(xí)在瀏覽器中訓(xùn)練模型的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07