single-spa 基础概念

时间:2022-07-25
本文章向大家介绍single-spa 基础概念，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

single-spa

CLI 命令行工具

安装
npm install --global create-single-spa
# or
yarn global add create-single-spa
例子
create-single-spa --moduleType root-config --framework vue root

这里创建了一个 使用vue作为基础的根配置

args
  • --dir 执行路径
  • --moduleType 应用类型
    • root-config 根配置
    • app-parcel 子应用
    • util-module 工具包
  • framework 框架类型
    • react
    • vue
    • angular

Root Config 根配置

根配置作为整体的基础，预先注册可使用的子应用，以及公共依赖包

例子
import { registerApplication, start } from 'single-spa'

// 注册应用
registerApplication(
  'navbar', // 应用名称
  () => import('src/navbar/main.js'), // 资源加载路径
  (location) => location.pathname.startsWith('/'),  // 加载时机|路由配置
  { some: 'value' } // 附属参数
);
配置方式
// 参数方式
registerApplication( name, app, activeWhen, customProps)

// 对象方式
registerApplication({
    name,
    app,
    activeWhen,
    customProps
})
args
  • name 应用名称, 必须为字符
  • app spa声明周期对象或应用加载函数
  • activeWhen 应用激活函数 { activeWhen: '/app1' // 路由路径前缀 activeWhen: (location) => location.pathname.startsWith('/') // 路由函数判断 activeWhen: [ '/myApp', (location) => location.pathname.startsWith('/some/other/path') ] // 组合方式 }
  • customProps 该配置内容加传递给应用周期函数 { // 对象方式 customProps: {...}, // 函数方式 customProps: (name, location) =>{ return {...} } }

应用周期函数

周期函数必须返回 Promise对象 

const application = {
  bootstrap: () => Promise.resolve(),
  mount: () => Promise.resolve(), 
  unmount: () => Promise.resolve(), 
  unload: () => Promise.resolve(), // 可选
}
registerApplication('applicationName', application, activityFunction)
args
  • bootstrap 必填， 应用第一次挂载前执行, 切换应用后,不会再次执行
  • mount 必填， 挂载时执行
  • unmount 必填, 卸载时执行
  • unload 可选， unloadApplication 调用时执行

启动

必须在根配置脚本中执行 

import { start } from 'single-spa';

// do some thing
start()

Application 应用配置

声明周期函数 -> 应用周期函数

超时配置
export function bootstrap(props) {...}
export function mount(props) {...}
export function unmount(props) {...}

// 导出超时配置
export const timeouts = {
  bootstrap: {
    millis: 5000,
    dieOnTimeout: true,
    warningMillis: 2500,
  },
  mount: {
    millis: 5000,
    dieOnTimeout: false,
    warningMillis: 2500,
  },
  unmount: {
    millis: 5000,
    dieOnTimeout: true,
    warningMillis: 2500,
  },
  unload: {
    millis: 5000,
    dieOnTimeout: true,
    warningMillis: 2500,
  },
};

随机文章
本站知识点必读
最近更新