乾坤微前端框架详细使用大全

引言

乾坤微前端框架（Qiankun）是一款轻量级的微前端解决方案，它基于 JavaScript 的 Proxy 特性和 Web Components 技术，提供了一套简单易用的微前端实现方案。本文将详细介绍乾坤微前端框架的安装、配置、使用方法及常见问题解答，帮助开发者快速上手乾坤微前端框架。

1. 乾坤简介

1.1 什么是乾坤？

乾坤是一个轻量级的微前端框架，旨在帮助开发者轻松实现微前端架构。它通过主应用（Main Application）和子应用（Micro Application）的概念，实现了应用间的解耦和重用，提高了开发效率和灵活性。

1.2 为什么选择乾坤？

• 低侵入性：乾坤几乎不需要对现有的应用进行大的改动。
• 易于集成：支持多种构建工具和框架。
• 灵活配置：可以根据项目需求进行定制化配置。

2. 快速上手

2.1 安装乾坤

1. 安装主应用：安装乾坤的主应用依赖。

   bash

   深色版本

   1npm install qiankun

2. 安装子应用：安装乾坤的子应用依赖。

   bash

   深色版本

   1npm install qiankun

2.2 配置主应用

1. 引入乾坤：
   javascript

   深色版本

   1import { start } from '@qiankun/preview';
   2
   3start({
   4    apps: [
   5        {
   6            name: 'app1', // 子应用名称
   7            entry: '//localhost:8081', // 子应用入口 URL
   8            container: '#subapp-viewport', // 子应用挂载的 DOM 元素
   9            activeRule: '/app1', // 激活规则
   10        },
   11    ],
   12    prefetch: true, // 是否预加载子应用
   13    sandbox: {
   14        policy: {
   15            disallow未经允许的API
   16        }
   17    },
   18    lifeCycles: {
   19        beforeLoad: [
   20            async (app) => {
   21                console.log('before load', app);
   22            },
   23        ],
   24        afterMount: [
   25            async (app) => {
   26                console.log('after mount', app);
   27            },
   28        ],
   29    },
   30});

2.3 配置子应用

1. 引入乾坤：

   javascript

   深色版本

   1import { registerMicroApps, start } from 'qiankun';
   2
   3registerMicroApps([
   4    {
   5        name: 'app1', // 子应用名称
   6        entry: '//localhost:8081', // 子应用入口 URL
   7        container: '#subapp-viewport', // 子应用挂载的 DOM 元素
   8        activeRule: '/app1', // 激活规则
   9    },
   10]);
   11
   12start();

2. 注册生命周期：

   javascript

   深色版本

   1registerMicroApps([
   2    {
   3        name: 'app1',
   4        entry: '//localhost:8081',
   5        activeRule: '/app1',
   6        lifecycle: {
   7            bootstrap: [
   8                (props) => {
   9                    console.log('bootstrap', props);
   10                    return Promise.resolve();
   11                },
   12            ],
   13            mount: [
   14                (props) => {
   15                    console.log('mount', props);
   16                    return Promise.resolve();
   17                },
   18            ],
   19            unmount: [
   20                (props) => {
   21                    console.log('unmount', props);
   22                    return Promise.resolve();
   23                },
   24            ],
   25        },
   26    },
   27]);

3. 进阶配置

3.1 共享状态管理

乾坤支持共享状态管理，可以使用 @qiankun/manager 来实现主应用和子应用之间的状态同步。

1. 安装依赖：

   bash

   深色版本

   1npm install @qiankun/manager

2. 配置状态管理器：

   javascript

   深色版本

   1import { start, Manager } from '@qiankun/preview';
   2import { createStore } from '@qiankun/manager';
   3
   4const store = createStore();
   5
   6start({
   7    apps: [
   8        // ...
   9    ],
   10    manager: new Manager({ store }),
   11});

3.2 路由管理

乾坤支持路由级别的子应用管理，可以通过配置 activeRule 来控制子应用的加载时机。

1. 配置路由：
   javascript

   深色版本

   1start({
   2    apps: [
   3        {
   4            name: 'app1',
   5            entry: '//localhost:8081',
   6            activeRule: '/app1',
   7        },
   8    ],
   9});

3.3 模块联邦

乾坤与模块联邦（Module Federation）技术可以很好地协同工作，实现微前端架构的同时还可以实现代码的按需加载和模块的动态共享。

1. 安装模块联邦相关依赖：

   bash

   深色版本

   1npm install @module-federation/loader

2. 配置模块联邦：

   javascript

   深色版本

   1import { registerMicroApps, start } from 'qiankun';
   2import mfLoader from '@module-federation/loader';
   3
   4registerMicroApps([
   5    {
   6        name: 'app1',
   7        entry: '//localhost:8081',
   8        activeRule: '/app1',
   9        loader: mfLoader({
   10            name: 'app1',
   11            filename: 'remoteEntry.js',
   12            exposes: {
   13                './App': './src/App',
   14            },
   15        }),
   16    },
   17]);
   18
   19start();

4. 常见问题解答

4.1 如何解决跨域问题？

• 使用代理服务器：通过配置代理服务器转发请求到子应用。
• CORS 配置：确保子应用服务器支持 CORS。

4.2 如何实现子应用间的通信？

• 使用乾坤提供的通信机制：通过 @qiankun/manager 实现主应用与子应用之间的通信。
• 自定义通信机制：可以通过全局变量、事件监听等方式实现子应用间的通信。

4.3 如何调试子应用？

• 使用浏览器开发者工具：开启浏览器的开发者工具进行调试。
• 使用乾坤提供的调试工具：通过 @qiankun/preview 中的调试工具来辅助调试。

5. 总结

乾坤微前端框架为开发者提供了一个简单易用的微前端解决方案，通过本文的学习，你应该能够掌握乾坤的基本使用方法，以及如何进行更高级的配置和调试。如果你在实际开发中遇到任何问题，欢迎随时提问！