qiankun

• 前言
• bug
• qiankun實戰
• 總結
• qiankun中的沙箱機制

前言

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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。