乾坤微前端 - 初窥 - Williamson's Blog

参考: 乾坤官网

前置知识介绍#

1.微前端#

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端架构具备以下几个核心价值：

技术栈无关: 主框架不限制接入应用的技术栈，微应用具备完全自主权。
独立开发、独立部署: 微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新。

ps: 但是乾坤还是有侵入性,需要在微应用添加对应的生命周期。

增量升级: 在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略。
独立运行时: 每个微应用之间状态隔离，运行时状态不共享。

2.乾坤(qiankun)#

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

应用#

应用分为主应用和微应用，主应用需要安装qiankun的包，而微应用不需要。

- 主应用#

安装qiankun

1
$ yarn add qiankun # 或者 npm i qiankun -S

在主应用中注册微应用

1
import { registerMicroApps, start } from 'qiankun';
2

3
registerMicroApps([
4
  {
5
    name: 'react app', // app name registered
6
    entry: '//localhost:7100',
7
    container: '#yourContainer',
8
    activeRule: '/yourActiveRule',
9
  },
10
  {
11
    name: 'vue app',
12
    entry: { scripts: ['//localhost:7100/main.js'] },
13
    container: '#yourContainer2',
14
    activeRule: '/yourActiveRule2',
15
  },
16
]);
17

18
start();

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

实践中我们需要将微应用的跳转关联到路由中以达到基本使用，所以对上面的情况进行如下修改(以官网Vue示例):

在Vue的main.ts中注册微应用

1
import './assets/main.css'
2
import { createApp } from 'vue'
3
import { createPinia } from 'pinia'
4
import { registerMicroApps } from 'qiankun'
5
import App from './App.vue'
6
import router from './router'
7
const app = createApp(App)
8

9
app.use(createPinia())
10
app.use(router)
11

12
registerMicroApps([
13
    {
14
        name: 'app-vue-qk',
15
        entry: '//localhost:8090', // 独立
16
        // entry: '/app-vue/', // 整合
17
        container: '#child',
18
        activeRule: '/app-vue-qk',
19
        props: {
20
            routers: router,
21
        }
22
    }
23
]);
24

25
app.mount('#app')import './assets/main.css'
26
import { createApp } from 'vue'
27
import { createPinia } from 'pinia'
28
import { registerMicroApps } from 'qiankun'
29
import App from './App.vue'
30
import router from './router'
31
const app = createApp(App)
32

33
app.use(createPinia())
34
app.use(router)
35

36
registerMicroApps([
37
    {
38
        name: 'app-vue-qk',
39
        entry: '//localhost:8090', // 独立
40
        // entry: '/app-vue/', // 整合
41
        container: '#child',
42
        activeRule: '/app-vue-qk',
43
        props: {
44
            routers: router,
45
        }
46
    }
47
]);
48

49
app.mount('#app')

创建一个qiankun.vue的页面

1
<template>
2
  <div id="child" class="about"></div>
3
</template>
4

5
<script setup lang="ts">
6
import { onMounted } from 'vue'
7
import { start } from 'qiankun'
8

9
onMounted(() => {
10
  // 启动 qiankun
11
  start({
12
    sandbox: {
13
      experimentalStyleIsolation: true // 样式隔离
14
    }
15
  })
16
})
17
</script><template>
18
  <div id="child" class="about"></div>
19
</template>
20

21
<script setup lang="ts">
22
import { onMounted } from 'vue'
23
import { start } from 'qiankun'
24

25
onMounted(() => {
26
  // 启动 qiankun
27
  start({
28
    sandbox: {
29
      experimentalStyleIsolation: true // 样式隔离
30
    }
31
  })
32
})
33
</script>

在vue-router路由中添加

1
{
2
    path: "/app-vue-qk/:abc*",
3
    name: 'app-vue-qk',
4
    component: () => import("../views/qiankun.vue")
5
}

ps: 注意在不同版本的vue-router中写法会有所不同!

以上我们完成了主应用的初始化。

- 微应用#

微应用官方示例为vue2，这里我们也使用vue2，微应用不需要额外安装任何其他依赖即可接入 qiankun 主应用。

在 src 目录新增 public-path.js

1
if (window.__POWERED_BY_QIANKUN__) {
2
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
3
}

2.入口文件 main.js 修改

为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。

1
import './public-path';
2
import Vue from 'vue';
3
import VueRouter from 'vue-router';
4
import App from './app.vue';
5
import routes from './router';
6
import './css/base.css'
7

8
Vue.use(VueRouter);
9

10
Vue.config.productionTip = false;
11

12
let router = null;
13
let instance = null;
14
function render(props = {}) {
15
  const { container } = props;
16

17
  router = new VueRouter({
18
    base: window.__POWERED_BY_QIANKUN__ ? '/app-vue-qk/' : '/',
19
    mode: 'history',
20
    routes: routes.routes,
21
  });
22

23
  instance = new Vue({
24
    router,
25
    render: (h) => h(App),
26
  }).$mount(container ? container.querySelector('#app') : '#app');
27
}
28

29
// 独立运行时
30
if (!window.__POWERED_BY_QIANKUN__) {
31
  render();
32
}
33

34
export async function bootstrap() {
35
  console.log('[vue] vue app bootstraped');
36
}
37
export async function mount(props) {
38
  console.log('[vue] props from main framework', props);
39
  render(props);
40
}
41
export async function unmount() {
42
  instance.$destroy();
43
  instance.$el.innerHTML = '';
44
  instance = null;
45
  router = null;
46
}

3.打包配置修改（vue.config.js）

1
const name = "app-vue-qk";
2
module.exports = {
3
  devServer: {
4
    headers: {
5
      'Access-Control-Allow-Origin': '*', // 运行时允许跨域
6
    },
7
  },
8
  configureWebpack: {
9
    output: {
10
      library: `${name}-[name]`,
11
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
12
      jsonpFunction: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
13
    },
14
  },
15
};

以上配置好微应用后即可启动主应用和微应用进行验证。

ps: Github实践样例

部署方式#

主要分为同服务器部署和非服务器部署详情可见官网说明。

官网部署说明

总结#

乾坤实践后达到了基本应用，一些细节的设置在官网上没有明确的说明，耗费了一些时间。

思考待完善

微应用跳转微应用
微应用跳转主应用
相应的自动化部署发布