I kept getting "does not export an unmount function or array of functions" even though I exporting as an AMD module. In my entry file, main.ts, I was importing (import '../app') the single spa app.js file based
<--主应用中的index.ejs文件--><scripttype="systemjs-importmap">{"imports":{"single-spa":"https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js","react":"https://unpkg.com/react@17/umd/react.production.min.js","react-dom":"https://unpkg.com/react-dom@17/u...
reroute是single-spa的核心函数, 在注册应用时调用此函数的作用, 就是将应用的 promise 加载函数, 注入一个待加载的数组中 等后面正式启动时再调用, 类似于()=>import('xxx') 主要流程: 判断是否符合加载条件 -> 开始加载代码 exportfunctionreroute(pendingPromises = [], eventArguments) { if(appChangeUnderwa...
“前面在微前端07 : 对single-spa的路由管理及微应用状态管理的分析提到过,reroute函数非常重要,因为无论是注册应用还是在popstate、hashchange事件被触发,都会调用这个函数。事实上,single-spa对微应用进行加载、启动、挂载、卸载的时候,都主要是在这个函数中执行的相关逻辑。本文将会带着大家走进reroute函数,从源码层面...
qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 所以本文基于single-spa源码, 来介绍single-spa 当前使用版本5.9.4 启动 在官方 demo 中, 要运行此框架需要做的是有这四步: 准备好子应用的文件, 需要抛出一些生命周期函数 ...
single-spa.min.js:2 single-spa minified message #37: See https://single-spa.js.org/error/?code=37&arg=application&arg=app1&arg={} Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"} main.ts:52 application 'app1' died in status LOADING_SOURCE_CODE: undefined ...
三、简易版single-spa 眼过千遍不如手过一遍,下面我们手撸一个single-spa // stasus.js export const NOT_LOADED = "NOT_LOADED"; export const LOADING_SOURCE_CODE = "LOADING_SOURCE_CODE"; export const NOT_BOOTSTRAPPED = "NOT_BOOTSTRAPPED"; export const BOOTSTRAPPING = "BOOTSTRAPPING"; export ...
这篇文章主要分析single-spa原理。然后分析完之后,作者说说自己对于同时都是微前端框架qiankun和single-spa的关系的一些理解,因为在我学习刚开始微前端的时候,我其实不太明白都是微前端框架qiankun和single-spa有什么区别,它们是什么关系,可能一些读者也会有这样的疑问,同时这篇文章作为铺垫,后面会发出qiankun的原理...
微前端概念做为现在前端比较热门的技术领域,受到了广大前端技术人员的热捧,而 Single-spa 则是现在比较成熟的微前端技术解决方案。Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript微前端框架。 微前端核心流程 Single-spa 的核心执行流程大致如下: ...
状态为 NOT_LOADED、LOADING_SOURCE_CODE 且路由活跃的 appsToMount 状态为 NOT_BOOTSTRAPPED、NOT_MOUNTED 且路由活跃的 是否已调用 start api 已调用 start api 调用performAppChanges,处理 getAppChanges 返回的所有微应用 清除appsToUnload 中的微应用