当前位置：首页 > news >正文

【微前端记录】微前端qiankun初体验

news 来源：原创 2024/9/20 22:38:55

闲的没事学习了一下微前端架构，为以后项目复杂化后做准备，作个简单笔记,记录一下基本使用方法和自己踩的一点小坑

先粘贴一段百度的微前端介绍吧

微前端是一种前端架构模式，旨在将大型前端应用程序拆分为多个独立、可独立部署的小型应用程序。这种架构模式借鉴了微服务的思想，解决了单体前端应用在扩展性、维护性和团队协作方面的诸多问题。核心理念
独立性：每个子应用都是独立的，可以独立开发、测试、部署和发布。
子应用之间的耦合度低，彼此独立运行。
技术无关：不同的子应用可以使用不同的技术栈。例如，一个子应用可以使用 React，另一个可以使用 Vue 或 Angular。
这允许团队选择最适合他们的技术，而不必受限于主应用的技术选择。
团队自治：每个团队可以独立负责一个或多个子应用，这样可以提高开发效率和灵活性。
团队可以根据自己的节奏进行开发和发布，而不必等待其他团队的进度。
渐进迁移：可以逐步将单体应用拆分成微前端，而不需要一次性重写整个应用。
这减少了重构的风险和成本。

闲话少说，采用`qiankun`来实现微前端架构，先贴一段`qiankun`的介绍

qiankun 是一个基于 single-spa 的微前端框架，旨在更简单地实现和管理微前端架构。它提供了一套完整的解决方案，用于将多个独立的前端应用程序组合成一个整体，同时支持独立开发、独立部署和独立运行。核心特点
简单易用：qiankun 提供了简单的 API，使得微前端的实现变得更加容易。
开发者可以快速上手，无需深入了解 single-spa 的复杂细节。
技术栈无关：支持多种前端框架，如 React、Vue、Angular 等。
不同的子应用可以使用不同的技术栈，互不干扰。
独立部署：每个子应用可以独立部署，主应用只需加载相应的 URL。
子应用的更新不会影响其他应用，发布过程更加灵活。
应用隔离：通过沙箱机制实现子应用之间的隔离，避免相互影响。
支持样式隔离和 JavaScript 隔离，确保各自独立运行。
通信机制：提供了主应用和子应用之间的通信机制，方便数据共享和事件传递。
支持全局状态管理和事件总线。
qiankun 的工作原理
qiankun 的核心工作原理是基于 single-spa 进行扩展和封装。它通过注册和启动子应用，实现子应用的加载、渲染和卸载。其主要步骤如下：注册子应用：通过 registerMicroApps 方法注册子应用，定义子应用的名称、入口、挂载容器和激活规则。
启动 qiankun：调用 start 方法启动 qiankun，开始监听路由变化，根据激活规则加载和卸载子应用。
子应用生命周期管理：子应用需要实现 bootstrap、mount 和 unmount 方法，用于初始化、挂载和卸载子应用。

个人初体验的基本基座和微应用都是vue3+vite+ts

主应用的配置

安装qiankun依赖
yarn add qiankun
在一个喜欢的位置创建一个id为myapp的盒子用来展示微应用

修改入口文件

// 导入Vue的createApp函数，用于创建Vue应用
import { createApp } from "vue";
// 导入自定义的CSS样式文件，用于应用全局样式
import "./style.css";
// 导入App组件，作为Vue应用的根组件
import App from "./App.vue";
// 导入qiankun的registerMicroApps和start函数，用于注册和启动微前端应用
import { registerMicroApps, start } from "qiankun";// 注册微前端应用
// 这里注册了一个名为"vue app"的微应用，其入口URL为http://localhost:7100
// 指定应用的容器为页面中的id为"myapp"的元素，并且当访问根路径("/")时，该应用将被激活
registerMicroApps([{name: "vue app",entry: "//localhost:7100",container: "#myapp",activeRule: "/",}
]);// 启动qiankun，开始微前端应用的运行
start();// 创建并挂载Vue应用
// 这里使用createApp函数创建一个Vue应用，并将App组件作为根组件挂载到页面中的id为"app"的元素上
createApp(App).mount("#app");

微应用配置

微应用使用vite构建，这里只说vite的配置
安装 vite-plugin-qiankun
yarn add vite-plugin-qiankun
接下来配置微应用的vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'// 导出Vite配置，用于设置项目的基本配置
export default defineConfig({// 设置静态资源的公共基础路径base: '/',// 配置Vite的开发服务器server: {// 设置服务器端口port: 7100,// 启用跨域资源共享cors: true,// 设置CORS的来源origin: 'http://localhost:7100',},// 使用的插件列表plugins: [// 使用Vue插件，这是Vite的Vue支持所必需的vue(),// 使用qiankun插件，用于微前端应用的开发qiankun('myapp', {// 开发模式下使用特殊配置，便于开发调试useDevMode: true})],
})

配置微应用的main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import {renderWithQiankun,qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";let app: any;// 判断当前环境是否是 qiankun 微前端环境
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {// 如果不是微前端环境，直接挂载应用createApp(App).mount("#app");
} else {// 如果是微前端环境，使用 renderWithQiankun 进行应用的挂载renderWithQiankun({// 挂载应用mount(props) {app = createApp(App);// 根据 props 提供的容器选择器挂载应用app.mount(props.container?.querySelector("#app"));},// 初始化操作bootstrap() {console.log("bootstrap");},// 卸载应用unmount() {app.unmount();},// 更新应用update() {console.log("update");},});
}