easy-inject-qiankun

@jianyu/easy-inject-qiankun

jianyu easy-inject-qiankun

Installation

Next, install @jianyu/easy-inject-qiankun:

yarn add @jianyu/easy-inject-qiankun --dev

Usage

// # 子应用 main.js
// [可选] 修改 __webpack_public_path__ 
import '@jianyu/easy-inject-qiankun/src/pre-mount'

// 自动判断环境初始化子应用、注册子应用钩子
export const { bootstrap, mount, unmount } = easySubAppRegister({
  Vue,
  router,
  store,
  App,
  el: '#app'
})



// 仅注册子应用钩子
export const { bootstrap, mount, unmount } = subAppRegister({
  render
})

// qiankun hooks
export const { bootstrap, mount, unmount } = easySubAppRegister({
  Vue,
  router,
  store,
  App,
  el: '#app'
}, Lifecycle)


// 子应用是否可独立渲染，非 'development' 时不渲染，默认值 'development'
export const { bootstrap, mount, unmount } = easySubAppRegister({
  Vue,
  router,
  store,
  App,
  el: '#app'
}, Lifecycle, 'development')

Extended use

// 【基座】配置，可前往参考工作桌面应用
registerMicroApps([
  ...
  props: {
    // 路由变量
    __QIANKUN_ROUTER_BASE: '路由配置，同 activeRule',
    // 钩子配置
    hooks: {
      // 示例： 子应用调用该方法，打开外部链接
      openLink ({ link, options = {} }) {}
    },
    className: 'in-app'
  }
], {
  beforeLoad: (app) => {
      // 通过钩子自动注入路由路径
      if (app.props.__QIANKUN_ROUTER_BASE) {
        window.__QIANKUN_ROUTER_BASE = app.props.__QIANKUN_ROUTER_BASE
      }
  }
})

// 子应用调用基座钩子
// 基座 hooks 钩子已经自动注入到 Vue.prototype.$BraceHooks
import { tryCallHooks } from '@jianyu/easy-inject-qiankun'

/**
 * 尝试函数调用
 * @param hooks
 * @param fn
 * @param arg
 * @param spareFn - 备用函数
 * @returns {*}
 */
 
tryCallHooks(this.$BraceHooks, 'openLink', {
    link: 'xxx'
}, () => {
  location.href = 'xxx'
})