qiankun 微前端初探

微前端：https://gitee.com/tangweiwei/micro-front-end-qiankun

介绍

qiankun vue react angular 微前端实践，一个基座+多个子应用，每个子应用独立开发、发布，不限技术框架

微前端的价值

1、技术栈无关 主框架不限制接入应用的技术栈，子应用具备完全自主权 2、独立开发、独立部署 子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新 3、独立运行时 每个子应用之间状态隔离，运行时状态不共享 微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

软件架构

微前端架构的优势，正是 MPA 与 SPA 架构优势的合集。即保证应用具备独立开发权的同时，又有将它们整合到一起保证产品完整的流程体验的能力。

安装教程

vue-cli react-cli angular-cli 创建项目

npm i qiankun -S

使用说明

主应用 【main.js】(1)、导入qiankun.js

import { registerMicroApps, start } from 'qiankun'

(2)、注册子应用

          registerMicroApps([
            {
              name: 'app1',
              entry: '//localhost:8081',
              container: '#container',
              activeRule: '/vue',
              props: {
                title: '主应用传入'
              }
            }
          ])

          start()      

2. 子应用【main.js】

    let router = null
    let instance = null

    function render(props = {}) {
      const { container } = props

      router = new VueRouter({
        base: '/vue',
        mode: 'history',
        routes
      })

      instance = new Vue({
        router,
        store,
        render: h => h(App)
      }).$mount(container ? container.querySelector('#app') : '#app')
    }


    // webpack打包公共文件路径
    if (window.__POWERED_BY_QIANKUN__) {
      // eslint-disable-next-line no-undef
      __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
    }

    // 独立运行
    if (!window.__POWERED_BY_QIANKUN__) {
      render();
    }
    // 生命周期
    export async function bootstrap() {
      console.log('vue app bootstraped')
    }

    export async function mount(props) {
      console.log('props from main framework', props)

      actions.setActions(props) // 注入actions实例
      render(props)
    }

    export async function unmount() {
      instance.$destroy()
      instance.$el.innerHTML = ''
      instance = null
      router = null
    }

3. 主应用、子应用消息交互(1)、props(2)、initGlobalState（初始化值），onGlobalStateChange（监听值变化），setGlobalState（更改值），具体参考项目内 actions.js

参与贡献

1. qiankun.js https://qiankun.umijs.org/zh/