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,
  },
};