brt-micro-spa (微前端)

版本1.0.0 该只适用于 Vue

NPM 安装

# npm install brt-micro-spa -g

使用

• Main 主应用集成

1import {createApp} from 'vue'
2import App from './App.vue'
3
4// app
5const $app = createApp(App);
6// mount
7$app.mount('#main-app');
8
9
10// 微前端
11import {registerMicroApps, start} from 'brt-micro-spa';
12// 注册子应用
13registerMicroApps([
14    {
15        name: 'Child1',
16        path: '/child1',
17        entry: `//127.0.0.1:9001`,
18        container: '#micro-app',
19        props: {}
20    },
21    {
22        name: 'Child2',
23        path: '/child2',
24        entry: `//127.0.0.1:9002`,
25        container: '#micro-app',
26        props: {}
27    }
28], {
29    beforeLoad: () => {
30        console.log('加载前')
31    },
32    afterLoad: () => {
33        console.log('加载后')
34    }
35});
36
37// 启动微前端服务
38start({});
39

• Child 子应用 -> main.js

1import {createApp} from 'vue'
2import App from './App.vue'
3import router from './router'
4// app
5const $app = createApp(App);
6// router
7$app.use(router);
8
9
10// 微前端服务
11
12// 挂载后再次激活时
13export async function activated({props = {}}) {
14    console.log('activated', props);
15}
16// 失效时
17export async function deactivated() {
18    console.log('deactivated');
19}
20// 挂载后
21export async function mounted({props = {}, assetPublicPath}) {
22    // 更改子应用的静态资源地址
23    if (assetPublicPath) __webpack_public_path__ = assetPublicPath;
24    // mount
25    $app.mount('#child1-app');
26}
27// 卸载
28export async function unmount() {}
29
30
31/**
32 * 独立运行
33 * */
34window.__BRTAPP_MICRO_SERVICE__ || mounted({});
35

• Child 子应用 -> router.js

1import {createRouter, createWebHashHistory} from 'vue-router'
2import { rewriteMicroAppRouter } from 'brt-micro-spa';
3
4let routes = [
5    {
6        name: 'Child1',
7        path: '/',
8        component: () => import('./views/Index.vue')
9    }
10];
11
12// 扩展vue路由的 路径及事件
13const router = rewriteMicroAppRouter('/child1', routes, () => {
14    return createRouter({
15        history: createWebHashHistory(),
16        routes
17    });
18});
19
20
21export default router
22

• Child 子应用 -> webpack -> vue.config.js

1const path = require('path');
2function resolve(dir) {
3    return path.join(__dirname, dir);
4}
5
6module.exports = {
7    publicPath: '',
8    assetsDir: 'static',
9    productionSourceMap: false,
10    lintOnSave: false,  // 取消 eslint 校验
11
12    devServer: {
13        open: false,
14        port: 9001,
15        headers: {
16            'Access-Control-Allow-Origin': '*',
17        }
18    },
19
20    // 自定义webpack配置
21    configureWebpack: {
22        resolve: {
23            alias: {
24                '@': resolve('src'),
25            }
26        },
27        output: {
28            // 把子应用打包成 umd 库格式
29            library: `child_app_${Date.now()}`,
30            libraryTarget: 'umd',
31            jsonpFunction: `webpackJsonp_child_app_${Date.now()}`,
32        },
33    }
34};

激活单个独立子应用

1import {activeSingleMicroApp} from 'brt-micro-spa';
2
3// 静态激活单个子应用 (与注册的子应用相互独立)
4activeSingleMicroApp({
5    name: 'Single',
6    entry: `//127.0.0.1:9003`,
7    container: '#single-app',
8    props: {}
9});
10

监听微前端服务路由变化

1import {onRouterChange} from 'brt-micro-spa';
2
3// 监听路由变化
4onRouterChange(routePath => {
5    console.log('router change', routePath); //  /child1 ...
6});
7

​

API

• registerMicroApps

  注册由 路由控制的子应用集合

  示例

  1registerMicroApps(apps:Array, methods:Object);

  Apps

  属性	类型	必填	说明
  name	String	是	子应用名称
  path	String *(唯一值)	是	子应用路径
  entry	String	是	子应用项目地址
  container	String|Element	是	子应用承载容器
  props	String	否	传递给子应用的扩展参数
  base	String	否	根路由路径
  keepAlive	Boolean	否	缓存当前子应用

  Eethods

  属性	类型	说明
  beforeLoad	Function	子应用加载前
  afterLoad	Function	子应用加载后

• start

  启动路由的微前端服务

  示例

  1start(options:Object);

  options

  属性	类型	默认	必填	说明
  base	String	/	否	根路由路径
  keepAlive	Boolean	true	否	缓存已加载的子应用

• activeSingleMicroApp

  激活单个独立子应用

  示例

  1activeSingleMicroApp(app:Object, methods:Object);

  App

  属性	类型	必填	说明
  name	String	是	子应用名称
  path	String *(唯一值)	是	子应用路径
  entry	String	是	子应用项目地址
  container	String|Element	是	子应用承载容器
  props	String	否	传递给子应用的扩展参数
  base	String	否	根路由路径
  keepAlive	Boolean	否	缓存当前子应用

  Eethods

  属性	类型	说明
  beforeLoad	Function	子应用加载前
  afterLoad	Function	子应用加载后

• onRouterChange

  监听路由路径变化

  示例

  1onRouterChange(routePath => {}, isTrigger:Boolean);

  Params

  属性	类型	必填	说明
  routerPath	Function	是	回调方法
  isTrigger	Boolean	否	在某些情况下，可能需要默认执行一下回调方法

• rewriteMicroAppVueRouter

  重写子应用的路由器，内置路由器 push方法，监听 beforeEach 路由前置拦截

  示例

  1rewriteMicroAppVueRouter(appPath:String, routes:Array, callback:Function, methods:Object);

  Params

  属性	类型	默认	必填	说明
  appPath	String *(需与主应用注册的path保持一致)	""	是	子应用路径唯一值
  routes	Array	[]	是	vue注册的路由组件
  callback	Function *(需返回vue 路由器对象)		是	重写回调
  methods	Object	{}	否	自定义扩展方法

  Methods

  属性	类型	说明
  beforeEach	Function	子应用加载前