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

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

news 来源：原创 2024/9/20 3:51:01

引言

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

1. 乾坤简介

1.1 什么是乾坤？

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

1.2 为什么选择乾坤？

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

2. 快速上手

2.1 安装乾坤

安装主应用：安装乾坤的主应用依赖。
bash
深色版本
```
1npm install qiankun
```
安装子应用：安装乾坤的子应用依赖。
bash
深色版本
```
1npm install qiankun
```

2.2 配置主应用

引入乾坤：

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 配置子应用

引入乾坤：

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();

注册生命周期：

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 来实现主应用和子应用之间的状态同步。

安装依赖：
bash
深色版本
```
1npm install @qiankun/manager
```

配置状态管理器：

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 来控制子应用的加载时机。

配置路由：

javascript

深色版本

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

3.3 模块联邦

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

安装模块联邦相关依赖：
bash
深色版本
```
1npm install @module-federation/loader
```

配置模块联邦：

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();