微前端实战

主应用 快速配置

1.安装

2.在主应用中注册微应用

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();

当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

如果微应用不是直接跟路由关联的时候，你也可以选择手动加载微应用的方式：

import { loadMicroApp } from 'qiankun';

loadMicroApp({ name: 'app', entry: '//localhost:7100', container: '#yourContainer', });

子应用 快速配置

1.无需额外安装

2.导出相应的生命周期钩子

微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。

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

/** 
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法 
**/
export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

/** 
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例 
**/
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#root') : document.getElementById('root'),);
}

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

3. 配置微应用的打包工具

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

module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*', // 需要配置跨域 主应用是通过Fetch请求子应用的各种资源
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};


// ！！！注意PublicPath的配置 根据环境变量控制不同环境下的PublicPath的值
publicPath: process.env.PUBLIC_PATH 

4.检查主应用与子应用是否存在重复的路由声明

5.检查子应用是否存在路由的二次封装

function GlobalLink(link) {
  if (process.env.NODE_ENV !== 'development') {
    return '/micro-app' + link
  }
  return link
}

用到的API

1.主应用与子应用通讯

主应用

import { initGlobalState, MicroAppStateActions } from 'qiankun'; // 初始化 state

const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => { 
  // state: 变更后的状态; prev 变更前的状态 
  console.log(state, prev); 
});

actions.setGlobalState(state);

actions.offGlobalStateChange();

子应用

/** 
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法 
**/
export async function mount (props) {
  console.log('微应用加载')
  props.onGlobalStateChange((state, prev) => { 
    // state: 变更后的状态; prev 变更前的状态 
    console.log('VueMicroApp mount', state) 
    console.log(state, prev) 
  }) 
  // props.setGlobalState(state) 
  render(props) 
}