到底什么是微前端,框架qiankun如何使用(基于vue,附代码)

微前端

什么是微前端?

在讲解微前端之前先给大家看个示例(https://www.ucloud.cn/):

UCloud是一个云计算服务平台,是比较典型的中后台应用,像这种应用往往面临着当业务发展之后,由刚刚开始的单体应用进化成巨石应用的问题,比如UCloud有很多的产品,如下图
到底什么是微前端,框架qiankun如何使用(基于vue,附代码)_第1张图片如果按照我们通常的开发单页面后台应用的规则去开发的话,往往会面临几个问题:

  • 毫无相关的业务会使应用越来越大,工程越大,从而导致越来越难以维护的问题。
  • 团队人员多,产品功能复杂,代码冲突频繁、影响面大。
  • 在不少的业务中,或多或少会存在一些历史稳定的项目,但是这些项目可能使用比较老框架,介于日常运营,这些系统需要结合到新框架中来使用还不能抛弃,对此我们也没有理由浪费时间和精力重写旧的逻辑。

为解决以上问题,我们引入微前端的概念:
那么到底什么是微前端,借助qiankun官网的说法,微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。简单来说将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块,而在用户看来仍然是内聚的单个产品

微前端的价值

我们先看一个基本的微前端框架构成,微前端由主应用和子应用构成,主应用就是最外面的框架,子应用可以是任何语言来写,可以单独运行,也可以放到主框架中进行运行
到底什么是微前端,框架qiankun如何使用(基于vue,附代码)_第2张图片

根据上图可知,微前端架构具备以下几个核心价值:

  • 技术栈无关

    主框架不限制接入应用的技术栈,可以随意选择vue,react,angular等框架接入其中

  • 独立开发、独立部署

    微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新

  • 增量升级

    在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略

  • 独立运行时

    每个微应用之间状态隔离,运行时状态不共享,将巨石应用拆解成若干可以自治的松耦合微应用

引入微前端框架qiankun

官网地址:https://qiankun.umijs.org/zh/guide

简介:qiankun 是蚂蚁金服基于single-spa 的微前端解决方案

qiankun使用(基于vue)

主框架的挂载乾坤

我们借用vue的hash模式进行开发

//main.js文件

import Vue from "vue";
import App from "@/App.vue";
import store from "@/store";
import router from "@/router";
import setupQk from "@/setup/qiankun/index"

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount("#app");

setupQk() //安装乾坤

除了上面基本的路由,vuex配置,我们主要看下setupQk,主要安装逻辑在这里

// @/setup/qiankun/index.js文件
import microAppConfig from "./config.js"; //此文件代码在下方
import {start,registerMicroApps,initGlobalState} from "qiankun";


//乾坤配置  https://qiankun.umijs.org/zh/api
const qkConfig = {
  sandbox: { strictStyleIsolation: true } //开启shadow dom沙箱隔离
}
let actions =null;

/**
 * @description:  添加监测状态
 */
function addState(state) {
   if(!actions){
      /**
     * @description:  乾坤初始化全局监听状态
     * @param state要初始化的值
     */
    actions = initGlobalState(state);
    actions.onGlobalStateChange(
      (value, prev) => {;
        console.log(`[主应用接收到值变化 - ${actions}]:`, value, prev);
      }
    );
   }else{
     /**
     * @description:  乾坤设置state值
     * @param state要更新的值
     */
    actions.setGlobalState(state);
   }
}

/**
 * @description:  注册子应用
 */
function registerApp(){

  /**
   * @description:  乾坤注册子应用
   * @param1 子应用配置
   * @param2 打开子应用时候触发的生命周期
   */
  registerMicroApps(microAppConfig, {
    beforeLoad: [
      app => {
        console.log("[主应用] before load %c%s", "color: green;", app.name);
      }
    ],
    beforeMount: [
      app => {
        console.log("[主应用] before mount %c%s", "color: green;", app.name);
      }
    ],
    afterMount: [
      app => {
        console.log("[主应用] afterMount mount %c%s","color: green;",app.name);
      }
    ],
    afterUnmount: [
      app => {
        console.log("[主应用] after unmount %c%s", "color: green;", app.name);
      }
    ]
  });
}

/**
 * @description:  挂载乾坤框架
 */
function setupQk() {
  let state = {a:123}
  registerApp()
  addState(state)
   /**
   * @description:  乾坤开启服务
   * @param1 全局配置
   */
  start(qkConfig);
}

export default setupQk;



所有配置子应用的配置都在配置文件config.js中

import store from "@/store";
const loader = function(_status) {
    store.dispatch("setApplicationState", _status);
  };
const getActiveRule = hash => location => location.hash.startsWith(hash);
export default [
  {
    name: "quality", //子应用名称
    entry: " http://localhost:8084", //子应用地址,假设此项目名称为智能质检应用(下面演示生命周期的时候会用到)
    container: "#subapp-viewport", //子应用要挂载的节点,和vue.$mount("#app")类似;
    loader,//切换时候的加载动画,根据自己需求加入
    activeRule: getActiveRule("#/quality") //重点:路由命中规则,当浏览器链接有#/quality时候,例如http://localhost:9000/#/quality/* ,就可以自动的把http://localhost:808挂载到本地的subapp-viewport节点下
  },
  {
    name: "training",
    entry: "http://localhost:8081",//子应用地址,假设此项目名称为智能陪练应用
    container: "#subapp-viewport",
    loader,
    activeRule: getActiveRule("#/training")
  }
];

配置好了乾坤主应用一定要配置路由规则

//路由配置文件

import Main from '@/view/main/main.vue' //代码在下方
const appRouter = [
  {
    path: "/training/*", //重点:路由匹配规则一定要加/*,因为要匹配子应用路由
    name: "training",
    meta: {
      title: "智能陪练",
      icon: "el-icon-goods",
    },
    component: Main
  },
  {
    path: "/quality/*",
    name: "quality",
    meta: {
      title: "智能质检",
      icon: "el-icon-goods",
    },
    component: Main
  }
];
export default appRouter;

//main.vue




   

写到这里主应用基本上已经ok了,然后我们再来写一下子应用的挂载

子应用的挂载乾坤

//main.js

import Vue from "vue";
import App from "@/App.vue";
import store from "@/store";
import router from "@/router";
import setupQk from "@/setup/qiankun/index.js";


function createApp() {
  return new Vue({
    router,
    store,
    render: h => h(App)
  });
}

if (!window.__POWERED_BY_QIANKUN__) {
  /**
   * @description:  保证非嵌套在乾坤子应用可以独立运行
   */
  createApp().$mount("#app");
} else {
  setupQk(createApp);
}

/**
 * @description:  重点:抛出子应用生命周期
 */
export { bootstrap, mount, unmount } from "@/setup/qiankun/index.js";


// @/setup/qiankun/index.js

let app = null;
let createApp = null;
let appEmitIns = null;

/**
 * @description:  监测数据变化
 */
function Monitor(props) {
  appEmitIns = props;
  appEmitIns.onGlobalStateChange((value, prev) => {
    console.log(`[陪练应用接收到值变化 - ${props.name}]:`, value, prev);
  }, true);
}

/**
 * @description:  修改应用的值,注意:子应用中只能修改已存在的一级属性
 */
export function appEmit() {
  if (appEmitIns) {
    appEmitIns.setGlobalState({
      a: 444444
    });
  }
}
/**
 * @description:  子应用初始化
 */
export async function bootstrap() {
  console.log("[陪练应用] bootstrap");
}

/**
 * @description:  子应用挂载
 */
export async function mount(props) {
  console.log("[陪练应用] mount", props);
  if (!app) {
    const { container } = props;
    app = createApp();
    app.$mount(container.querySelector("#app"));
  }
  Monitor(props);
}

/**
 * @description:  子应用卸载
 */
export async function unmount() {
  console.log("[陪练应用] unmount");
  app.$destroy();
  app.$el.innerHTML = "";
  app = null;
  appEmitIns = null;
}

/**
 * @description:  挂载乾坤子应用
 */
function setupQk(_createApp) {
  // qiankun 将会在微应用 bootstrap 之前注入一个运行时的 publicPath 变量,你需要做的是在微应用的 entry js 的顶部添加
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  createApp = _createApp;
}
export default setupQk;


//vue.config.js

module.exports ={
    ...
     configureWebpack: config => {
        // 把子应用打包成 umd 库格式
        config.output.library = `${name}-[name]`;
        config.output.libraryTarget = "umd";
        config.output.jsonpFunction = `webpackJsonp_${name}`;
        ...
      }
    ...
}

生命周期测试

当我第一次打开陪练项目时候,生命周期如下图

到底什么是微前端,框架qiankun如何使用(基于vue,附代码)_第3张图片

当我切换子应用为智能质检项目的时候,会触发下图的生命周期

应用之间传指测试

我们已经在主应用中设置了默认值,再次回顾下主应用代码

// /setup/qiankun/index.js

function setupQk() {
  let state = {a:123}
  registerApp();
  addState(state); //初始化为{a:123}
  start(qkConfig);
}

先看下子应用监测数据变化函数,onGlobalStateChange接受两个参数,第一个在当前应用监听全局状态,有变更触发 callback,第二个参数 true 代表立即触发 callback

/**
 * @description:  监测数据变化
 */
function Monitor(props) {
  appEmitIns = props;
  appEmitIns.onGlobalStateChange((value, prev) => {
    console.log(`[质检应用接收到值变化 - ${props.name}]:`, value, prev);
  }, true);
}

/**
 * @description:  修改应用的值,注意:子应用中只能修改已存在的一级属性
 */
export function appEmit() {
  if (appEmitIns) {
    appEmitIns.setGlobalState({
      a: 444444,
      b:333
    });
  }
}

到底什么是微前端,框架qiankun如何使用(基于vue,附代码)_第4张图片

当我点击页面上的测试时候会触发appEmit函数,看下效果

到底什么是微前端,框架qiankun如何使用(基于vue,附代码)_第5张图片

由效果可见,会先触发主应用的监听,再触发子应用的监听,但是b赋值给333是不起作用的,因为子应用中只能修改已存在的一级属性

你可能感兴趣的:(微前端,sass,前端,javascript,vue)