如何利用qiankun快速搭建一个微前端项目

584 阅读6分钟

这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

前言

小伙伴们大家好。前一篇文章跟大家分享了一些关于微前端的知识点,包括什么是微前端,为什么要用微前端以及如何实现一个微前端,在文章的最后我们还提到了能够实现微前端的两个库:single-spa和qiankun。今天我们就一qiankun+vue为例来实现一个简单的微前端。

qiankun是什么

  • qiankun官方给出的解释是:qiankun是基于single-spa封装的一个库,旨在帮助大家能够更简单。更无痛的构建一个生产可用的微前端架构系统。
  • qiankun有如下几个主要特点:
    • 简单易用,qiankun基于 single-spa 封装,并在此基础上提供了更加开箱即用的 API
    • 与技术栈无关,任意技术栈的应用均可使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架
    • HTML Entry 接入方式,让你接入微应用像使用 iframe 一样简单
    • 样式隔离,确保微应用之间样式互相不干扰
    • JS 沙箱,确保微应用之间 全局变量/事件 不冲突
    • 资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度

为什么不用iframe

前端的小伙伴应该都知道,iframe也可以实现类似的功能,我们只需要给iframe做好相关的配置,绑定一个src属性即可将src对应的应用嵌进来,那么为什么不用iframe,而是单独搞了这么一个库呢?那么下面我们就来分析一下使用iframe有哪些缺点:

  • 1.url不同步,浏览器刷新iframe的url状态丢失,并且前进后退按钮都无法使用。
  • 2.UI 不同步,DOM 结构不共享。如果想让一个小iframe中的弹出框在整个屏幕中居中显示是一件不容易的事
  • 3.全局上下文完全隔离,内存变量不共享,iframe内部无法访问外面的全局变量
  • 4.慢,用过iframe的都知道,iframe加载其实是挺慢的,每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程

而对于这些问题来说,qiankun刚好都能完美的解决。

快速构建一个qiankun微前端应用

以上说了这么多,接下来我们就一起来看下快速构建一个qiankun微前端应用都需要哪些步骤吧:

  • 1.首先需要创建一个主应用和至少一个微应用
  • 2.然后在主应用中安装微前端库:qiankun
  • 3.在主应用的入口处导入qiankun中的两个方法registerMicroApps和start方法
  • 4.调用registerMicroApps方法注册各个微应用,最后调用start方法来启动qiankun

以上4个步骤是关于主应用的配置,是不是很简单呢,下面再来看下微应用是如何配置的:

  • 1.微应用不需要安装qiankun,但必须要在自己的入口处导出三个方法:
    • bootstrap:在微应用启动(初始化)的时候调用一次(只会调用一次)
    • mount:微应用渲染函数,每次微应用进入时都会调用
    • unmount:每次微应用切出或卸载时都睡调用
    • **注意:**以上三个方法即使不做任何事也必须要导出,否则会报错
  • 2.为了保证每个微应用还能独立运行,还需要在入口处根据全局属性window.__ POWERED_BY_QIANKUN __ 来判断当前应用是由主应用启动还是自己独立运行,从而做出相应的逻辑处理
    • 如果是独立运行则不需额外处理,只是按照原有逻辑进行渲染即可
    • 如果是由主应用启动的,则需将全局变量window.__ INJECTED_PUBLIC_PATH_BY_QIANKUN __ 的值赋给变量 __ webpack_public_path __
  • 3.如果是webpack等工具构建的应用(如vue或react等)则还需要给微应用的打包工具(webpack)增加一些相应的配置,一般需要配置output的library和libraryTarget,具体配置参照下面核心代码部分。
  • 4.最后因为不同应用会部署在不同的域下,所以肯定还会有个跨域问题,一般会在服务器端再进行一个允许跨域的配置

好了,关于微应用的配置也是4个步骤,但跟主应用比起来略显复杂。

qiankun主子应用的核心代码

理论说了一大堆,光说不练也没用,下面就根据上面的步骤来看一下实现一个qiankun微前端的核心代码吧

  • 主应用核心代码
	// 1. 我们以qiankun + vue2.0为例创建一个主应用和一个子应用,路由模式均为history模式
	vue create qiankun-main
	vue create qiankun-child1
	
	// 2. 在主应用qiankun-main安装qiankun
	yarn add qiankun 或者 npm install qiankun --save、
	
	// 3. 在入口处(main.js)中导入qiankun的两个方法registerMicroApps和start
	// main.js
	import {registerMicroApps, start} from 'qiankun'
	
	// 4. 调用registerMicroApps方法注册微应用qiankun-child1,并调用start方法启动qiankun.	
	// main.js
	registerMicroApps([
		{
			name:'qiankun-child1', //微应用的名称
			entry: '//localhost:8082', //微应用的域名(启动路径)
			container: '#vueContainer', //用来承载微应用页面的容器id,该容器配置在主应用的页面中 如:<div id="vueContainer"></div>
			activeRule:'/vueChild' //要激活的微应用的路由
		}
	]);
	
	start(); //启动qiankun
	// ....其它逻辑
  • 微应用核心代码
// main.js
// 1. 导出3个必须的方法
export async function bootstrap(props){
	console.log('微应用初始化时仅调用一次')
}

export async function mount(props){
	console.log("创建vue实例并渲染")
}

export async function unmount(props){
	console.log("卸载当前vue实例")
}

// 2. 根据全局变量window.__POWERED_BY_QIANKUN__ 判断是独立启动还是由qiankun启动
if(window.__POWERED_BY_QIANKUN__){
	__webpach_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
if(!window.__POWERED_BY_QIANKUN__){
	console.log("创建vue实例并渲染")
}
// vue.config.js
// 3. webpack导出配置
module.export = {
	output: {
		library: "qiankun-child1",
		libraryTarget: "umd"
	}
}

// 4. 开发环境下服务端的跨域设置
module.export = {
	devServer: {
		port: 8082, //必须与主应用中注册时的端口一致
		headers: {
			"Access-Control-Allow-Origin": "*"
		}
	}
}

// 5. 微应用路由配置
const router = new VueRouter({
	mode:'history',
	base: '/vueChild',
	routers
});

总结

本文引进了微前端库-qiankun,对qiankun的概念和特性做了简要概述,并整理出要基于qiankun实现一个微前端,主子应用应该要做的的配置步骤,最后以qiankun+vue2.0为例给出了主子应用配置的核心代码,有兴趣的小伙伴可以基于操作步骤的描述和核心代码实现一个简单的微前端吧。本文就先分享到这里了,如果有任务问题和指导欢迎评论留言哦!下篇文章将基于上述核心代码从零开始一步步搭建一个简单但完整的微前端项目。

喜欢的小伙伴欢迎点赞关注加留言哦!