前言

qiankun 框架是基于single-spa框架的，所以遵循的协议都一样，也是向外暴露三个钩子函数，但是qiankun 在single-spa的基础上进行了改进：
1，与技术栈无关
2，解决了single-spa的隔离问题，css隔离，js隔离
3，js沙箱机制
4，可以预加载子应用
5，主应用也无需构建请求，内部封装了fecth请求，只需要子应用配置跨域就行

bug

昨天晚上开始写，不断遇见bug，解决一个又会遇见另外一个，真好。今天早上才解决完成，主要遇到的问题是react子应用上的bug，好久没用react了，版本问题，配置问题都有。

一：子应用挂载dom的问题
这次qiankun实战使用vue作为主应用，子应用有vue，react技术栈，这就出现问题了，vue作为主应用，vue也构建了子应用，都是挂载到id 为app的容器上，本来子应用应该是挂载到自己的HTML上，然后再挂载到主应用的容器上，结果出现了子应用挂载到主应用id 为app 的容器上，覆盖主应用，所以子应用应该配置与子应用不一样的挂载id

配置前：

配置后：

二：在配置好react子应用时，npm start可以运行，但是在groom浏览器就是不显示页面
报错：Cannot read property ‘forEach’ of undefined

解决：跟新groom 中react-devtools工具，版本问题

三：配置react子应用，主应用请求重定向为子应用绝对路径
报错：webpack_public_path is not defined

解决：eslint的问题

"eslintConfig": {"extends": ["react-app","react-app/jest"],"globals": {"__webpack_public_path__": true}},

qiankun实战

1，构建主应用，子应用

// 构建主应用
vue create qiankun-base
// 构建vue子应用
vue create child-vue
//构建react子应用
create-react-app child-react

2，主应用安装qiankun,这里子应用无需安装其他插件

npm i qiankun --save

3，配置路由，可以原生也可以使用UI库

npm i element-ui --save

4，配置主应用，注册子应用，在主应用中声明两个容器接收子应用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'reactApp',   //子应用的名字entry: '//localhost:3020',  // 子应用的路径container: '#react',  // 装载子应用的容器activeRule: '/react',  // 路由匹配},{name: 'vueApp',entry: '//localhost:3010',container: '#vue',activeRule: '/vue',}
]);
// 启动 qiankun
start();Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')// 乾坤主应用会根据配置项，主动发起fecth请求，加载子应用，所以配置子应用的时候，需要解决跨域

5，配置vue子应用

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falselet instance = null;
function render () {instance = new Vue({router,render: h => h(App)}).$mount('#app-vue')}if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {}
export async function mount() {render();
}
export async function unmount() {instance.$destroy();
}

配置vue.config.js

module.exports = {devServer: {headers: {'Access-Control-Allow-Origin': '*',},port:3010},configureWebpack: {output: {library: `vueApp`,libraryTarget: 'umd', // 把微应用打包成 umd 库格式},},
};

vue子应用中有路由，记得修改路由base

6，配置react子应用


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root'));
// 定义一个渲染函数，方便主应用调用和子应用自己运行
function render () {ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root'));
}if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {}export async function mount() {  // 挂载子应用render();
}export async function unmount() {// 卸载子应用ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}reportWebVitals();

创建配置文件config-overrides.js

module.exports = {webpack: (config) => {config.output.library = `reactApp`;config.output.libraryTarget = 'umd';config.output.globalObject = 'window';config.output.publicPath = `http://localhost:3020/`return config;},devServer: (configFunction) => {return function (proxy,allowedHost){const config = configFunction(proxy,allowedHost);config.headers = {"Access-Control-Allow-Origin":'*'}return config}},
}

注意修改eslint中的配置

7，分别运行主，子应用

总结

通过qiankun实现微前端，比single-spa性能更好，上手更容易。总体来说搭建一个微前端应用不是很难，不管是single-spa还是qiankun。
qiankun官网：官方文档

qiankun中的沙箱机制

什么是沙箱机制？
沙箱就是应用运行的环境，在沙箱中运行的应用，不会影响外界应用，当沙箱中的应用卸载后，主应用可以还原之前的状态。这就是为什么主应用加载微应用，显示完微应用，可以看到之前的主应用。原来主应用的js，css都被缓存起来了。

一：快照沙箱
当页面不支持Proxy，使用快照沙箱，也是代理的意思，原生只能创建一个。
二：Proxy沙箱
使用es6中的Proxy实现代理，可以支持创建多个沙箱。

微前端之qiankun相关推荐

目标是最完善的微前端解决方案 - qiankun 2.0
距 qiankun 开源已过去了 11 个月,距上次官方发声已过去 8 个月. Announcing qiankun@2.0 2019 年 6 月,微前端框架 qiankun 正式发布了 1. ...
深入浅出解析阿里成熟的微前端框架 qiankun 源码【图文并茂】
来源:leaf(a1029563229 ) https://github.com/a1029563229/blogs/blob/master/Source-Code/qiankun/1.md 本文将针 ...
深入浅出解析阿里成熟的微前端框架 qiankun 源码
本文将针对微前端框架 qiankun 的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是微前端. 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的 ...
万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇
写在开头微前端系列文章: 基于 qiankun 的微前端最佳实践(万字长文) - 从 0 到 1 篇基于 qiankun 的微前端最佳实践(图文并茂) - 应用间通信篇基于 qiankun 的微 ...
微前端框架qiankun项目实战（一）--本地开发篇
❝ 作者:黑化程序员 https://juejin.cn/post/6970310177517993998 ❞ 大家好,我是小黑. 公司使用技术栈是vue,最近遇到了一个需求,要把原有后台管理系统的功 ...
微前端框架qiankun之原理与实战
目录一.微前端概述 1. 基本原理 2. 微前端的主要优势 3. 当前微前端方案的一些缺点二.qiankun与single-spa实现原理 1. single-spa实现原理 (1). 路由问题 ...
iframe 接班人-微前端框架 qiankun 在中后台系统实践
「福利」 ✿✿ ヽ(°▽°)ノ ✿:文章最后有抽奖,转转纪念 T 恤,走过路过不要错过哦背景在转转的中台业务中,交易流转.业务运营和商户赋能等功能,主要集中在两个系统中(暂且命名为 inner/o ...
微前端之 qiankun 入门、上手、实战（构建大型 web 应用）
目录前言正文一.介绍微前端 qiankun 二.快速上手 ☛主应用 ① 安装 qiankun ② 在主应用中注册微应用 ☛微应用 ① 导出相应的生命周期钩子 ② 配置微应用的打包工具三. ...
微前端框架qiankun开发到部署保姆式教程原理与实战
废话不多说先了解下在实践. 1. 什么是微前端 web应用构建方式微前端微前端在2016年ThoughtWorks Technology Radar正式被提出.微服务这个被广泛应用于服务端的技术范 ...

微前端之qiankun

qiankun

前言

bug

qiankun实战

总结

qiankun中的沙箱机制

微前端之qiankun相关推荐

最新文章

热门文章