从零开始搭建微前端应用: 简单实现多个子应用集成🔥

前言

大家好，我是阿绵，去年初项目接入微前端的时候，因项目构建结构是统一的，选用了 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搭建一个简单的微前端应用。

总的来说，在搭建微前端应用项目时，需要优先考虑统一的技术栈，以避免多个应用之间互相干扰。可以考虑使用已有的技术栈或者选择适合本项目的新技术。

往期回顾

结语

如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下阿绵哈哈。

宝贝们，都看到这里了，要不点个赞呗 👍🏻

写作不易，希望可以获得你的一个「赞」。如果文章对你有用，可以选择「关注 + 收藏」。 如有文章有错误或建议，欢迎评论指正，谢谢你。❤️