基于 Qiankun 微前端实践- 从零到一篇

// dom的api
// 外界无法访问 shadow dom
let shadowDOM = document.getElementById('x').attachShadow({mode: 'closed'}); 
let pElm = document.createElement('p');
pElm.innerHTML = 'hello';
let styleElm = document.createElement('style');
styleElm.textContent = `
 p{color: red}
`
shadowDOM.appendchild(styleElm);
shadowDOM.appendchild(pElm);

let sandbox = new SnapshotSandbox();

class SnapshotSandbox{
 constructor(){
   this.proxy = window; // window属性
    this.modifyPropsmap = {}; // 记录在window上的修改
    this.active();
  }
  active() { // 激活
   this.windowSnapshot = {}; //拍照
    for(const prop in window) {
     if(window.hasOwnProperty(prop)){
       this.windowsnapshot[prop] = window[prop];
      }
    }
    object.keys(this.modifyPropsMap).forEach(p=>{
     window[p] = this.modifyPropsMap[p];
    })
  }
  
  inactive(){ // 失活
   for(const prop in window){
     if(window.hasOwnProperty(prop)){
       if(window[prop] !== this.windowsnapshot[prop]){
         this.modifyPropsMap[prop] = window[prop];
          window[prop] = this.windowsnapshot[prop]
        }
      }
    }
  }
}

// 应用的运行 从开始到结束， 切换后不会影响全局
((window)=> {
 window.a = 1;
  window.b = 2;
  console.log(window.a,window.b);
  sandbox.inactive();
  console.log(window.a,window.b);
  sandbox.active();
  console.log(window.a,window.b);
})(sandbox.proxy); // sandbox.proxy 就是window
// 如果是多个子应用就不能使用这种方式了，es6的proxy
// 代理沙箱可以实现多应用沙箱。把不同的应用用不同的代理来处理

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

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

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './registerApps'

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

yarn add qiankun 或者 npm i qiankun

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

// ----- Step2 注册子应用
registerMicroApps([{
        name: 'm-vue',
        entry: '//localhost:20000',
        container: '#container',
        activeRule: '/vue',
    },
], {
    beforeLoad: () => {
        console.log('加载前')
    },
    beforeMount: () => {
        console.log('挂在前')
    },
    afterMount: () => {
        console.log('挂载后')
    },
    beforeUnmount: () => {
        console.log('销毁前')
    },
    afterUnmount: () => {
        console.log('销毁后')
    },
})

// ----- Step3 启动应用
start();

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// Vue.config.productionTip = false

let instance = null
function render(props) {
    instance = new Vue({
        router,
        render: h => h(App)
    }).$mount('#app'); // 这里是挂载到自己的html中  基座会拿到这个挂载后的html 将其插入进去
}

if (window.__POWERED_BY_QIANKUN__) { // 动态添加publicPath
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) { // 默认独立运行
    render();
}

// 需要暴露接入协议
export async function bootstrap(props) {
  console.log('[vue] vue app bootstraped');
};
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount(props) {
   instance.$destroy();
    instance.$el.innerHTML = '';
    instance = null;
    router = null;
}

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}

/**
 * (重要）应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  storeTest(props);
  render(props);
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

module.exports = {
    devServer:{
        port:10000,
        headers:{ 
           // 解决跨域
            'Access-Control-Allow-Origin':'*'
        }
    },
    configureWebpack:{
        output:{
           // 把子应用打包成 umd 库格式
          library: `${name}-[name]`,
          libraryTarget: 'umd',
          jsonpFunction: `webpackJsonp_${name}`,
        }
    }
}