从零开始搭建微前端应用: 简单实现多个子应用集成🔥
前言
大家好，我是阿绵，去年初项目接入微前端的时候，因项目构建结构是统一的，选用了 vite, 一顿操作猛如虎，发现 vite 应用一直无法获取生命周期，才知道那时 qiankun 暂时不支持 vite 应用
qiankun是一个基于的 微前端 实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统
后来问了个前端大佬，给我介绍了 vite-plugin-qiankun 插件，工作中项目的开发对接外部项目进度有了进一步提升。
不懂的地方可以参考qiankun官方API，我这篇文章记录的是 微前端应用概述，并且基于vue3+vite的微应用，如何主应用中接入，以及完整的改造过程
什么是微前端
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略
微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，它具备与技术栈无关、独立开发和部署、增量升级、独立运行时等核心价值，即将 Web 应用由单一的单体应用转变为多个能够独立开发、测试、部署的小型前端应用，而在用户看来仍然是内聚的单个产品。
微前端的使用场景
例子1：
当我们不断迭代一个系统时，项目会随着时间的推移变得越来越庞大并且复杂，这会带来很多问题，所以它们仍然需要能够协同工作
- 打包速度慢，部署升级不易维护和扩展
- 部分公用组件或者插件修改或者提升版本很容易影响到整个项目
- 项目大，参与过的人员越多，不容易跨团队开发，维护性差
- 代码风格，代码重复以及、代码冗余等问题
为了解决这些问题，有些公司采取了微服务架构，将系统拆分成多个小型服务，从而提高系统的可维护性、可扩展性和可测试性。
总之，微前端是一种先进的架构风格，可以有效地解决前端应用程序在迭代过程中出现的问题，并提高团队的生产力和效率。
开始搭建一个微前端的主应用
主应用与技术栈无关，我们可以使用Vue、React、Angular、JQuery甚至ES5语法进行搭建。主应用的目的如下：
- 注册微应用
- 为每个微应用提供dom容器
- 启动主应用
下面我们以vue为主应用一步一步进行讲解，可以使用vite构建项目。
一、安装qiankun
yarn add qiankun
or
npm i qiankun
复制代码
二、子应用配置管理文件micro-app.ts
// /src/micro-app.ts文件
/**
* name: 微应用名称 - 具有唯一性
* entry: 微应用入口 - 通过该地址加载微应用
* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
* activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
*/
const microApps = [
{
name: "microOne",
entry: "http://localhost:6888/",
activeRule:'microOne'，
container: "#container",
},
{
name: "microTwo",
entry: "http://localhost:8100/",
activeRule:'microTwo'，
container: "#container",
},
{
name: "microThree",
entry: "http://localhost:8200/",
activeRule:'microThree'，
container: "#container",
},
];
const apps = microApps.map((app) => {
return {
...app,
props: {
routerBase: app.activeRule,
},
loader(loading: boolean) {
console.log("加载中...", loading);
},
};
});
export default apps;
复制代码
三、启动qiankun
// App.vue文件添加如下代码
import { registerMicroApps, start } from "qiankun";
import apps from "./micro-app";
/**
* @description: 注册微应用
* 第一个参数 - 微应用的注册信息
* 第二个参数 - 全局生命周期钩子
*/
registerMicroApps(apps);
start({
sandbox: {
experimentalStyleIsolation: true,
},
});
复制代码
微前端的子应用
子应用程序是微前端架构中的核心概念之一，通常以独立的代码库形式存在。子应用程序负责实现特定的功能或业务需求，并且必须能够与其他子应用程序协同工作，共同构建出一个完整的前端应用程序。
子应用我这里演示是用的vue3版本
一、vite.config.ts配置
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, __dirname)
return {
plugins: [vue(), qiankun('microOne', { useDevMode: true })],
server: {
port: xxx,
open: true
},
}
})
复制代码
二、入口文件main.ts配置
其中，bootstrap、mount、unmount是qiankun要求子应用实现的三个生命周期钩子函数。具体解释如下：
bootstrap：子应用的启动函数，在子应用初始化时执行。mount：将被调用以挂载微应用程序，在此之前必须返回一个 Promise 以确保异步操作完成。unmount：将被调用以卸载微应用程序，在此之前必须返回一个 Promise 以确保异步操作完成。
// 需要先安装插件 yarn add @sh-winter/vite-plugin-qiankun
import { createApp } from 'vue'
import App from './App.vue'
import routes from './router'
import { createRouter, createWebHashHistory } from 'vue-router'
import { exportLifeCycleHooks, qiankunWindow } from '@sh-winter/vite-plugin-qiankun/dist/helper'
const render = (container?: any) => {
const app = createApp(App)
app.mount('#microTwo')
}
exportLifeCycleHooks({
bootstrap() {
console.log('vue app bootstraped');
},
mount(props) {
console.log('props from main framework', props);
render(props.container);// 作为子应用渲染时将主应用传入的配置作为参数去渲染
},
unmount() {
app?.unmount();
}
})
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
render();
}
复制代码
做到这里就大功告成啦！！！
可以在主应用路由后面加上/microOne就能看到子应用的内容了
// 主应用与子应用之间跳转以及传递参数的方法
window.history.pushState({
user: {} // 参数
}, '', '/')
// 跳转到子应用的话把'/'改为'/microOne'
总结
本篇讨论的主要内容是：
了解什么是微前端，如何理解微前端。 vue3+vite+qiankun搭建一个简单的微前端应用。
总的来说，在搭建微前端应用项目时，需要优先考虑统一的技术栈，以避免多个应用之间互相干扰。可以考虑使用已有的技术栈或者选择适合本项目的新技术。
往期回顾
结语
如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下阿绵哈哈。
宝贝们，都看到这里了，要不点个赞呗 👍🏻
写作不易，希望可以获得你的一个「赞」。如果文章对你有用，可以选择「关注 + 收藏」。 如有文章有错误或建议，欢迎评论指正，谢谢你。❤️