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应用名称, 必须为字符appspa声明周期对象或应用加载函数-
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,
},
};本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读