微前端框架 之 qiankun

qiankun文档: 快速上手

微前端 : 是最近一年国内前端领域被频繁提及的关键字，虽然它并不是一个全新的领域/技术，但很显然在当今越来越多的前端应用即将步入第 3 个、第 5 个甚至更久的年头的背景下，如何给 巨石应用/遗产应用 注入新鲜的技术血液已经成为我们不得不正视的问题，而微前端正是解决这类问题的一个非常合适的解决方案。

qiankun : 是一个生产可用的微前端框架，它基于 single-spa，具备 js 沙箱、样式隔离、HTML Loader、预加载 等微前端系统所需的能力。qiankun 可以用于任意 js 框架，微应用接入像嵌入一个 iframe 系统一样简单。

应用场景:  1. 主应用与多个相互独自的微应用 一起构成了整个大的微前端应用

                  2. 可以在同一个页面中，加载多个不同的微应用，每个微应用都是主应用的组成部分 或者是 提供一些增强能力，这种场景可以说是微应用粒度的前端组件化。

即: qiankun 相当于 route-based 的控制台应用，做为一个微应用的聚合框架而被使用。

 使用步骤:

1. 主应用安装

yarn add qiankun  # or npm i qiankun -S

2. 在主应用中注册微应用

import { registerMicroApps,runAfterFirstMounted, start } from 'qiankun';

// window.qiankunStarted 为严谨,防止加载多次 (可省略) 
if (!window.qiankunStarted) {
  window.qiankunStarted = true;
  registerMicroApps(
    [
      {
        name: 'invoice', // 子应用名的标识
        entry: `${process.env.VUE_APP_INVOICE_URL}`, // 子应用的目标地址, 可在环境变量中配置
        container: '#subapp-viewport', // 把加载到的子路由界面放在某个容器中
        // loader,
        activeRule: '/invoice', // 加载以/invoice开头的路由
      },

    ],
    // 主应用的生命周期
    // {
    //   beforeLoad: [
    //     app => {
    //       console.log('[LifeCycle] before load %c%s', 'color: green;', app.name);
    //     },
    //   ],
    //   beforeMount: [
    //     app => {
    //       console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
    //     },
    //   ],
    //   afterUnmount: [
    //     app => {
    //       console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
    //     },
    //   ],
    // },
  );

  // 初始化主应用属性
  // const { onGlobalStateChange, setGlobalState } = initGlobalState({
  //   // user: 'qiankun',
  // });

  // onGlobalStateChange((value, prev) => console.log('[onGlobalStateChange - master]:', value, prev));

  // 设置自定义属性可传参到子应用中, 在子应用的mounted钩子中使用prop属性来接受
  // setGlobalState({
  //   // ignore: 'master',
  //   // user: {
  //   //   name: 'master',
  //   // },
  // });


  // setDefaultMountApp('/');


  start();

  // runAfterFirstMounted(() => {
  //   console.log('[MainApp] first app mounted');
  // });
}

 当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

3. 配置渲染微应用容器的路由

 

 

3. 在微应用中导出相应的生命周期钩子

    3.1. 在微应用的 src 目录新增 public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

    3.2. 修改微应用中的路由文件router.js ，根据微应用标识限制路由范围

   3.3. 入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。

// 在微应用中的main.js中配置

let instance = null;
function render(props = {}) {
// props对象中的container属性指的是主应用的dom
  const { container } = props;
  instance = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : document.querySelector('#app'));
}

// 独立运行微应用时 
if (!window.__POWERED_BY_QIANKUN__) {
  
  render();
}

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}

// 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
// unmount时销毁应用, 防止内存泄漏
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

4. 配置微应用的打包工具（vue.config.js）

const { name } = require('./package');
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `invoice`, // 应用标识, 和name保持一致
      libraryTarget: 'window', // 把微应用打包成window格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

使用qiankun微应用需要注意几点:

1. 在微应用src中新增 public-path.js 文件，用于修改运行时的 publicPath

2. 微应用建议使用 history 模式的路由，需要设置路由 base，值和它的 activeRule 是一样的。

3. 在入口文件最顶部引入 public-path.js，修改并导出三个生命周期函数。

4. 修改 webpack 打包。

主应用路由配置需要注意到的点:

1. 微应用入口路由需配置在主应用的后面. 否则主应用的界面显示不出来

 2. 如遇到路由显示的顺序问题, 如上图, 第一个路由菜单需显示在左侧导航栏的最后面, 可以给每个路由设置order属性, 用于在渲染导航栏菜单之前进行排序.

 

3. 如遇到样式冲突, 则各自加载各自的vue和elementUI