龙空技术网

qiankun 微前端指南

前端小助~Cc 114

前言:

目前你们对“qiankun ie兼容”大概比较着重,兄弟们都需要知道一些“qiankun ie兼容”的相关知识。那么小编在网摘上搜集了一些有关“qiankun ie兼容””的相关资讯,希望大家能喜欢,你们快快来学习一下吧!

什么是微前端

微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。

为什么需要微前端拆分细化 当前前端的项目通常以spa的形态出现,即一个应用所有的相关页面都在一个项目里面。随着项目的不断迭代,维护成本也会越来越高,很容易出现“牵一发而动全身”的窘境。微前端的意义在于拆分项目,细化为若干个可以单独部署的子项目,子项目互相独立,可以单独部署。兼容技术栈 在传统的前端开发中,技术栈不兼容也是一个头疼的问题,我们经常会因为技术栈不兼容而做出让步。而在微前端的结构下,不同技术栈的子项目可以和谐共存减小迁移成本 微前端的另一个优势,就是可以低成本地整合已有项目。因为子项目是独立的,因此不需要太大的工作量,就可以将已有的项目迁移至新的项目什么是qiankun(乾坤)

qiankun是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 首先让我们了解一下什么是single-spa。

single-spa

single-spa是一个用于前端微服务化的JavaScript前端解决方案, 也是最早的微前端整合方案。

single-spa的原理简单的说就是,single-spa将子应用也看做一个spa的页面。主应用通过路由匹配的方式,加载并显示不同的子应用资源,子应用会经过下载(loaded)、初始化(initialized)、被挂载(mounted)、卸载(unmounted)和unloaded(被移除)等过程。single-spa会通过“生命周期”为这些过程提供钩子函数。

再说回乾坤,乾坤是基于single-spa的二次开发,它在 single-spa 基础上添加更多的功能,并且做了不错的封装,大大降低了入门微前端的门槛。

用qiankun实现微前端

官方的文档里提供了教程 qiankun.umijs.org/zh/guide/ge…

基座改造1.安装qiankun

yarn add qiankun 或者 npm i qiankun -S

2.注册微应用

import { registerMicroApps, start } from 'qiankun';registerMicroApps([  {    name: 'react app', // app name registered    entry: '//localhost:7100',    container: '#yourContainer',    activeRule: '/yourActiveRule',  },  {    name: 'vue app',    entry: { scripts: ['//localhost:7100/main.js'] },    container: '#yourContainer2',    activeRule: '/yourActiveRule2',  },]);start();

registerMicroApps用于注册微应用信息,当基座的路由和activeRule匹配的时候,基座就会从entry处获取微应用,并渲染到container上,同时调用微应用的生命周期。

如果微应用的加载不是根据路由匹配,也可以选择手动加载微应用

import { loadMicroApp } from 'qiankun';loadMicroApp({  name: 'app',  entry: '//localhost:7100',  container: '#yourContainer',});

RegistrableApp

name - string - 必选,微应用的名称,微应用之间必须确保唯一。entry - string | { scripts?: string[]; styles?: string[]; html?: string } - 必选,微应用的入口。container - string | HTMLElement - 必选,微应用的容器节点的选择器或者 Element 实例。如container: '#root' 或 container: document.querySelector('#root')。activeRule - string | (location: Location) => boolean | Array<string | (location: Location) => boolean> - 必选,微应用的激活规则。loader - (loading: boolean) => void - 可选,loading 状态发生变化时会调用的方法。props - object - 可选,主应用需要传递给微应用的数据。微应用改造导出钩子函数

微应用无需安装依赖,主要改造目的是将微应用的入门“暴露”出来。 在自己的入口文件导出 bootstrap、mount、unmount 三个生命周期钩子,以供主应用调用。

import React from 'react';import ReactDOM from 'react-dom';import App from './App';import 'antd/dist/antd.css';import './public_path';import i18n from 'i18next';//将渲染过程封装,以便使用function render(props: any) {	const { container } = props;	ReactDOM.render(		<React.StrictMode>			<App></App>		</React.StrictMode>,		container			? container.querySelector('#root')			: document.querySelector('#root')	);}//如果不是被基座加载,则正常渲染if (!(window as any).__POWERED_BY_QIANKUN__) {	render({});}//bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。//通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。export async function bootstrap() {	console.log('react app bootstraped');}//应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法,以及监听基座传递的消息export async function mount(props: any) {	console.log('props from main framework', props);	render(props);	props.onGlobalStateChange((state: any, prev: any) => {		console.log('子应用监听',state,prev);	});}export async function unmount(props: any) {	const { container } = props;	ReactDOM.unmountComponentAtNode(		container			? container.querySelector('#root')			: document.querySelector('#root')	);}export async function update(props: any) {	console.log('update props', props);}
修改webpack配置
const packageName = require('./package.json').name;module.exports = {  output: {    library: `${packageName}-[name]`,    libraryTarget: 'umd',    jsonpFunction: `webpackJsonp_${packageName}`,  },};

(注:如果是webpack5,jsonpFunction 改为 chunkLoadingGlobal)

配置公共目录

src中新增public_path.js,并在入口引入

if (window.__POWERED_BY_QIANKUN__) {  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}
路由改造

乾坤是根据路由规则来选择微应用的,微应用的路由需要加上activeRule配置的路由,否则无法正确匹配微应用的路由

<BrowserRouter basename="/react-qiankun-micro">
源码分享

到这一步,一个基本的qiankun微应用的壳子就搭出来了,我在这个基础上做了一个简单的框架,效果如图,希望能对大家有帮助

react微应用:github.com/yuzhuohao/r… react主应用:github.com/yuzhuohao/r…

标签: #qiankun ie兼容