让前端走进微时代，微微一弄很哇塞！

●●●

让前端走进微时代，

微微一弄很哇塞！

微前端这个词这两年很频繁的出现在大家的视野中，主要是把微服务的概念引入到了前端，让前端的多个模块或者应用解耦，做到让前端的子模块独立仓储，独立运行，独立部署。

下面是微前端的概念图。

为什么需要微前端？

1. 项目前端是单体应用即负责貌美如花还要赚钱养家，而后端使用微服务只需要负责分家家然后给前端送朵花花。前端单体承担了所有的接口。

2.系统模块增多，前端单体应用变得肥胖，开发效率低下，构建速度变慢。前端心想：哼，老娘就使劲的吃，浏览器也别想看见我，卡死你。

3.公司人员扩大，需要多个前端团队独立开发，独立部署，如果都在一个仓储中开发会带来一系列问题，例如：老子辛苦一天写的代码，第二天让别人弄没了。

4.解决遗留系统问题，新模块需要使用最新的框架和技术，旧系统还继续使用。

5.单体前端带来的测试问题。前端小姐姐分模块测试，这时正遇到构建发布，多人运动戛然而止。

6.编不下去了。。。。。。

微前端技术选型之路

目前关注度和成熟度最高的应该就是 single-spa，但是国内也有很多团队都有自己的微前端框架，像蚂蚁金服的qiankun,phodal 的 mooa,阿里飞冰的icestark，这些都是比较出名的微前端解决方案。但是这些框架都有一定的局限性，像mooa是针对Angular 打造的主从结构的微前端框架，icestark是最近才出的方案，而qiankun官网的开发文档就仅仅的几十行。本文将对qiankun进行几个方面讲解。

聊一聊qiankun

没错，qiankun正是光天化日，朗朗乾坤的乾坤。qiankun是一个开放式微前端架构，支持当前三大主流前端框架甚至jq等其他项目无缝接入。

qiankun是基于路由配置，适用于 route-based 场景，通过将微应用关联到一些 url 规则的方式，实现当浏览器 url 发生变化时，自动加载相应的微应用的功能。

qiankun在Vue项目中的使用

1、微前端构建

构建主应用

1、使用vue脚手架初始化项目或者原有Vue项目

2、npm install qiankun --save下载qiankun微前端方案依赖

3、改造主项目,很简单，在src创建一个qiankun文件夹,创建init.js文件，文件内容：

