正文

揭秘微前端乾坤框架，轻松部署高效实践指南

/0 浏览量
1014

微前端作为一种架构风格，旨在将大型应用拆分成多个小型、独立的前端应用。乾坤框架（Qiankun）是当前国内最受欢迎的微前端解决方案之一。本文将深入揭秘乾坤框架的原理，并提供轻松部署和高效实践的指南。

一、乾坤框架概述

乾坤框架，全称“乾坤微前端框架”，是由蚂蚁金服开源的一个轻量级、高性能的微前端框架。它通过隔离沙箱、全局状态管理、通信机制等特性，实现了多个前端应用的协同工作。

1.1 核心特性

  • 隔离沙箱：确保各个微应用之间互不干扰，避免全局污染。
  • 全局状态管理：提供统一的全局状态管理方案，方便微应用之间的数据共享。
  • 通信机制：提供多种通信方式，如事件总线、全局状态、RPC等，实现微应用之间的交互。
  • 生命周期管理：提供完善的微应用生命周期管理，包括加载、卸载、更新等。

1.2 适用场景

  • 大型复杂应用：将应用拆分成多个独立模块，降低开发难度和维护成本。
  • 团队协作：实现团队成员之间的解耦，提高开发效率。
  • 技术栈统一：支持不同技术栈的微应用共存，降低技术选型风险。

二、乾坤框架部署指南

2.1 环境准备

  • Node.js：版本要求大于等于8.9.0。
  • npm：版本要求大于等于5.6.0。

2.2 创建主应用

  1. 初始化项目：
mkdir my-app
cd my-app
npm init -y
  1. 安装乾坤框架：
npm install qiankun --save
  1. 配置乾坤框架：

在 src/main.js 中配置乾坤框架：

import { registerMicroApps, start } from 'qiankun';

const apps = [
  {
    name: 'app1', // 唯一标识
    entry: '//localhost:7001', // html entry
    container: '#container', // 容器
    activeRule: '/app1', // 激活路由
  },
];

registerMicroApps(apps);

start();

2.3 创建子应用

  1. 初始化项目：
mkdir my-subapp
cd my-subapp
npm init -y
  1. 安装乾坤框架：
npm install qiankun --save
  1. 配置乾坤框架：

在 src/main.js 中配置乾坤框架：

import { registerMicroApps, start } from 'qiankun';

const apps = [
  {
    name: 'app1', // 唯一标识
    entry: '//localhost:7001', // html entry
    container: '#container', // 容器
    activeRule: '/app1', // 激活路由
  },
];

registerMicroApps(apps);

start();
  1. 启动子应用：
npm run start

三、乾坤框架高效实践

3.1 状态管理

乾坤框架提供了全局状态管理功能，可以通过 qiankunStateTree 进行状态共享。

// 主应用
import { setGlobalState } from 'qiankun';

setGlobalState({
  user: 'admin',
});

// 子应用
const globalState = window.__INJECTEDProps.qiankunStateTree;

console.log(globalState.user); // 输出: admin

3.2 通信机制

乾坤框架提供了多种通信机制，如事件总线、全局状态、RPC等。

// 主应用
import { onGlobalStateChange, setGlobalState } from 'qiankun';

onGlobalStateChange((state, prev) => {
  console.log(state, prev);
});

setGlobalState({
  user: 'admin',
});

// 子应用
const globalState = window.__INJECTED<Props>.qiankunStateTree;

console.log(globalState.user); // 输出: admin

3.3 生命周期管理

乾坤框架提供了完善的微应用生命周期管理，包括加载、卸载、更新等。

// 主应用
import { registerMicroApps, start } from 'qiankun';

const apps = [
  {
    name: 'app1',
    entry: '//localhost:7001',
    container: '#container',
    activeRule: '/app1',
    beforeLoad: () => {
      console.log('app1 加载前');
    },
    afterMount: () => {
      console.log('app1 加载后');
    },
  },
];

registerMicroApps(apps);

start();

// 子应用
export async function bootstrap() {
  console.log('app1 启动');
}

export async function mount(props) {
  console.log('app1 挂载');
}

export async function unmount(props) {
  console.log('app1 卸载');
}

通过以上实践，我们可以轻松地将乾坤框架应用于实际项目中，实现高效的微前端架构。

-- 展开阅读全文 --