前端微服务-qiankun安装与配置

介绍

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。

目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用，在易用性及完备性上，绝对是值得信赖的。

1、主应用

主应用不限技术栈，只需要提供一个容器 DOM，然后注册微应用并 start 即可。

先安装 qiankun ：

$ yarn add qiankun # 或者 npm i qiankun -S

1.1、注册微应用并启动：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'reactApp',
    entry: '//localhost:3000',
    container: '#container',
    activeRule: '/app-react',
  },
  {
    name: 'vueApp',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/app-vue',
  },
  {
    name: 'angularApp',
    entry: '//localhost:4200',
    container: '#container',
    activeRule: '/app-angular',
  },
]);
// 启动 qiankun
start();

2、Vue 微应用

以 vue-cli 3+ 生成的 vue 2.x 项目为例

2.1、在 src 目录新增 public-path.js：

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

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

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

// 乾坤配置方法
let instance = null
function render( props = {}) {
    const { container } = props
    instance = new Vue({
        router,
        store,
        render: h => h(App),
    }).$mount(container ? container.querySelector('#app'): '#app')
}

if (!window.__POWERED_BY_QIANKUN__) {
    render()
}

//--------- 生命周期函数------------//
export async function bootstrap() {
    console.log('[qiankun] vue app bootstraped')
}
export async function mount(props) {
    console.log('[qiankun] props from main framework', props)
    render(props)
}
export async function unmount() {
    instance.$destroy()
    instance.$el.innerHTML = ''
    instance = null
}

2.3、配置 vue.config.js

在子项目内修改 vue.config.js

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

function resolve(dir) {
    return path.join(__dirname, dir);
}

const port = 8092; // dev port

module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
    // 基本路径
    publicPath: process.env.publicPath != null && process.env.publicPath != '' ? process.env.publicPath : '/',
    outputDir: process.env.outputDir != null && process.env.outputDir != '' ? process.env.outputDir : 'dist',
    filenameHashing: true,
    // tweak internal webpack configuration.
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    devServer: {
        // host: '0.0.0.0',
        hot: true,
        disableHostCheck: true,
        port,
        // overlay: {
        //     warnings: false,
        //     errors: true,
        // },
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
    // 自定义webpack配置
    configureWebpack: {
        resolve: {
            alias: {
                // '@': window.__POWERED_BY_QIANKUN__? resolve('/naroticControl/src'): resolve('/src'),
                '@': resolve('/src'),
            },
        },
        output: {
            // 把子应用打包成 umd 库格式
            library: `${name}-[name]`,
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_${name}`,
        },
    },
};

2.4、配置子项目的 router

修改输出的目录，需要和主应用的 activeRule 一致

const router = new VueRouter({
    mode: 'history',
    base: window.__POWERED_BY_QIANKUN__? '/app-vue/': process.env.BASE_URL,
    routes
})

为什么不是 iframe

看这里 Why Not Iframe

特性

• 📦 基于 single-spa 封装，提供了更加开箱即用的 API。
• 📱 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
• 💪 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
• 🛡​ 样式隔离，确保微应用之间样式互相不干扰。
• 🧳 JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
• ⚡️ 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
• 🔌 umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。