微前端实战经验——手动挂载篇

## 1. 项目背景
最近一直在做toB业务，手里负责多个后台管理系统（内网使用），最近要对外开放一个平台，其中需要运用到存量系统的部分能力，避免代码重复搬运以及考虑到后续对其他系统的拓展能力，打算封装该子系统为微应用，接入到新平台中，同时避免代码重复搬运以及考虑到后续对其他系统的拓展能力，打算封装该子系统为微应用，接入到新平台中，从而实现微前端架构。

## 2. 微前端介绍
微前端是一种构建前端应用的新方法，它允许你将一个大的单体应用分解成多个更小的独立应用。这些独立应用可以单独开发、部署和管理。微前端的优点有很多，例如可以提高开发效率、降低维护成本、提高代码复用率等。

## 3. qiankun简介
qiankun 是一个基于 Web Component 技术的微前端框架，它可以帮助你轻松地将微应用集成到你的主应用中。qiankun 具有以下特点：

* 基于 Web Component 技术，无需改动原有应用代码
* 提供丰富的生命周期钩子，方便微应用与主应用进行通信
* 支持多种微应用通信方式，如事件、消息等
* 提供统一的资源加载、路由管理、状态管理等功能

## 4. qiankun手动挂载实践
接下来我们将通过一个实际项目来演示如何使用 qiankun 手动挂载微应用。

### 4.1 配置主应用
首先，我们需要配置主应用以支持微应用的挂载。在主应用的根目录下，创建一个名为 `qiankun.config.js` 的文件，并添加以下内容：

export default {
// 注册微应用列表
apps: [
{
name: 'sub-app1', // 微应用名称
entry: '//localhost:9001/sub-app1.js', // 微应用入口文件
container: '#sub-app-container', // 微应用挂载容器
},
{
name: 'sub-app2',
entry: '//localhost:9002/sub-app2.js',
container: '#sub-app-container',
},
],
};

### 4.2 创建微应用
接下来，我们需要创建微应用。微应用可以是一个独立的项目，也可以是主应用的一个子项目。这里我们创建一个名为 `sub-app1` 的微应用，其目录结构如下：

sub-app1
├── package.json
├── src
│ ├── index.js
│ └── index.html
├── .babelrc
├── webpack.config.js
└── README.md

### 4.3 配置微应用
在微应用的根目录下，创建一个名为 `webpack.config.js` 的文件，并添加以下内容：

const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'sub-app1.js',
},
devServer: {
port: 9001,
},
};

### 4.4 启动微应用
运行以下命令启动微应用：

cd sub-app1
npm start

### 4.5 挂载微应用
最后，我们需要将微应用挂载到主应用中。在主应用的 HTML 文件中，添加以下代码：

```

这样，微应用就成功地挂载到了主应用中。

5. 总结

本文介绍了如何使用 qiankun 手动挂载微应用。通过实际项目演示，我们了解了如何配置主应用和微应用，如何启动微应用，以及如何将微应用挂载到主应用中。希望本文能够帮助大家快速上手 qiankun。