手把手实践qiankun微前端的开发和部署

文章开始之前，我们先提出几个问题，大家不妨带着问题来学习：

1、什么是微前端？有哪几种常见的解决方案？

2、为什么要是使用微前端，有什么样的场景使用微前端？

3、qiankun方案怎么实现微前端？

什么是微前端？有哪几种常见的解决方案？

      说说个人的理解。随着微服务开发模式的兴起，前端开发也提出了微前端的开发模式。主要是为了将复杂的大应用进行解耦，拆分成一个主应用下挂载多个子应用，有那么一点分而治之的思想。就像古代分封诸侯，皇帝如果一个人亲身亲为治理一个国家，大事小事都由皇帝处理的话，一来会把皇帝累死，二来可能精力有限而不能很好治理，于是提出了分封制，皇帝分封诸侯国，诸侯国治理自己封地的事情，定期向皇帝上报。诸侯国与中央的通讯就像子项目与主项目之间的通讯。

目前常见的解决方案有：

1. iframe方案
2. single-spa方案
3. qiankun方案

     其中，single-spa方案是早几年提出的方案，qiankun方案是基于single-spa封装的，上手简单，比single-spa更具优势。qiankun是蚂蚁金服开源的一款框架，目前已在蚂蚁内部服务了超过 200+ 线上应用，值得尝试。至于为什么不使用iframe，可以先阅读一下《Why Not Iframe》这篇文章。如果你懒得访问，这里浓缩一下重点：

1. url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
2. UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中.
3. 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
4. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

      文中也提到如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了，其实iframe方案也不是一无是处，我们不能对它抱有偏见。iframe方案是接入成本最廉价的选择，同时也支持通过possMassage实现父子之间的通讯。它也是微前端的一种实现方式，在页面上无弹窗、无全屏等操作的时候，iframe 也是很好用的，加上配置缓存和 cdn 加速，如果是内网访问，也不会很慢。而且，对于陈年已久的Jquery多页面的老项目，qiankun似乎对多页应用没有很好的解决办法。每个页面都去修改，成本很大也很麻烦，但是使用 iframe 嵌入这些老项目就比较方便。与其折腾对接可能还会有很多配置上的问题，还不如用iframe干干净净接入，所以技术方案选择的同时，也要结合项目自身的情况。

      当然，已经2020年了，我们没有老项目了，Jquery已经不去讨论了，全部梭哈三大框架。我们都是单页面，所以，qiankun方案再适合不过了。

为什么要是使用微前端，有什么样的场景使用微前端？

如果需要开发这样的项目：

其中有多个模块，每一个模块都可以看成一个应用，每一个应用都是一个完整的项目。

如果不采用微前端，整个项目集中在一起，不但不好分离，还会导致项目越来越大，同时参与的人员也会越来越多，非常不好管理，代码也不好维护。如果有个需求：需要子应用脱离平台独立运行，如果是微前端的方式，不费吹灰之力，子应用可以直接运行。但要是整合在一起，就比较费力。

还有一种场景，开发中的平台项目，突然需要嵌入别的项目。重新开发是不可能的了，不但开发成本过高，还要维护多套代码，所以也只能采用微前端的形式了。（巨无霸的Jquery老项目建议使用iframe的形式）

所以，在以上场景的时候，使用微前端是非常合适的。

qiankun方案怎么实现微前端？

这个是我们文章的重点。我们慢慢探讨。

说在前面：

1. qiankun的使用与技术栈无关，同时子应用也是可以自由选择开发的框架，可以自己制定开发规范。
2. 本次例子主项目是以vue开发的，子项目一个是vue一个是react。
3. qiankun在开发环境下，主项目和全部子项目都会运行起来，如果子项目没有运行起来，当主项目菜单切到该子项目的时候，会打不开。所以在开发环境就会跑起多个服务。
4. 部署的时候，主项目和子项目都需要分别打包，通常在主项目创建一个文件夹，子项目都打包后，放在主项目文件夹下面。这样之后跑起一个服务，同时可以使用子项目的路径，独自运行子项目。

------------------------------------------------------------------------------------------------------------------------------------------

一、初始化项目

1、创建一个qiankun-test的文件夹，在下面依次创建主项目、vue项目和react项目

vue create main（main项目直接简单创建，不需要vuex和router）

vue create sub-vue（sub-vue带vuex和router）

