微前端-内里有乾坤-qiankun

刚接触微前端，这里介绍一下大佬推荐的Qiankun

卖点

• 简单：任意 js 框架均可使用。微应用接入像使用接入一个 iframe 系统一样简单，但实际不是 iframe。
• 完备：几乎包含所有构建微前端系统时所需要的基本能力，如 样式隔离、js 沙箱、预加载等
• 生产可用：已在蚂蚁内外经受过足够大量的线上系统的考验及打磨，健壮性值得信赖。

介绍

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

qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。

目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用，在易用性及完备性上，绝对是值得信赖的。

什么是微前端

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. – Micro Frontends

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端架构具备以下几个核心价值：

• 技术栈无关
  主框架不限制接入应用的技术栈，微应用具备完全自主权

• 独立开发、独立部署
  微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 增量升级
  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

• 独立运行时
  每个微应用之间状态隔离，运行时状态不共享

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

更多关于微前端的相关介绍，推荐大家可以去看这几篇文章：

• Micro Frontends
• Micro Frontends from martinfowler.com
• 可能是你见过最完善的微前端解决方案
• 微前端的核心价值

qiankun 的核心设计理念

🥄 简单

由于主应用微应用都能做到技术栈无关，qiankun 对于用户而言只是一个类似 jQuery 的库，你需要调用几个 qiankun 的 API 即可完成应用的微前端改造。同时由于 qiankun 的 HTML entry 及沙箱的设计，使得微应用的接入像使用 iframe 一样简单。

🍡 解耦/技术栈无关

微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，而 qiankun 的诸多设计均是秉持这一原则，如 HTML entry、沙箱、应用间通信等。这样才能确保微应用真正具备 独立开发、独立运行 的能力。

为什么不是 iframe
看这里 Why Not Iframe

特性

📦 基于 single-spa 封装，提供了更加开箱即用的 API。
📱 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
💪 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
🛡​ 样式隔离，确保微应用之间样式互相不干扰。
🧳 JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
⚡️ 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
🔌 umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

---

微前端演进

1. Systemjs（最早）
2. Single-spa
3. Qiankun (基于Single-spa)
   

微前端架构

1. 自由组织模式，模块通用性较差
2. 基座模式，目前运用最多
3. 去中心模式，如webpack5模块联邦，有潜力

简单Demo

1. 首先创建基座应用和子应用

基座应用和自应用的技术栈和框架没什么要求，因为qinankun底层是fetch的html，然后把里面的 script标签注释掉，放到一个shadow中渲染，js另外fetch，通过沙箱来做隔离，这里需要子应用支持跨域。

vue create qiankun-base # 创建基座项目（父应用）
vue create qiankun-vue # 子应用
npx create-react-app qiankun-react # 子应用

cd qiankun-base # 只需要父应用有乾坤即可
npm install qiankun

2. 在基座应用中注册子应用

基座应用需要引入qiankun

App.vue

<template>
	<div>
		<el-menu :router="true" >
			<router-link to="/home" > 主页</router-link> <!--当前应用自己的界面组件路由-->
	    	<router-link to="/vue/app1"/> Vue </router-link> <!-- vue应用 -->
	    	<router-link to="/react/app2"/> React</router-link> <!-- react应用 -->
	    </el-menu router="true" >
	    
	    <router-view></router-view> <!--用于父应用内部的路由 -->
	    <div id="vue"></div> <!--子应用挂载点 -->
	    <div id="react"> </div> <!--子应用挂载点 -->
    </div>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

import {registerMicroApps, start} from 'qiankun'
const apps = [
	{
		name: 'vueApp',
		entry: '//localhost:10000',
		container: '#vue',
		activeRule: '/vuw'
	}
]
registerMicroApps(apps) //注册应用
start({ // 启动
	prefetch:false // 控制子应用的预加载
})
new Vue({
	router,
	render: h => h(App)
}).$mount('#app')

3. 子应用兼容子组件形式和独立应用

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

let instance = null
function render(props){
	instance = new Vue({
		router,
		render: h => h(App)
	}).$mount('#app')
}
// 子组建需要导出三个方法
export async function bootstrap(props){}
export async function mount(props){
	render(props)
}
export async function unmount(props){
	instance.$destory()
}
if (window.__POWERED_BY_QIANKUN__) { // 是在qiankun中加载为子组建，则处理好相对path
	__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
if (!window.__POWERED_BY_QIANKUN__) { // 独立运行则渲染
	render()

vue.config.js

module.exports = {
	devServer:{
		port: 10000,
		headers:{
			'Access-Control-Allo-Origin': '*' // 设置跨域
		}
 	},
 	configureWebpack: {
		output: {
			library: 'vueApp',
			libraryTarget: 'umd' //https://zhuanlan.zhihu.com/p/108216236
		}
	}
}