import {  registerMicroApps, // 注册子应用方法  setDefaultMountApp, // 设默认启用的子应用  runAfterFirstMounted, // 有个子应用加载完毕回调  start, // 启动qiankun  addGlobalUncaughtErrorHandler, // 添加全局未捕获异常处理器} from "qiankun";function genActiveRule(routerPrefix) {//路由监听return location => location.pathname.startsWith(routerPrefix);}export default function startQiankun() {const apps = [//子应用配置    {name: 'admin',entry: "//localhost:9528",container:'#admin',//将子应用节点挂载到父应用定义id=admin的div上      activeRule: genActiveRule('/admin'),//路由前缀      props: {mag:”我是主应用”} //父应用给子应用传参    }  ]//注册子应用  registerMicroApps(apps, {beforeLoad: [//子应用加载生命周期，下同      app => {console.log("before load", app);      }    ],beforeMount: [app => {console.log("before mount", app);      }    ],afterUnmount: [app => {console.log("after unload", app);      }    ]  })// 设置默认子应用//   setDefaultMountApp('/admin');// 第一个子应用加载完毕回调  runAfterFirstMounted((app) => {console.log(app)  });// 启动微服务  start({prefetch: 'all'//预加载子应用静态资源  });// 设置全局未捕获一场处理器  addGlobalUncaughtErrorHandler(event => console.log(event));}

4、在App.vue中加入<div id="admin"></div>即可

<template><div class="app-wrapper" :class="classObj"><div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div><sidebar  v-if="!isFullModel" class="sidebar-container"></sidebar><div class="main-container" :style="isFullModel?'margin-left:0px;':''"><navbar></navbar><tags-view v-if="!isFullModel"></tags-view><div id="admin" :style="`height:calc(100vh - ${isFullModel ? 54: 84}px);`"></div>//子应用盒子</div></div></template>

5、最后将init.js在main.js引入

import startQiankun from './qiankun/init/index'let app = nullasync function render({ appContent, loading } = {}) {  if (!app) {    await ReadConfig(Vue)//加载配置文件    app = new Vue({      router,      store,      i18n,      render: h => h(App),    }).$mount('#app')  } else {    // app.content = appContent;    // app.loading = loading;    console.log(loading, appContent)  }}render()startQiankun()

构建子应用

1、使用vue脚手架初始化项目

2、在main.js中加入：

let router = null;let instance = null;if (window.__POWERED_BY_QIANKUN__) {   //处理资源   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;   }//下面的 /admin  与主应用  registerMicroApps 中的  activeRule 字段对应function render(props = {}) {  const {container} = props  router = new VueRouter({    base: window.__POWERED_BY_QIANKUN__ ? '/admin' : '/',    mode: 'history',    routes,  });  const create = async () => {    // await ReadConfig(Vue)    instance = new Vue({      router,      render: h => h(App),    }).$mount(container ? container.querySelector('#app') : '#app');  }  create()}if (!window.__POWERED_BY_QIANKUN__) {//判断是否在qiankun环境下  render();}// 导出子应用生命周期 挂载前export async function bootstrap(props) {  console.log('[vue] vue app bootstraped');}export async function mount(props) {// 导出子应用生命周期 挂载前 挂载后  render(props);}// 导出子应用生命周期 挂载前 卸载后export async function unmount() {  instance.$destroy();  instance = null;  router = null;}

3、创建vue.config.js文件,需要做一些打包配置。

const path = require('path');const packageName = require('./package').name;function resolve(dir) {  return path.join(__dirname, dir);}const dev = process.env.NODE_ENV === 'development'const port = 9528; // dev portmodule.exports = {  publicPath: dev ? `//localhost:${port}` : '/',  outputDir: 'dist',  assetsDir: 'static',  filenameHashing: true,  devServer: {    hot: true,    historyApiFallback: true,    port,    overlay: {      warnings: false,      errors: true,    },    headers: {      'Access-Control-Allow-Origin': '*',    },  },  // 自定义webpack配置  configureWebpack: {    resolve: {      alias: {        '@': resolve('src'),      },    },    output: {// 把子应用打包成 umd 库格式      library: `${packageName}-[name]`,      libraryTarget: 'umd',      jsonpFunction: `webpackJsonp_${packageName}`,      globalObject: 'this',    },  },};

2、微前端解决的问题

自此，一个父子前端微应用搭建成功，当然这只是简单的vue实现，真正复杂的是一个项目中每个模块使用不同的前端框架。效果如下：

我们可以看到A模块、B模块和C模块三个微应用分别运行在Vue、React和Angular的环境中，而主应用主要提供了NavBar和SideBar的界面。中心是微应用中组件显示的界面。

我们从图中可以看出将前端微服务化后解决了什么问题：

1、当A模块需要维护时，只需要动A模块的代码，维护完成之后对A项目进行构建发布，由于体积很小，构建发布就很快。

2、当A项目构建发布时，其他应用运行正常，避免了之前单体应用构建发布导致整个前端项目无法访问。

3、主应用可以捕捉到子应用的运行状态，如果子应用出现异常或者挂掉，可以对用户进行友好提示。例如当A模块挂掉后，用户点击其功能一将提示“功能正在维护中”。

4、由于子应用运行的环境不同，项目可以加入各种各样的技术栈，解决了前端人员因为技术栈不同无法聚合的问题。

5、每个子项目拥有独自的仓储，代码易维护，并且可以用到别的项目中，这样一来，每个微前端又可以作为一个微应用提供服务。

3、微前端开发中需要解决的问题

父子应用通信

父向子通信（Shared 通信方案）

Shared 通信方案的原理就是，主应用基于 Vuex维护一个状态池，通过 shared 实例暴露一些方法给子应用使用。同时，子应用需要单独维护一份 shared 实例，在独立运行时使用自身的 shared 实例，在嵌入主应用时使用主应用的 shared 实例，这样就可以保证在使用和表现上的一致性。

1、在主应用中创建shared.js,可以将需要给子应用传的数据通过getter和setter的方式设置。

import store from "../../store";class Shared {//获取 Token  getToken() {const state = store.state;return state.user.token || "";  }  setToken(token) {// 将 token 的值记录在 store 中    store.commit('SET_TOKEN',token);  }}const shared = new Shared();export default shared;

2、在init.js注册的子应用中，将shared传递过去

const apps = [  {    name: 'admin',    entry: "//localhost:9528",    container:'#admin',    activeRule: genActiveRule('/admin'),    props: {      shared,//将数据以类的方式传递    }  }]

3、当主应用登录成功之后可以通过调用shared.setToken(token)设置token,然后主应用通过自身路由跳转到主页this.$router.push({ path: '/' })。

4、现在，我们来处理子应用需要做的工作。我们希望子应用有独立运行的能力，所以子应用也应该实现 shared，以便在独立运行时可以拥有兼容处理能力。代码实现如下：

class Shared { //获取 Token getToken() {    // 子应用独立运行时，在 localStorage 中获取 token    return sessionStorage.getItem("token") || "";  } setToken(token) {    // 子应用独立运行时，在 localStorage 中设置 token    sessionStorage.setItem("token", token);  } } class SharedModule {//通过SharedModule 来维护shared  static shared = new Shared();  static overloadShared(shared) {    SharedModule.shared = shared;  }  static getShared() {    return SharedModule.shared;  }} export default SharedModule;

5、接下来我们只需要在子应用的入口文件接受父应用传来的shared,然后设置到SharedModule 中。

export async function bootstrap(props) {  const {shared = SharedModule.getShared() } = props;  SharedModule.overloadShared(shared);}

6、然后子应用就可以在组件中通过SharedModule获取shared然后得到token,最后发起网络请求。

mounted () {const shared = SharedModule.getShared();const token = shared.getToken();let resp =await this.dispatch(AppController.findById, {id: this.currentApp.appId})//封装之后的网络请求...}

子向父通信（emit通信）

emit通信的原理是子应用通过触发父应用传递的函数来改变父应用vuex中维护的状态，进而达到子应用想父应用的通信。这里以子应用向父应用发送token失效，让父应用跳转至登录页的场景。

1、父应用定制提供子应用触发token注销的函数

import store from "../../store";import { removeToken } from '@/utils/auth'function logout(childThis) {  removeToken()  childThis    .$confirm('登录信息已过期!', '提示', {      confirmButtonText: '重新登录',      type: 'warning',      center: true,      showClose: false,      showCancelButton: false,      closeOnClickModal: false,    })    .then(() => {      store.dispatch('FedLogOut')    })}export {  logout}

2、将父应用定制的函数传递至子应用

const apps = [  {    name: 'admin',    entry: "//localhost:9528",    container:'#admin',    activeRule: genActiveRule('/admin'),    props: {      shared,      emitFnc: childEmit,//将上述的函数传递子应用    }  }]

3、子应用获取并注册到子应用的全局变量中

export async function bootstrap(props) {  const {emitFnc , shared = SharedModule.getShared() } = props;  SharedModule.overloadShared(shared);  Object.keys(emitFnc || {}).forEach(i => {    Vue.prototype[`$${i}`] = emitFnc[i]  });}

4、子应用通过在组件中调用this.$logout(this)即可完成通信。

公共资源共享

项目中存在大量的公共资源，例如公共方法，公共组件，公共UI。在开发的时候不可能每个项目都复制一遍，这样既降低了开发效率，同时项目的体积增大，构建速度变慢。所以对于微前端项目，我们需要定制一套合适的方案将公共资源抽离出来，子应用可以在运行期动态获取到资源并加以使用，就像maven的顶级pom,将公共的jar抽离了出来。

1、这里以公共组件为例，将定义好的公共组件放置主应用的文件夹中并导出，创建一个js文件专门作为公共组件。

import InputEditor from './input-editor/src' //自定义公共组件import ClipButton from './clip-button/src' //自定义公共组件const components = [InputEditor,ClipButton];const install = function (Vue) {  components.forEach(component => {    Vue.component(component.name, component);  });};if (typeof window !== "undefined" && window.Vue) {  install(window.Vue);}export default {  install,};

2、同样的，将此文件作为参数传递至子应用。

const apps = [  {    name: 'admin',    entry: "//localhost:9528",    container:'#admin',    activeRule: genActiveRule('/admin'),    props: {      shared,      emitFnc: childEmit,      components: Components//公共组件    }  }]

3、子应用接收到参数后，将组件注册到自身的项目中

export async function bootstrap(props) {  const {emitFnc ,components, shared = SharedModule.getShared() } = props;  SharedModule.overloadShared(shared);  Vue.use(components)  //注册组件  Object.keys(emitFnc || {}).forEach(i => {    Vue.prototype[`$${i}`] = emitFnc[i]  });}

4、子应用可以在任何组件中使用父应用传递的组件。需要注意的是，使用公共组件的名称要和注册组件的名称保持一致，其他公共js类似。

通过父子间通信，我们大致可以了解到项目中如何实现鉴权，因为前端鉴权是一个难点，在微前端中鉴权方案有很多种，有兴趣的小伙伴可以尝试着去实现自身项目中的鉴权方案。

总结

qiankun，意为统一。通过 qiankun 这种技术手段，让你能很方便的将一个巨石应用改造成一个基于微前端架构的系统，并且不再需要去关注各种过程中的技术细节，做到真正的开箱即用和生产可用。

关于作者：卜壮，普元前端开发工程师，负责Mobile 8.0项目管理平台前端部分。熟悉ReactNative，目前正在学习Vue，大前端技术探求者。