npx create-react-app sub-react

 

 2、给qiankun-test创建package.json文件，方便执行全部安装运行打包等脚本

npm init --yes

 

 3、安装npm-run-all，并修改package.json：

npm i npm-run-all --save-dev

{
  "name": "qiankun-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "install": "npm-run-all --serial install:*",
    "install:main": "cd main && yarn install",
    "install:sub-vue": "cd sub-vue && yarn install",
    "install:sub-react": "cd sub-react && yarn install",
    "start": "npm-run-all --parallel start:*",
    "start:sub-react": "cd sub-react && yarn start",
    "start:sub-vue": "cd sub-vue && yarn serve",
    "start:main": "cd main && yarn serve",
    "build": "npm-run-all --serial build:*",
    "build:main": "cd main && yarn build",
    "build:sub-vue": "cd sub-vue && yarn build",
    "build:sub-react": "cd sub-react && yarn build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}

npm-run-all 提供了多种运行多个命令的方式，常用的有以下几个：

• --parallel: 并行运行多个命令，例如：npm-run-all --parallel lint build
• --serial: 多个命令按排列顺序执行，例如：npm-run-all --serial clean lint build:**
• --continue-on-error: 是否忽略错误，添加此参数 npm-run-all 会自动退出出错的命令，继续运行正常的
• --race: 添加此参数之后，只要有一个命令运行出错，那么 npm-run-all 就会结束掉全部的命

 我们在qiankun-test下面执行npm start后，会启动主项目和2个子项目

 

 二、配置主项目

1、子项目的端口号必须固定，不然端口号不同导致匹配不上。

新建2个环境配置文件

.env.development

VUE_APP_SUB_VUE=http://localhost:5501
VUE_APP_SUB_REACT=http://localhost:5502

.env.production

VUE_APP_SUB_VUE=http://localhost:5050/subapp/sub-vue/
VUE_APP_SUB_REACT=http://localhost:5050/subapp/sub-react/

 

 我们将开发环境子应用端口固定好，并将生产环境(http://localhost:5050)中的域名和子应用的访问路径写好（后面会新建个subapp文件夹存放打包后的子项目）

 2、主项目安装qiankun，子项目不需要

cd main && npm i qiankun --save

同时顺便也固定主项目的端口（可选），修改下主项目的vue.config.js

module.exports = {
  devServer: {
    port: 5500,
  },
  chainWebpack: config => {
    config.plugin('html')
      .tap((args) => {
        args[0].title = 'qiankun-test'
        return args
      })
  }
};

 

3、注册子项目

在main主项目的src下新建micro-app.js：

const microApps = [
  {
    name: 'sub-vue',
    entry: process.env.VUE_APP_SUB_VUE,
    activeRule: '/sub-vue'
  },
  {
    name: 'sub-react',
    entry: process.env.VUE_APP_SUB_REACT,
    activeRule: '/sub-react'
  }
]

const apps = microApps.map(item => {
  return {
    ...item,
    container: '#subapp-viewport', // 子应用挂载的div
    props: {
      routerBase: item.activeRule, // 下发基础路由
    }
  }
})

export default apps

• 建议name与子项目的package里的name字段保持一致，保持唯一性
• entry是子项目入口，生产环境和开发环境地址是不一样的，这里使用了我们之前创建的环境文件中的值
• activeRule是子项目在主项目中的路由地址，建议后面也是项目名，统一一下会没那么乱
• container是主项目中的挂载容器id
• routerBase是主项目下发到子项目，可以在子项目中获取的到，这个到时候在子应用的路由中需要用到，用于设置路由的base属性

4、主项目main.js加载qiankun配置并启动

import Vue from 'vue'
import App from './App.vue'
import { registerMicroApps, start, setDefaultMountApp } from 'qiankun'
import microApps from './micro-app'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

const config = {
  beforeLoad: [
      app => {
          console.log("%c before load",
          'background:#0f0 ; padding: 1px; border-radius: 3px;  color: #fff',
          app);
      }
  ], // 挂载前回调
  beforeMount: [
      app => {
          console.log("%c before mount",
          'background:#f1f ; padding: 1px; border-radius: 3px;  color: #fff',
          app);
      }
  ], // 挂载后回调
  afterUnmount: [
      app => {
          console.log("%c after unload",
          'background:#a7a ; padding: 1px; border-radius: 3px;  color: #fff',
          app);
      }
  ] // 卸载后回调
}

registerMicroApps(microApps, config)
setDefaultMountApp(microApps[0].activeRoule) // 默认打开第一个子项目
start()

 

5、主项目公共菜单切换部分和容器部分

修改App.vue

<template>
  <div id="app">
    <div class="layout-header">
      <div class="logo">QIANKUN-WUZHIQUAN</div>
      <ul class="sub-apps">
        <li v-for="item in microApps" :class="{active: item.activeRule === current}" :key="item.name" @click="goto(item)">{{ item.name }}</li>
      </ul>
    </div>
    <div id="subapp-viewport"></div>
  </div>
</template>

<script>
import microApps from './micro-app'

export default {
  name: 'App',
  data () {
    return {
      microApps,
      current: '/sub-vue'
    }
  },
  methods: {
    goto (item) {
      console.log(item)
      this.current = item.activeRule
      history.pushState(null, item.activeRule, item.activeRule) // 没引入路由，所以不能用路由切换
    },
  },
  created() {
    const path = window.location.pathname
    if (this.microApps.findIndex(item => item.activeRule === path) >= 0) {
      this.current = path
    }
  },
}
</script>

<style>
html, body{
  margin: 0 !important;
  padding: 0;
}
.layout-header{
  height: 50px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  line-height: 50px;
  position: relative;
}
.logo {
  float: left;
  margin: 0 50px;
}
.sub-apps {
  list-style: none;
  margin: 0;
  overflow: hidden;
}
.sub-apps li{
  list-style: none;
  padding: 0 20px;
  cursor: pointer;
  float: left;
}
.sub-apps li.active {
  color: #42b983;
  text-decoration: underline;
}
</style>

 

6、启动主项目看看效果

cd mian && npm run serve

 

 

 三、修改sub-vue子项目

子应用主要修改3个文件，一个是vue.config.js，一个是main.js，还有router下的index.js

1、vue.config.js

const port = 5501;
const { name } = require('../package.json')
module.exports = {
  publicPath: "./",
  devServer: {
    port,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  configureWebpack: {
    output: {
      // 把子应用打包成 umd 库格式
      library: `${name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`
    }
  }
};

• qiankun 是通过 fetch 去获取子应用注册时配置的静态资源url，所有静态资源必须是支持跨域的，那就得设置允许源了
• 涉及到子应用名称的，都统一使用package中的name字段，官方也是推荐使用的这个name
• 需要打包成umd格式，是为了让 qiankun 拿到子应用export 的生命周期函数

2、src/router/index.js改为只暴露routes，new Router改到main.js中声明

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

export default routes;

 

3、main.js

import Vue from "vue";
import App from "./App.vue";
import routes from "./router";
import store from "./store";
import VueRouter from "vue-router";

Vue.config.productionTip = false;

let install = null;
function render(props = {}) {
  const { container, routerBase } = props;
  const router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL,
    mode: "history",
    routes
  });
  install = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector("#app") : "#app");
}
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
} else {
  render();
}

