如何高效运用MicroApp实现JS微前端架构的长期扩展与维护？

本文共计577个文字，预计阅读时间需要3分钟。

目录

1.介绍

2.主应用

2.1 路径配置和基础页面 2.2 全局生命周期配置 2.3 主应用插件系统

3.子应用

3.1 Webpack+Vue 子应用 3.2 Webpack+React 子应用

4.应用路由配置说明

4.1 主应用路由 4.2 子应用

目录

• 1. 介绍
• 2. 主应用
• 2.1 路由配置和基础页面
• 2.2 全局生命周期配置
• 2.3 主应用插件系统
• 3. 子应用
• 3.1 Webpack + Vue 子应用
• 3.2 Webpack + React 子应用
• 4. 应用路由配置说明
• 4.1 主应用路由
• 4.2 子应用路由

1. 介绍

MicroApp 是“京东零售”团队在2021年7月正式发布的一个微前端框架，并且抛弃了 Single SPA 的实现理念，基于 CustomElement 和 ShadowDom 来实现。

MicroAPP 宣传的优势有以下几点：

应用接入便捷：主应用只需一行代码即可接入一个微应用（有点夸张哈）

零依赖：本身 MicroApp 并不依赖其他第三方库

框架兼容：本身对其他框架应用都做了适配，并且也兼容 Vite 和 Webpack 应用

其他基本功能：微前端框架都要实现的功能，比如js沙箱、样式隔离、数据通信等

但是因为 MicroApp 依赖 CustomElement 和 proxy，所以浏览器兼容性需要考虑。不过除了已逝的IE，其他浏览器基本都支持。

当然了，因为 MicroApp 发布比较晚，目前也还在 v1 的 alpha 版本，讨论组里面也经常有反馈bug，所以直接上正式项目还有待考虑。

2. 主应用

2.1 路由配置和基础页面

因为 MicroApp 没什么侵入性，所以直接创建用 Vite 创建一个模板项目即可。

npm create vite@latest main-app -- --template vue-ts