single-spa 和 SystemJS 一点关系都没有!这里先放个主应用和子应用的关系图: single-spa 的理念是希望主应用可以做到非常非常简单的和轻量,简单到只要一个 index.html + 一个 main.js 就可以完成微前端工程,连 Webpack 都不需要,直接在浏览器里执行singleSpa.registerApplication就收工了,这种执行方式也就是in-...
"single-spa:before-no-app-change":"single-spa:before-app-change",getCustomEventDetail(true) ) );window.dispatchEvent(newCustomEvent("single-spa:before-routing-event",getCustomEventDetail(true, { cancelNavigation }) ) );// 在这个时间点,我们是有可能取消这个事件的if(navigationIsCanceled) {window....
single-spa 的理念是希望主应用可以做到非常非常简单的和轻量,简单到只要一个 index.html + 一个 main.js 就可以完成微前端工程,连 Webpack 都不需要,直接在浏览器里执行singleSpa.registerApplication就收工了,这种执行方式也就是in-browser执行。 但是,浏览器里执行 JS,别说实现import xxx from 'https://taoba...
首先包装子应用,各个子应用都需要安装依赖 npm i single-spa-vue systemjs-webpack-interop,修改入口文件main.js如下: 其中single-spa-vue是针对vue项目的包装器,systemjs-webpack-interop是社区维护的npm库,它可以帮助您使webpack和systemjs一起正常工作。 除此之外还需要在webpack配置中的output中增加设置 3.3 修改...
single-spa 提供了一个single-spa-react这个库来帮助导出生命周期: // react-mf-people.jsx 入口importReactfrom"react";importReactDOMfrom"react-dom";importsingleSpaReactfrom"single-spa-react";constlifecycles=singleSpaReact({React,ReactDOM,errorBoundary(){returnError;},loadRootComponent:()=>import(/* ...
singleSpa是一个javascript库 它可以让很多小页面、小的组件、不同架构的前端组件在一个页面应用程序中共存。 这里有一个演示: (https://single-spa.surge.sh/) 这个库可以让你的应用可以使用多个不同的技术栈(vue、react、angular等等),这样我们就可以做同步开发,最后再使用一个公用的路由即可实现路由完美切换。
“抛开手动对微应用进行加载、挂载等操作不讲,single-spa最主要的应用场景是根据路由的切换来自动对已注册的微应用进行一系列管理。这里面有两个重要环节,一是对路由的变化进行监听和控制,二是根据路由的变化改变微应用的一些状态。本文就分两大部分,从源码层面分别对single-spa的路由管理和微应用状态管理进行分析。
以single-spa 为例,我们一起配置一下 1、配置子应用 app1 用vue-cli 脚手架搭建一个轻量级的 vue 工程 改造vue.config.js const package = require('./package.json') module.exports = { // 告诉子应用在这个地址加载静态资源,否则会去基座应用的域名下加载 ...
微前端、single-spa初探 微前端,前端这次词就不用多做解释了,这个概念的重点在于这个“微”字, 从字面意义上看,微是小的意思,小是相对于大的一个用于比较的形容词,所以通常是在项目庞大的情况下,才会考虑将它变小,去考虑将它拆分成若干个小项目。这就是做微前端所要达到的主要目标,将庞大的项目拆分成多个独立...
single-spa 的理念是希望主应用可以做到非常非常简单的和轻量,简单到只要一个 index.html + 一个 main.js 就可以完成微前端工程,连 Webpack 都不需要,直接在浏览器里执行 singleSpa.registerApplication 就收工了,这种执行方式也就是 in-browser 执行。