export async function bootstrap() {}

export async function mount(props) {
  render(props);
}
export async function unmount() {
  install.$destroy();
  install.$el.innerHTML = ""; // 子项目内存泄露问题
  install = null;
}

• 需要暴露qiankun的生命周期函数
• 注意销毁，防止内存泄漏
• 独立运行：window.__POWERED_BY_QIANKUN__为false，执行render创建vue对象；运行在qiankun: window.__POWERED_BY_QIANKUN__为true，会执行mount周期函数，在这里创建vue对象
• history模式下需要设置路由的base，值是子项目中的activeRule对应的值，在qiankun环境下使用。

 4、下面拓展官网对声明周期的解释

 

 5、对此sub-vue对接完成，运行看看效果：

 

 同时，已经可以在主项目中看得到挂载的sub-vue子项目

 

四、修改sub-recat

 1、新增.env文件添加PORT变量，端口号与父应用配置的保持一致

.env.development

SKIP_PREFLIGHT_CHECK=true
PORT=5502
PUBLIC_URL=/

.env.production

PUBLIC_URL=/subapp/sub-react

2、为了不eject所有webpack配置，我们用react-app-rewired方案复写webpack就可以了。

npm install react-app-rewired --save-dev

3、使用react-app-rewired运行，修改package.json中的script

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

