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

yizhihongxing

微前端框架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可以很好地支持不同框架之间的融合。最终我们可以启动此应用,并在主应用中点击按钮动态加载子应用。

结论

本篇文章对微前端框架qiankun的源码进行了深入剖析,并且介绍了其核心模块qiankun和single-spa的实现原理和细节。我们通过一个示例说明了qiankun可以支持不同框架之间的融合,并展示了如何在实际项目中使用qiankun。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微前端框架qiankun源码剖析之上篇 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Vue3中的组合式 API示例详解

    当谈到使用Vue3开发现代web应用程序时,组合式API一直是一个备受关注的话题。组合式API是Vue3的新特性之一,它允许你创建可重用和高度抽象的组件逻辑,使得代码更易于维护和实现。本文将为您介绍什么是组合式API,提供两个组合式API示例,并展示如何在Vue3项目中使用组合式API。 组合式API概述 组合式API是Vue3中的新特性,它允许将组件逻辑分…

    Vue 2023年5月28日
    00
  • 用vuex写了一个购物车H5页面的示例代码

    下面就是使用Vuex写购物车H5页面的攻略,具体步骤如下: 1. 安装所需依赖 首先,在终端中切换到你的项目目录下,使用以下命令安装所需依赖: npm install vuex –save-dev 2. 创建Vuex store 在src目录下创建store目录,并在其中创建index.js文件。在index.js文件中,先引入Vue和Vuex: impo…

    Vue 2023年5月27日
    00
  • 微信小程序版的知乎日报开发实例

    下面是详细的“微信小程序版的知乎日报开发实例”的完整攻略。 一、前置知识 在开始你的微信小程序版知乎日报开发之前,你需要掌握以下技能: 熟悉微信小程序开发相关知识,包括如何创建小程序、小程序结构、基本组件和API等。 熟悉HTTP协议以及Ajax请求相关知识。 熟练掌握JavaScript语言,了解ES6语法。 二、开发流程 1. 获取API接口 首先需要获…

    Vue 2023年5月27日
    00
  • Vuex中的State使用介绍

    当我们使用 Vue 开发复杂的应用程序时,我们通常会遇到许多组件共享相同的状态数据的情况。在这种情况下,每个组件都必须知道如何获取和操作此数据,这会导致代码的冗余以及困难的维护性。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 在 Vuex 中,可以以集中化的方式处理共享状态。该模式包括四个核心概念: state: 管理整个应用程序的状态 …

    Vue 2023年5月28日
    00
  • 关于vue-treeselect的基本用法

    关于 vue-treeselect 的基本用法攻略 vue-treeselect 是一个基于 Vue.js 和 Bootstrap 的无限级树选择器组件,可以用于树形选择和下拉菜单选择。本篇攻略将详细介绍 vue-treeselect 的基本用法,包括组件的基本属性、事件和插槽的使用方法,并提供两个示例说明。 安装 首先,我们需要安装 vue-treesel…

    Vue 2023年5月27日
    00
  • Vue组件中的data必须是一个function的原因浅析

    Vue组件中的data必须是一个function的原因主要是因为Javascript中的对象和数组都是引用类型,如果直接把这些引用类型数据直接赋给组件实例的data属性,那么修改其中一个组件实例的数据时,会影响其它实例的数据。使用函数返回一个新对象可以确保每个组件实例都有自己独立的数据。 以下是两个示例: 示例1 <template> <d…

    Vue 2023年5月28日
    00
  • vue左右滑动选择日期组件封装的方法

    下面就详细讲解“vue左右滑动选择日期组件封装的方法”的完整攻略。 组件的设计思路 分解组件,将组件分成父子间的通信和功能实现 第一层 — 外层组件:选择框和日期文字的显示。组件之间的通信通过组件之间的 props 属性。 第二层 — 内层组件:上下滑动选择时间。组件之间的通信通过 $emit 触发事件,$parent 监听事件来实现。 组件的目录结构 通过…

    Vue 2023年5月29日
    00
  • Vue export import 导入导出的多种方式与区别介绍

    下面我会详细讲解“Vue export import 导入导出的多种方式与区别介绍”的完整攻略。 1. Vue export import 在 Vue 中,我们经常需要在组件或模块之间共享代码,而 Vue 提供了 export 和 import 关键字来实现这个功能。 1.1 export export 是一个 ES6 中的关键字,用于将模块中的变量、函数、…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部