- 综合排序
- 最热优先
- 最新优先
- 来自专栏方球
single-spa 基础概念
single-spa CLI 命令行工具 安装 npm install --global create-single-spa # or yarn global add create-single-spa angular Root Config 根配置 根配置作为整体的基础，预先注册可使用的子应用，以及公共依赖包 例子 import { registerApplication, start } from 'single-spa 挂载时执行 unmount 必填, 卸载时执行 unload 可选， unloadApplication 调用时执行 启动 必须在根配置脚本中执行 import { start } from 'single-spa
1.2K50发布于 2020-09-27 - 来自专栏微信小程序栏目
微前端——single-Spa
一、概念2018年，single-spa诞生了，single-spa是一个小于5kb（gzip）npm包，用于协调微前端的挂载和卸载。只做两件事： 提供生命周期，并负责调度子应用的生命周期。 ["react", "react-dom"] : [], };};3、在single-spa中的应用在 single-spa的使用过程中，我们需要用importmap在根项目中引入所有的模块文件和子项目 在使用single-spa时，不必使用SystemJS，不过为了能够独立部署各应用，很多示例和教程会推荐使用SystemJS。<! /root-config const orgName = "<em>single-spa</em>"; // 组织名 const defaultConfig = singleSpaDefaults({ // @single-spa 总的来说 single-spa 是一个非常基础的微前端框架，应用引入麻烦，很多微前端该有的功能他都没有，因此，在single-spa的基础上诞生了qiankun，开箱即用、接入简单，更适合真正的运用在项目中
4.3K20编辑于 2022-10-06 - 来自专栏海怪的编程小屋
【微前端】single-spa 到底是个什么鬼
很少有深入研究到底 single-spa 是怎么一回事的。 还有一方面是 single-spa 的文档非常难看懂，和 Redux 文档一样喜欢造概念。 嘿嘿，single-spa 框架并没有实现上面任何特点，对的，一个都没有，Just Zero。 single-spa 到底是干嘛的 single-spa 仅仅是一个子应用生命周期的调度者。 single-spa 说：可以啊，搞！ single-spa 将这样的 “类子 app” 称为 Parcel。 同时，single-spa 还分出另一个类：Utility Modules。 和 single-spa 没有关系，只是 in-browser import/export 和 single-spa 倡导的 in-browser run time 相符合，所以 single-spa
1.5K20编辑于 2022-03-30 - 来自专栏前端框架源码剖析
微前端06 : single-spa的注册机制
才是，乾坤只是一个对single-spa进行增强的一个方案。 接下来的几篇文章主要对single-spa的一些核心机制和功能从源码层面对其进行分析。本文主要分析single-spa的注册机制。 ” registerApplication的主要逻辑 我先来看single-spa暴露的注册函数的主要逻辑： // 代码片段1 export function registerApplication( 这个数组很重要，微应用的各种状态都保存在这里，实际上single-spa的核心工作就是对apps中保存的微应用进行管理和控制。 好了，关于single-spa的注册机制今天就分析到这里，请朋友们期待更多关于single-spa的文章。
66910编辑于 2022-09-27 - 来自专栏前端框架源码剖析
微前端08 : single-spa中的reroute函数
的注册机制 微前端07 : 对single-spa的路由管理及微应用状态管理的分析 “前面在微前端07 : 对single-spa的路由管理及微应用状态管理的分析提到过，reroute函数非常重要，因为无论是注册应用还是在 事实上，single-spa对微应用进行加载、启动、挂载、卸载的时候，都主要是在这个函数中执行的相关逻辑。 本文将会带着大家走进reroute函数，从源码层面理解single-spa是如何对微应用进行管理的。 "single-spa:before-no-app-change" : "single-spa:before-app-change", getCustomEventDetail single-spa中有7个自定义监听事件，朋友们可以查阅single-spa API文档，再去源码中看对应逻辑即可，就不在本文赘述了。
63410编辑于 2022-09-27 - 来自专栏程序员成长指北
微前端框架 之 single-spa 从入门到精通
来源：李永宁 https://juejin.im/post/6862661545592111111 前序 目的 会使用single-spa开发项目，然后打包部署上线 刨析single-spa的源码原理 手写一个自己的single-spa框架 过程 编写示例项目 打包部署 框架源码解读 手写框架 关于微前端的介绍这里就不再赘述了，网上有很多的文章，本文的重点在于刨析微前端框架single-spa的实现原理 single-spa是一个很好的微前端基础框架，qiankun框架就是基于single-spa来实现的，在single-spa的基础上做了一层封装，也解决了single-spa的一些缺陷。 以下操作都在/micro-frontend/layout目录下进行 安装single-spa npm i single-spa -S 改造基座项目 入口文件 // src/main.js import 那接下来就来实现一个自己的single-spa框架吧 手写 single-spa 框架 经过上面的阅读，相信对single-spa已经有一定的理解了，接下来就来实现一个自己的single-spa，就叫lyn-single-spa
3.5K22发布于 2020-09-08 - 来自专栏海怪的编程小屋
一个经常被忽略的 single-spa 微前端实践
了解过微前端的同学应该对 single-spa 这个框架都不陌生，但是我翻看了中文整个社区，发现太少文章是讲 single-spa Demo 实践的。 那今天就跟大家深入分析一下 single-spa 的 React 版 Demo 吧。让读者知其然，也能知其所然。 简介 其实 single-spa 的官网上就写了非常多的 Demo 示例： 大家只关注 Actively maintained 的就好了。 这种通过 import-map 引入的库是 SystemJS 异步 JS 的一大特性，这也是 single-spa 一直强调的 JS Entry —— 通过 JS 加载微应用。 /films/films.component.js" ); } 看到这相信大家会有一个疑问：single-spa 这种 JS Entry 的方式应该对打包要求很高吧？
1.6K10编辑于 2022-03-30 - 来自专栏前端小书童
使用Single-spa集成Vue2、Vue3、React
导言 引用Single-spa文档的描述： Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。 使用 single-spa 进行前端架构设计可以带来很多好处，例如: 在同一页面上使用多个前端框架 而不用刷新页面 (React, AngularJS, Angular, Ember, 你正在使用的框架 ) 独立部署每一个单页面应用 新功能使用新框架，旧的单页应用不用重写可以共存 改善初始加载时间，延迟加载代码 开始使用Single-spa搭建项目 基座应用（Vue） 子应用react-app（react17 添加依赖 npm i single-spa 引入systemjs（用于加载依赖及子应用js） <! 这也是single-spa实现依赖共享的主要形式。
1.2K20编辑于 2023-09-02 - 来自专栏神光的编程秘籍
微前端方案 qiankun 只是更完善的 single-spa
微前端的实现方案有很多，比较流行的是 single-spa 以及对它做了一层封装的 qiankun。 今天我们就来了解下这两个微前端实现方案： single-spa 微前端的基本需求就是在 url 变化的时候，加载、卸载对应的子应用，single spa 就实现了这个功能。 所以说 single-spa 并不够完善，于是 qiankun 就出来了： qiankun qiankun 并不是新的微前端框架，它只是解决了 single-spa 没解决的一些问题，是更完善的基于 single-spa 我们一个个来看一下： 加载子应用的资源的方式 用 single-spa 的时候，要在注册的时候指定如何加载子应用： import { registerApplication } from 'single-spa 主流的微前端方案是 single-spa 以及基于 single-spa 的 qiankun： single-spa 实现了路由切换的时候，对子应用的加载、卸载。
1.4K10编辑于 2022-11-11 - 来自专栏京程一灯
用Single-spa 创建基于 React 和 Vue 的微型前端
安装依赖项 安装常规依赖项 npm install react react-dom single-spa single-spa-react single-spa-vue vue 安装 babel 依赖项 "@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-object-rest-spread" ] } 初始化 Single-spa 这一步骤是对你的应用进行注册，用来告诉 single-spa 找到、装载和卸载程序的时机和方法。 single-spa.config.js import { registerApplication, start } from 'single-spa' registerApplication( 如果以后 Single-spa 能够添加处理样板文件和初始项目设置的 CLI 会更好。 如果你需要微前端这种类型的体系结构，那么 Single-spa 无疑是现在最成熟的方法。
2.1K20发布于 2020-10-22 - 来自专栏vivo互联网技术
聊聊微前端的原理和实践
二、single-spa 刚才我们讲了iframe实现微前端的一些弊端，主要原因就是这些应用还是在各自独立的页面内，这就导致了一些天然的限制。 而single-spa微前端方案结合了MPA和SPA的优势，可以在单个页面内集成多个应用，并且是技术栈无关的。 如上图就是采用single-spa实现微前端的整体流程： 资源模块加载器：用来加载子项目初始化资源。 注意：single-spa本身是不支持子应用资源列表的，每个子应用只能将自己所有初始化资源打包到一个入口js中。 五、参考文献 single-spa qiankun 可能是你见过最完善的微前端解决方案
2.5K30发布于 2020-07-27 - 来自专栏WflynnWeb
微前端从singleSpa到qiankun
即我们采用的方案是Single-SPA来完成的我们的一体化前端大项目方案落地 什么是 single-spa? single-spa是一个在前端应用程序中将多个javascript microfrontend集合在一起的框架。 参数如下： // appName: 子项目名称 // applicationOrLoadingFn: 子项目注册函数，用户需要返回 single-spa 的生命周期对象。 后面我们会介绍single-spa的生命周期机制 // activityFn: 回调函数入参 location 对象，可以写自定义匹配路由加载规则。 // single-spa-config.js import * as singleSpa from 'single-spa'; //导入single-spa /** * runScript：一个promise
1.6K20编辑于 2022-10-28 - 来自专栏前端框架源码剖析
微前端07 : 对single-spa的路由管理及微应用状态管理的分析
本文就分两大部分，从源码层面分别对single-spa的路由管理和微应用状态管理进行分析。 ” 路由管理机制 路由管理的初始化的主要逻辑 请先浏览流程图： 从流程图中，关于路由管理的初始化，single-spa做了4件事情。 相反，我这里要把single-spa的使用文档中的内容放到这里，相信有助于理解上面源码为什么要这么写。 的路由管理已经有比较深入的理解，下文就进入single-spa的另一个重要主题微应用的状态管理吧。 为了更容易把握single-spa的核心功能，本文会省略对下面两个状态的讲解，也就是本文会涉及到其他10种状态的描述。
1.7K10编辑于 2022-09-27 - 来自专栏源码揭秘
深入浅出微前端
SingleSpa 查看single-spa配置文件rollup.config.js可得知，使用了rollup做打包工具，并采用的system模块规范做输出。 /single-spa，感兴趣可以前往调试。 先新建single-spa/example/index.html文件，使用cdn的形式使用single-spa 原生Demo <! SingleSpa小结 single-spa提供了主应用作为基座，通过路由匹配加载不同子应用的模式。 qiankun qiankun的灵感来自并基于single-spa，有以下几个特点。 简单: 任意 js 框架均可使用。
3.9K10编辑于 2022-02-14 - 来自专栏深度学习与python
基于 Angular 的微前端理念与实践
single-spa frint.js single-spa single-spa 是一个用于前端微服务的 JavaScript 框架，可以用最流行的三个框架 / 库来实现，即 Angular、React 使用 Angular 的微前端项目实例 有了这些基础知识之后，我们在 single-spa 框架的协助下构建一个 Angular 项目的样例，我希望构建一个简单的应用以便于演示。 ": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.5/system/single-spa.min.js" } } </script> <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/<em>single-spa</em>/4.3.5/system <script> System.import('<em>single-spa</em>').then(function (singleSpa) { singleSpa.registerApplication
1.3K20编辑于 2022-11-28 - 来自专栏coding个人笔记
了解一下微前端
早期的微前端解决方案是Single-SPA，核心是实现了路由劫持和应用加载，但是内部的样式和js没有做到隔离，出现冲突。 而基于Single-SPA的qiankun，应该是目前落地微前端的主要选择，解决了Single-SPA的痛点。类似的还有Piral、Luigi等。Qiankun开箱即用，非常简单的实现了微前端。 如果使用Single-SPA，比如vue可以使用single-spa-vue，react可以使用single-spa-react。
65910发布于 2020-08-11 - 来自专栏前端框架源码剖析
微前端05 : 乾坤loadMicroApp方法实现以及数据通信机制分析
我将在后续文章深入到single-spa中讲解整个库的主要逻辑和一些细节，现在我们只需要知道调用mountRootParcel函数会返回可以操作微应用的对象就可以了。 为什么这里loadApp执行完后又调用了一个single-spa的mountRootParcel函数，而该函数返回的还是一个可以包含控制微应用行为的对象，这样做的意义何在呢？ 本文再探讨几个乾坤中一些值得了解的点，对乾坤的分析就暂时告一段落，后面的时间主要投入到single-spa的分析中。 在分析完single-spa后，我们会回过头来对乾坤整个框架的结构进行分析，洞察其中的设计思想。敬请朋友们期待。 好了本文先到这里，敬请朋友们期待我接下来对single-spa进行分析的系列文章。
4.1K10编辑于 2022-09-27 - 来自专栏西岭老湿
微前端架构实战
https://zh-hans.single-spa.js.org/ single-spa：https://single-spa.js.org/ 是一个实现微前端架构的框架。 在 single-spa 框架中有三种类型的微前端应用： single-spa-application / parcel：微前端架构中的微应用，可以使用 vue、react、angular 等框架。 single-spa root config：创建微前端容器应用。 utility modules：公共模块应用，非渲染组件，用于跨应用共享 javascript 逻辑的微应用。 container 应用选择 single-spa root config 组织名称填写 study 组织名称可以理解为团队名称，微前端架构允许多团队共同开发应用，组织名称可以标识应用由哪个团队开发 -- import-map-overrides 可以覆盖导入映射 当前项目中用于配合 single-spa Inspector 调试工具使用.
4.6K00发布于 2021-04-25 - 来自专栏前端技术研究和应用
浅析微前端技术
window 对象，样式会污染其他应用，必须有效的隔离起来子应用路由状态保持能力激活子应用后，浏览器刷新、前进、后退子应用的路由都应该可以正常工作应用间通信的能力应用间可以方便、快捷的通信可以看出 single-spa 下面我们来介绍这些业界流行的方案：流行方案Single-spa从名字上就可以推断出，Single-spa (https://single-spa.js.org/docs/getting-started-overview Single-spa 是微前端领域的先行者，下面介绍的几个框架也是借鉴了它不少设计思路，但由于它本身没有处理 CSS 样式隔离或是 JS 运行时隔离，因此只适合单应用的场景。 QiankunQiankun (https://qiankun.umijs.org/zh) 是一个基于 single-spa 的微前端实现库，但对 single-spa 方案中的痛点进行了完善，主要的完善点 MicroAppMicroApp (https://zeroing.jd.com/) 是京东开发的一种基于 WebComponent 进行渲染的微前端架构，它没有沿袭 single-spa 的思路，而是通过
2K60编辑于 2023-04-14 - 来自专栏海怪的编程小屋
彻底解决 qiankun 找不到入口的问题
早在 qiankun 出来前，已经有一个微前端框架 single-spa 了。 它的思想是：无论 React、Vue 还是 Angular，项目打包最终的产物都是 JS。 然而，single-spa 只提供了生命周期的调度，并没有解决这一系列问题。 既然前人解决不了，后人则可以基于原有框架继续优化，这就是 qiankun。 qiankun 和 single-spa 最大的不同是：qiankun 是 HTML 入口。 这就是为什么微应用的入口文件 main.js 依然需要提供 single-spa 的生命周期回调。 如何找入口 现在我们来聊聊如何找入口的问题。 总结 最后总结一下，qiankun 要找入口是因为要从中拿到生命周期回调，把它们给 single-spa 做调度。
2.9K10编辑于 2022-12-30
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号