4、在sub-react下创建config-overrides.js文件

config-overrides.js

const { name } = require('./package.json');

module.exports = {
  webpack: function override(config, env) {
    config.entry = config.entry.filter(
      (e) => !e.includes('webpackHotDevClient')
    );

    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.jsonpFunction = `webpackJsonp_${name}`;
    return config;
  },
  devServer: (configFunction) => {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.open = false;
      config.hot = false;
      config.headers = {
        'Access-Control-Allow-Origin': '*',
      };
      // Return your customised Webpack Development Server config.
      return config;
    };
  },
};

注意：5-7行为了解决react子应用启动后，主应用第一次渲染后会挂掉的问题，原因是热更新引起的，所以需要在复写react的webpack时禁用掉热重载（加了下面配置禁用后会导致没法热重载，react应用在开发时得手动刷新了），见https://github.com/umijs/qiankun/issues/340

5、在src下面新建public-path.js

public-path.js

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

6、修改src下面的index.js

index.js

import './public-path'
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

function render() {
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}
/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  render();
}
/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
  ReactDOM.unmountComponentAtNode(document.getElementById('root'));
}
/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

7、一切就绪，我们运行一下看看：

但你满满信心以为能跑起来，结果却给你当头一棒，duang报错了！！！

 提示：config.entry.filter is not a function

找了半天，感觉应该是版本的问题，将sub-react项目package.json中react相关依赖的版本写成下面的之后，重新安装就可以跑起来了（建议删掉node_modules包后重新yarn install）：

"dependencies": {

    "@testing-library/jest-dom": "^4.2.4",

    "@testing-library/react": "^9.3.2",

    "@testing-library/user-event": "^7.1.2",

    "react": "^16.13.1",

    "react-dom": "^16.13.1",

    "react-scripts": "3.4.3",

    "web-vitals": "^1.0.1"

  }

 

注意：修改了版本后App.js 要引入import React from 'react';

 

 在主项目中查看：

 

一切都对接完毕，以上是使用的history路由模式。下面介绍一下hash模式的改造

一、sub-vue项目调整

1、修改sub-vue项目路由方式，改为哈希路由，同时增加路由判断，当应用运行在qiankun里时，为所有路由和在路由跳转前为跳转路由path加上micrApp前缀

router/index.js

2、sub-vue子项目的main.js增加路由判断

main.js

 

对于主项目和子项目都是hash模式的话，主项目和子项目会共同接管路由，所以需要在子项目的所有路由前加上这个前缀。举个例子：

• /#/vue/home: 会加载 vue 子项目的 home 页面，但是其实，单独访问这个子项目的 home 页面的完整路由就是/#/vue/home

• /#/react/about: 会加载 react 子项目的 about 页面，同样，单独访问这个子项目的 about 页面的完整路由就是/#/react/about

• /#/about: 会加载主项目的about页面

二、main主项目调整

1、修改主项目注册子项目时的路由匹配规则和增加主应用路由

micro-app.js

 

 2、修改下App.vue页面的地址匹配规则，history匹配的是pathname，hash匹配hash

三、回到qiankun-test下面执行npm start全部运行看看效果

 

项目部署

 我们在main项目的.env.production配置了线上地址是http://localhost:5050，子项目存放在subapp文件夹下面，我们分别对main、sub-vue和sub-react进行打包，回到qiankun-test执行npm run build即可

 

 

 启动一个http://localhost:5050服务，将代码跑起来就好了：

 

也可以单独运行子应用：

http://localhost:5050/subapp/sub-react/

http://localhost:5050/subapp/sub-vue/#/

 qiankun项目优化

一、解决IE11兼容性问题

安装以下

import 'whatwg-fetch';
import 'custom-event-polyfill';
import 'core-js/stable/promise';
import 'core-js/stable/symbol';
import 'core-js/stable/string/starts-with';
import 'core-js/web/url';

 二、引入nprogress，子项目加载的时候，有进度条

 主项目的main.js

 

 主项目的App.vue

 时间有限，没能接着讲下父子应用间的通讯，完整代码在我的github

地址：https://github.com/wuzhiquan/qiankun

simple-hash分支是hash模式

simple-history分支是history模式

complete是完整的代码，包括了父子间的状态通讯

感谢大家的star！