微前端 Micro-Frontends - Single-SPA

微前端 Micro-Frontends - Single-SPA

single-spa 包含两部分，
1. Applications ，每个应用都是一个完整的 SPA，每个应用需要知道怎么从 DOM 上 bootstrap(引导), mount(安装), and unmount(卸载)（这三个可以理解为 single-spa 的生命周期）
2. 一个配置文件 single-spa-config ，可以理解为 HTML 页面和 single-spa 注册应用程序的 js 配置文件，注册应用需要的参数：
1. 一个应用的名字，不能重复
2. 一个加载应用代码的函数
3. 一个决定什么时候激活/灭活应用的函数
4. 自定义参数

Single-SPA 提供了自己的一个脚手架 create-single-spa
使用这个脚手架创建项目的时候可以附加参数

# --dir 声明生成的项目文件名
npx create-single-spa my-dir
npx create-single-spa --dir my-dir

# --moduleType 指定生成哪一种类型的 single-spa ，参考下面三种类型
create-single-spa --moduleType root-config
create-single-spa --moduleType app-parcel
create-single-spa --moduleType util-module

# --framework 指定使用何种框架的，例如 react vue
create-single-spa --framework react
create-single-spa --framework vue
create-single-spa --framework angular 

在single-spa中，有以下三种微前端类型：
1. single-spa applications :为一组特定路由渲染组件的微前端。
- 有多个路由
- 声明式 API ———— registerApplication
- 渲染 UI
- single-spa 管理生命周期:负责管理 regist 注册后的应用
- 核心构建模块
2. single-spa parcels : 不受路由控制，渲染组件的微前端。

它们的存在主要是允许您在多个框架中编写应用程序时在应用程序之间重用UI
- 无路由
- 命令式 API
- 渲染 UI
- 自定义生命周期：mountParcel mountRootParcel unmount 等方法来控制 parcels，参考API
- 仅在多个框架中需要
4. utility modules : 非渲染组件，用于暴露共享javascript逻辑的微前端。
- 无路由
- 暴露接口
- 可能渲染 UI
- 外部模块：没有直接的单spa生命周期
- 共享通用逻辑或创建服务很有用

Single-SPA Config

配置文件包含两部分：
1. 一个所有应用共享的 html 文件
2. 一个调用了 singleSpa.registerApplication() 的 js 文件

singleSpa.registerApplication() 参数说明

1. application name，一个字符串，用于描述应用的名称
2. 加载函数或者应用
   • 参数是应用时：一个实现了生命周期方法的对象

const application = {
   
  bootstrap: () => Promise.resolve(), //bootstrap function
  mount