微前端框架qiankun源码剖析之上篇

介绍

本篇文章将深入剖析微前端框架qiankun的源码，并且讨论它的工作原理和实现细节。qiankun是一个优秀的微前端解决方案，它可以帮助我们将多个独立的单页应用程序整合到一个整体中，从而实现一个统一的用户体验。在这篇文章中，我们将介绍qiankun的两大核心模块，分别是“qiankun”和“single-spa”，并且举例说明它们如何在实际项目中应用。

qiankun模块

qiankun模块是微前端框架qiankun中最核心的模块，它实现了应用程序之间的通信，以及动态载入应用程序的功能。我们可以通过如下代码来启动一个qiankun应用：

import { registerMicroApps, start } from 'qiankun';

// 注册微应用
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8001',
    container: '#microapp-container',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:8002',
    container: '#microapp-container',
    activeRule: '/app2',
  },
]);

// 启动应用
start();

在这段代码中，我们先使用registerMicroApps函数注册两个微应用：app1和app2，这两个微应用分别与两个不同的端口对应。然后我们使用start函数启动应用，qiankun将会自动加载并渲染注册的微应用。值得注意的是，我们需要提供container参数，将微应用映射到一个容器中。

single-spa模块

single-spa模块是一种微前端路由框架，qiankun就是基于single-spa模块实现的。single-spa模块非常强大，可以实现子应用之间完全独立、任意组合的特性。我们可以通过如下代码来启动一个single-spa应用：

import { registerApplication, start } from 'single-spa';

// 注册子应用
registerApplication(
  'app1',
  () => import('//localhost:8001/index.js'),
  () => location.pathname.startsWith('/app1')
);

registerApplication(
  'app2',
  () => import('//localhost:8002/index.js'),
  () => location.pathname.startsWith('/app2')
);

// 启动应用
start();

在这段代码中，我们先使用registerApplication函数注册两个子应用：app1和app2，这两个子应用分别与两个不同的端口对应。然后我们使用start函数启动应用，single-spa将会自动加载并渲染注册的子应用。我们需要提供一个判断函数，用于判断当前路由是否匹配子应用。

示例说明

以下是一个基于qiankun实现的示例应用。这个应用包含了一个主应用和两个子应用，主应用是一个React应用，两个子应用分别是一个Vue应用和一个Angular应用。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { registerMicroApps, start } from 'qiankun';

function App() {
  const [state, setState] = useState('');
  return (
    <div>
      <h1>{state}</h1>
      <button onClick={() => setState('app1')}>Load App1</button>
      <button onClick={() => setState('app2')}>Load App2</button>
      <div id="microapp-container"></div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8001',
    container: '#microapp-container',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:8002',
    container: '#microapp-container',
    activeRule: '/app2',
  },
]);

start();

在这个应用中，我们首先定义了一个主应用，其中有两个按钮可以分别加载app1和app2子应用，并将它们映射到微应用容器中。我们还需要在两个子应用的入口文件中分别定义一个生命周期函数：

// ./app1/index.js
import Vue from 'vue';
import router from './router';
import App from './App.vue';
import { lifeCycle, registerMicroApps } from 'qiankun';

Vue.config.productionTip = false;
let instance = null;

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

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

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

export async function bootstrap(props) {

}

export async function mount(props) {
  console.log(props);
  render(props);
}

export async function unmount(props) {
  instance.$destroy();
}

// ./app2/index.js
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { lifeCycle } from 'qiankun';

if (environment.production) {
  enableProdMode();
}

let instance = null;

function render(props) {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .then((module) => {
      instance = module;
    })
    .catch((err) => console.error(err));
}

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

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

export async function bootstrap(props) {}

export async function mount(props) {
  console.log(props);
  render(props);
}

export async function unmount(props) {
  instance.destroy();
}

在子应用中，我们使用了qiankun提供的生命周期函数：bootstrap、mount和unmount。这些函数分别对应应用的加载、渲染和卸载，我们可以在这些函数中做一些初始化或清理的操作。

在示例应用中，我们使用了Vue和Angular两个不同的框架来实现子应用，这说明qiankun可以很好地支持不同框架之间的融合。最终我们可以启动此应用，并在主应用中点击按钮动态加载子应用。