Qiankun微前端框架入门指南

胡同琥Randolph

于 2025-06-02 09:06:17 发布

阅读量346

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00818/article/details/148375919

Qiankun微前端框架入门指南

qiankun 📦 🚀 Blazing fast, simple and complete solution for micro frontends. 项目地址: https://gitcode.com/gh_mirrors/qi/qiankun

什么是Qiankun

Qiankun是一个基于Single-Spa的企业级微前端框架，它可以帮助开发者将多个独立的前端应用整合为一个完整的系统。通过Qiankun，不同技术栈(React、Vue、Angular等)构建的应用可以共存于同一页面，并实现独立开发、独立部署。

主应用配置

1. 安装Qiankun

首先需要在主应用中安装Qiankun依赖：

npm install qiankun --save
# 或者使用yarn
yarn add qiankun

2. 注册微应用

在主应用中注册需要加载的微应用：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react-app',  // 应用唯一名称
    entry: '//localhost:7100',  // 微应用入口地址
    container: '#react-container',  // 挂载容器ID
    activeRule: '/react',  // 激活路由规则
  },
  {
    name: 'vue-app',
    entry: { scripts: ['//localhost:7100/main.js'] },  // 也可以指定具体入口文件
    container: '#vue-container', 
    activeRule: '/vue',
  },
]);

// 启动Qiankun
start();

当浏览器URL发生变化时，Qiankun会自动匹配activeRule返回true的微应用，并依次调用其生命周期钩子函数。

微应用配置

微应用无需额外安装Qiankun，但需要导出必要的生命周期函数并调整打包配置。

1. 导出生命周期函数

微应用需要在入口文件中导出以下生命周期函数：

// 初始化钩子，只会在微应用初始化时调用一次
export async function bootstrap() {
  console.log('微应用启动中...');
  // 可以在这里初始化全局变量或缓存
}

// 挂载钩子，每次进入微应用都会调用
export async function mount(props) {
  console.log('微应用挂载中...');
  // 在这里执行渲染逻辑
  ReactDOM.render(
    <App />,
    props.container 
      ? props.container.querySelector('#root') 
      : document.getElementById('root')
  );
}

// 卸载钩子，每次微应用切换/卸载时调用
export async function unmount(props) {
  console.log('微应用卸载中...');
  // 在这里执行清理逻辑
  ReactDOM.unmountComponentAtNode(
    props.container 
      ? props.container.querySelector('#root') 
      : document.getElementById('root')
  );
}

// 可选更新钩子（仅在使用loadMicroApp方式加载时可用）
export async function update(props) {
  console.log('微应用更新中...', props);
}

2. Webpack配置调整

为了让主应用能正确加载微应用，需要修改webpack配置：

Webpack 5配置

const packageName = require('./package.json').name;

module.exports = {
  output: {
    library: `${packageName}-[name]`,  // 将微应用打包为umd格式
    libraryTarget: 'umd',
    chunkLoadingGlobal: `webpackJsonp_${packageName}`,  // 避免全局变量冲突
  },
};

Webpack 4配置

const packageName = require('./package.json').name;

module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,  // Webpack 4使用jsonpFunction
  },
};