微前端实战

1. 微前端架构目录结构

├── common     //公共模块
├── main       // 基座
├── sub-react  // react子应用
└── sub-vue    // vue子应用

2. 基座配置

子应用配置文件

const microApps = [
  {
    name: 'sub-vue',
    entry: '//localhost:7777/',
    activeRule: '/sub-vue',
    container: '#subapp-viewport', // 子应用挂载的div
    props: {
      routerBase: '/sub-vue' // 下发路由给子应用，子应用根据该值去定义qiankun环境下的路由
    }
  },
  {
    name: 'sub-react',
    entry: '//localhost:7788/',
    activeRule: '/sub-react',
    container: '#subapp-viewport', // 子应用挂载的div
    props: {
      routerBase: '/sub-react'
    }
  }
]

export default microApps

基座配置

import Vue from 'vue';
import App from './App.vue';
import { registerMicroApps, start } from 'qiankun';
import microApps from './micro-app';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');


registerMicroApps(microApps, {
  beforeLoad: app => {
    console.log('before load app.name====>>>>>', app.name)
  },
  beforeMount: [
    app => {
      console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
    },
  ],
  afterMount: [
    app => {
      console.log('[LifeCycle] after mount %c%s', 'color: green;', app.name);
    }
  ],
  afterUnmount: [
    app => {
      console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
    },
  ],
});

start();

3. 子应用配置

import './public-path' // 注意需要引入public-path
import Vue from 'vue'
import App from './App.vue'
import routes from './router'
import store from './store'
import VueRouter from 'vue-router'

Vue.config.productionTip = false
let instance = null

function render (props = {}) {
  const { container, routerBase } = props
  const router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL,
    mode: 'history',
    routes
  })
  instance = new Vue({
    router,
    store,
    render: (h) => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

/**
 * 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)

  render(props)
}
/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount () {
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
}
/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

4. 全局状态管理

通过initGlobalState, onGlobalStateChange, setGlobalState实现主应用的全局状态管理，然后默认会通过props将通信方法传递给子应用：

// 基座 main/src/main.js
import { initGlobalState } from 'qiankun';
// 初始化 state
let initialState = Vue.observable({
  user: {},
});
const actions = initGlobalState(initialState);
actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log('main change', JSON.stringify(newState), JSON.stringify(prev));
  for (let key in newState) {
    initialState[key] = newState[key]
  }
});
// 定义一个获取state的方法下发到子应用
actions.getGlobalState = (key) => {
  // 有key，表示取globalState下的某个子级对象
  // 无key，表示取全部
  return key ? initialState[key] : initialState
}

actions.setGlobalState(state);
actions.offGlobalStateChange();

// 子应用从生命周期 mount 中获取通信方法，props默认会有onGlobalStateChange和setGlobalState两个api
export function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
  });
  props.setGlobalState(state);
}

5. 子应用独立运行

1. 基座下发的数据独立存储
   子应用在mount声明周期可以获取到最新的主应用下发的数据，然后将这份数据注册到一个名为global的vuex module中，子应用通过global module的action动作进行数据的更新，更新的同时自动同步回父应用。

   因此，对子应用来说，它不用知道自己是一个qiankun子应用还是一个独立应用，它只是有一个名为global的module，它可通过action更新数据，且不再需要关心是否要同步到父应用（同步的动作会封装在方法内部，调用者不需关心），这也是为后面支持子应用独立启动开发做准备。

2. 基座不启动时，主应用的数据怎么获取，子应用登录状态、权限等怎么维护？

   在基座运行时，登录态和用户信息是存放在基座上的，然后基座通过props下发给子应用。但如果基座不启动，只是子应用独立启动，子应用就没法通过props获取到所需的用户信息了。因此，解决办法只能是父子应用都得实现一套相同的登录逻辑。为了可复用，可以把登录逻辑封装在common中，然后在子应用独立运行的逻辑中添加登录相关的逻辑。

   // sub-vue/src/main.js
   
   import { store as commonStore } from 'common'
   import store from './store'
   
   if (!window.__POWERED_BY_QIANKUN__) {
     // 这里是子应用独立运行的环境，实现子应用的登录逻辑
     
     // 独立运行时，也注册一个名为global的store module
     commonStore.globalRegister(store)
     // 模拟登录后，存储用户信息到global module
     const userInfo = { name: '我是独立运行时名字叫张三' } // 假设登录后取到的用户信息
     store.commit('global/setGlobalState', { user: userInfo })
     
     render()
   }
   // ...
   export async function mount (props) {
     console.log('[vue] props from main framework', props)
   
     commonStore.globalRegister(store, props)
   
     render(props)
   }
   // ...

6. 子应用切换Loading

qiankun提供了loader方法可以获取到子应用的加载状态，在这个方法里改动基座App.vue里的loading状态；给子应用配置加上loader方法：

// 定义loader方法，loading改变时，将变量赋值给App.vue的data中的isLoading
function loader(loading) {
  if (instance && instance.$children) {
    // instance.$children[0] 是App.vue，此时直接改动App.vue的isLoading
    instance.$children[0].isLoading = loading
  }
}
let apps = microApps.map(item => {
  return {
    ...item,
    loader
  }
})

7. 公共代码抽离

不可避免，有些方法或工具类是所有子应用都需要用到的，每个子应用都copy一份肯定是不好维护的，所以抽取公共代码到一处是必要的一步。

根目录下新建一个common文件夹用于存放公共代码，如上面的多个vue子应用都可以共用的global-register.js，或者是可复用的request.js和sdk之类的工具函数等。

公共代码抽取后，其他的应用如何使用呢？ 可以让common发布为一个npm私包，npm私包有以下几种组织形式：

• npm指向本地file地址：npm install file:../common。直接在根目录新建一个common目录，然后npm直接依赖文件路径。
• npm指向私有git仓库: npm install git+ssh://xxx-common.git。
• 发布到npm私服。

8. js/css隔离

js 沙箱的原理是子项目加载之前，对 window 对象做一个快照，子项目卸载时恢复这个快照

给 body 、 document 等绑定的事件，请在 unmount 周期清除。js 沙箱只劫持了 window.addEventListener，使用 document.body.addEventListener 或者 document.body.onClick 添加的事件并不会被沙箱移除，会对其他的页面产生影响，请在 unmount 周期清除

qiankun 的 css 沙箱的原理是重写 HTMLHeadElement.prototype.appendChild 事件，记录子项目运行时新增的 style/link 标签，卸载子项目时移除这些标签。

9. 子应用独立仓库后聚合管理

子应用独立git仓库后，可以做到独立启动独立开发了，这时候又会遇到问题：开发环境都是独立的，无法一览整个应用的全貌。

虽然开发时专注于某个子应用时更好，但总有需要整个项目跑起来的时候，比如当多个子应用需要互相依赖跳转时，所以还是要有一个整个项目对所有子应用git仓库的聚合管理才行，该聚合仓库要求做到能够一键install所有的依赖(包括子应用)，一键启动整个项目。

这里主要考虑了三种方案：

1. 使用git submodule。
2. 使用git subtree。
3. 单纯地将所有子仓库放到聚合目录下并.gitignore掉。
4. 使用lerna管理。

参考：https://juejin.cn/post/6875462470593904653

赏

谢谢老板打赏，祝老板永无BUG

微信