微前端----qiankun

1.qiankun是什么？它解决了哪些问题？

qiankun 是一个基于 single-spa 的微前端实现库，换句话说就是对single-spa进行了封装得到qiankun。

qiankun就是将一个大应用拆分成好多小项目，qiankun解决了我们协同开发的一些问题，其次更方便于我们进行更新代码 。

2.qiankun的实现原理及过程。

（1）监听路由变化

（2）匹配子应用

（3）加载子应用

（4）渲染子应用

我们可以简单概括为当匹配到activeRule的时候，请求获取entry资源，渲染到container中。

3.大家可以结合spa应用的父子组件对比的来理解qiankun

我们拿vue2的父子组件来简单分析一下。

qiankun首先也是在他的基座（主应用）注册子应用

子应用名称：父组件中子组件的名称

其次规定他的地址端口号（父子组件没有）:获取entry的html资源

渲染子应用的容器container:父组件中子组件的占位符

触发加载子应用的路径activeRule：相当于子路由

子应用需要配置跨域：因为你这个端口号发生了变化

这个就是对小白来说方便理解这个qiankun，目前在微前端框架领域里，qiankun算是用的最好最多的。

4.qiankun实战配置。

1.首先创建主应用项目、微应用项目

2.主应用安装qiankun npm i qiankun -S

我这次以react项目作为主应用、子应用是一个vue项目 一个react项目

第一步，在主应用里面注册子应用（在主应用的入口文件里）

import { registerMicroApps, start } from 'qiankun'; // 底层是基于single-spa

const loader = (loading) => {
    console.log(loading)
}
registerMicroApps([{
        name: 'm-vue',  // 子应用的名称
        entry: '//localhost:20000',  // 子应用的入口地址
        container: '#container',  // 渲染的容器
        activeRule: '/vue',  // 触发渲染的路径
        loader,
    },
    {
        name: 'm-react',
        entry: '//localhost:30000',
        container: '#container',
        activeRule: '/react',
        loader
    }
], {
    beforeLoad: () => {
        console.log('加载前')
    },
    beforeMount: () => {
        console.log('挂在前')
    },
    afterMount: () => {
        console.log('挂载后')
    },
    beforeUnmount: () => {
        console.log('销毁前')
    },
    afterUnmount: () => {
        console.log('销毁后')
    },
})
start({
    sandbox:{
        // experimentalStyleIsolation:true
        strictStyleIsolation:true
    }
});

第二步，在主应用的出口文件添加触发子应用的路径

import {BrowserRouter as Router,Link} from 'react-router-dom'
function App() {
  return (
    <div className="App">
        <Router>
          <Link to="/vue">vue应用</Link>
          <Link to="/react">react应用</Link>
        </Router>
         {/* 切换导航， 将微应用渲染container容器中 */}

        <div id="container"></div>
    </div>
  );
}

export default App;

第三步，子应用里面的配置vue.config.js

module.exports = {
    publicPath: '//localhost:20000', //保证子应用静态资源都是像20000端口上发送的
    devServer: {
        port: 20000, // fetch
        headers:{
            'Access-Control-Allow-Origin': '*'
        }
    },
    configureWebpack: { // 需要获取我打包的内容  systemjs=》 umd格式
        output: {
            libraryTarget: 'umd',
            library: 'm-vue'// window['m-vue']
        }
    }
}

第四步，子应用里面的main.js

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue'
import routes from './router'

// 不能直接挂载 需要切换的时候 调用mount方法时候再去挂载
let history;
let router;
let app;
function render(props = {}){
    history =  createWebHistory('/vue');
    router = createRouter({
        history,
        routes
    });
    app = createApp(App);
    let {container} = props; // 默认他会拿20000端口的html插入到容器中，
    app.use(router).mount(container ? container.querySelector('#app'):'#app')
}

// 乾坤在渲染前 给我提供了一个变量 window.__POWERED_BY_QIANKUN__

if(!window.__POWERED_BY_QIANKUN__){ // 独立运行自己
render();
   
}

// 需要暴露接入协议
export async function bootstrap(){
    console.log('vue3 app bootstraped');
}

export async function mount(props){
    console.log('vue3 app mount',);
     render(props)
}
export async function unmount(){
    console.log('vue3 app unmount');
    history = null;
    app = null;
    router = null;
}

这是一个简单的实战配置，关注我，下一篇文章整理qiankun的源码，更加彻底的掌握qiankun,大家有啥建议或者观点欢迎评论区留言。