qiankun 微前端初探

作者: tww844475003 分类: 微前端 发布时间: 2021-05-22 18:43

微前端: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()      
  1. 子应用【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
    }
  1. 主应用、子应用消息交互(1)、props(2)、initGlobalState(初始化值),onGlobalStateChange(监听值变化),setGlobalState(更改值),具体参考项目内 actions.js

参与贡献

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

前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注