微前端qiankun框架的基本使用

微前端

首先什么是微前端？想起去年去实习的时候，刚进入公司第一天导师说这个项目已经拆分成微前端，去看一下代码吧，内心顿时慌的一批，什么？微前端？一脸懵逼。。。

后来通过查阅一些资料才对这个概念有了了解，首先微前端具备一下几个特点：

• 技术栈无关 主框架不限制接入应用的技术栈，微应用具备完全自主权

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

• 增量升级

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

• 独立运行时 每个微应用之间状态隔离，运行时状态不共享

微前端的核心之处就是将每一个系统功能拆分成独立的应用，例如侧边导航栏和标题是一些公共部分，每个子项目都会用这些公共部分，子项目的展示区是一个个的独立应用，tab栏分别来自于不同git仓库的项目，由此可见微前端确实比较厉害。

qiankun的基本使用

配置主应用

qiankun 是一个基于 single-spa 的微前端实现库， 首先我们创建三个vue的项目：vue-main，vue-child1，vue-child2

vue-main：主应用

vue-child1：子应用1

vue-child2：子应用2

在主应用中安装qiankun：

npm i qiankun -S

创建一个micro-app.js文件用于定义微应用列表

//micro-app.js
const microApps = [
  {
    name: 'vueChild1',  // 应用的名字
    entry: '//localhost:9001',  // 要渲染到的容器名id
    container: '#container',  //端口号
    activeRule: '/app-vue1',   // 通过哪一个路由来激活
  },
  {
    name: 'vueChild2',
    entry: '//localhost:9002',
    container: '#container',
    activeRule: '/app-vue',
  },
]

export default microApps

//main.js
import {registerMicroApps,start} from "qiankun"
import microApps from "./micro-app.js"
// 注册应用
registerMicroApps(microApps)
// 开启应用
start()

配置子应用

首先需要暴露出qiankun子应用的接入协议，在main.js文件中导入3个生命周期

//main.js
// 根据 qiankun 的协议需要导出 bootstrap/mount/unmount
export async function bootstrap(props) {

};
export async function mount(props) {

};
export async function unmount(props) { // 卸载时销毁应用

};

需要修改webpack配置：

//vue.config.js
const path = require("path");
module.exports = {
  publicPath: 'http://localhost:9001',   //主应用的请求发送到子应用的端口号
  devServer: {
    // 监听端口
    port: 9001,
    overlay: {
      warnings: false,
      errors: false
  },
  // 关闭主机检查，使微应用可以被 fetch
  disableHostCheck: true,
  // 配置跨域请求头，解决开发环境的跨域问题
  headers: {
      "Access-Control-Allow-Origin": "*",
  }
  },
  configureWebpack: {
    resolve: {
      alias: {
          "@": path.resolve(__dirname, "src"),
      },
  },
    output: {
      library: 'vueOne',
      libraryTarget: 'umd'
    }
  }
}

当从子应用1切换到子应用2时，子应用1要进行卸载和子应用2进行挂载，说明子应用要进行独立的挂载和销毁

//main.js
mport routes from './router';
let instance = null;
let router = null;
function render(props) {
  console.log("props",props)
  router = new VueRouter({
    // 运行在主应用中时，基础路由地址配置为 /vue
    base: window.__POWERED_BY_QIANKUN__ ? "/vueOne" : "/",
    mode: "history",
    routes,
  })
  // props 组件通信
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app') // 这里是挂载到自己的HTML中，基座会拿到这个挂载后的HTML，将其插入进去
}

if (!window.__POWERED_BY_QIANKUN__) { // 如果是独立运行，则手动调用渲染
  render();
}
if(window.__POWERED_BY_QIANKUN__){ // 如果是qiankun使用到了，则会动态注入路径
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// 根据 qiankun 的协议需要导出 bootstrap/mount/unmount
export async function bootstrap(props) {

};
export async function mount(props) {
  render(props);
};
export async function unmount(props) { // 卸载时销毁应用
  instance.$destroy();
  instance = null;
  router = null;
};

当我们在浏览器打开主应用的时候，点击切换到vue子应用-1，此时路由发生变化，由此可见子应用接入成功。

总结

在qiankun的使用中遇到几个常见的bug，不过只要耐心寻找都可以解决

1. 子应用中package.josn中的name需要和主应用中的需要接入的子应用的name一致；
2. 将有问题的微应用的 webpack output.library 配置成跟主应用中注册的 name 字段一致
3. 子应用中的publicPath要设置成一个绝对的url

这篇文章只是对qiankun进行了简单的使用，下篇文章了解一个quankun内部的实现原理