## 剑鱼微前端状况简述

### 微前端简述
目前主流的微前端框架技术思想，都是基于WebComponent的思路，通过js沙箱、样式隔离、元素隔离、路由隔离模拟实现了ShadowDom的隔离特性，并结合CustomElement将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。

![img.png](./img.png)

### 技术选择

在2022年前期工作台搭建时，调研了当时主流的微前端技术框架 `qiankun`、`无界`、`mirco-app`。

结合当时技术状况，以及生成环境的稳定性，选择使用社区成熟度、热度较高的 `qiankun`。

### 集成流程

#### 基座（工作台）

仅仅需要注册子应用，

配置示例：
```
 qiankun: {
  name: 'testSubApp',
  entry: '/page_test/index.html',
  rule: '/test'
},
```

![img_1.png](./img_1.png)

#### 子应用集成
1. 配置子应用生命周期

vue项目，`main.js`入口文件示例
```
import { easySubAppRegister } from '@jianyu/easy-inject-qiankun'
export const { bootstrap, mount, unmount } = easySubAppRegister({
    Vue,
    router,
    store,
    App,
    el: '#app'
})
```
2. 导出模块

历史项目，基于 `vue@cli` 配置 webpack 示例
```
configureWebpack: {
    ...,
    output: {
      library: 'testSubApp',
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${packageName}`
    },
}
```

新项目，基于 `vite` 配置示例
```
import { legacyQiankun } from 'vite-plugin-legacy-qiankun'

...

plugins: [
    ...,
     legacyQiankun({
      name: 'testSubApp',
      devSandbox: false
    }) 
]

```