Qiankun 项目安装与配置指南

鲍瑜晟Kirby

于 2025-03-27 14:20:41 发布

阅读量389

点赞数 4

本文链接：https://blog.youkuaiyun.com/gitblog_00784/article/details/146557311

版权

Qiankun 项目安装与配置指南

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

1. 项目基础介绍

Qiankun（乾坤）是一个用于构建企业级微前端应用的框架。它能够帮助开发者和团队利用微前端技术，实现多种 JavaScript 框架下的现代 Web 应用开发。Qiankun 旨在解决分布式团队开发中遇到的问题，如应用的静态资源发布形式、框架整合、子应用隔离、性能问题以及公共依赖管理等。它是基于 single-spa 并且经过了大量的优化和测试，使得它成为一个功能完备的微前端解决方案。

主要编程语言

TypeScript
JavaScript

2. 项目使用的关键技术和框架

single-spa：一个用于微前端架构的元框架。
import-html-entry：一个支持 HTML 入口的资源加载器。
Umi Plugin：与 Umi 框架集成的插件，Umi 是一个可插拔的企业级前端应用框架。

特性

独立部署：微应用可以独立部署。
懒加载：支持应用的懒加载。
技术无关：不限制使用的技术栈。
优雅的 API：提供简洁的 API。
HTML 入口访问模式：支持从 HTML 入口加载微应用。
样式隔离：确保微应用的样式不会影响到其他应用。
JS 沙箱：提供 JavaScript 执行的沙箱环境。
预加载资源：支持资源的预加载。

3. 项目安装和配置

准备工作

在开始安装 Qiankun 之前，请确保您的开发环境中已经安装了以下工具：

Node.js（推荐使用 LTS 版本）
npm 或者 yarn 包管理器

安装步骤

安装 Qiankun

使用 npm：
```
npm i qiankun
```
或者使用 yarn：
```
yarn add qiankun
```
创建一个简单的微前端项目

在您的项目中创建一个主应用和一个或多个子应用。以下是一个主应用的简单结构示例：
```
my-qiankun-project/
├── main.js
├── index.html
├── public/
└── microApps/
    ├── app1/
    └── app2/
```

配置主应用

在主应用的入口文件（例如 main.js）中，使用 Qiankun 提供的 API 注册子应用：

import { registerMicroApps } from 'qiankun';

registerMicroApps([
  {
    name: 'app1', // 唯一 id
    entry: '//localhost:7001', // html entry
    container: '#subapp-container',
    activeRule: '/app1',
  },
  // 可以注册多个子应用
]);

配置子应用

子应用需要导出相应的生命周期钩子以便于 Qiankun 管理：

export async function bootstrap() {
  console.log('app1 bootstrap');
}
export async function mount(props) {
  console.log('app1 mount', props);
}
export async function unmount(props) {
  console.log('app1 unmount', props);
}