使用React搭建single-spa

已于 2024-03-23 16:36:46 修改
阅读量372 收藏
点赞数 3
文章标签： react.js 前端 前端框架
于 2024-03-23 16:11:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33715850/article/details/136967956
版权

自己搭建的Demo 

GitHub - ftao123/single-spa-react-demo: single-spa-react-demo

修改子应用的webpack配置

library: "app2"和libraryTarget: "umd"配置必须添加。

可以看到filename在开发环境下的地址是static/js/bundle.js，所以我们主应用在注册子应用时候，也是要加载这个地址

头像为自己开发微信小程序
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nginx部署前端 访问其他被拦截_微前端框架 之 singlespa 从入门到精通
weixin_39965673的博客
11-26 1286
来源：李永宁https://juejin.im/post/6862661545592111111前序目的会使用single-spa开发项目，然后打包部署上线刨析single-spa的源码原理手写一个自己的single-spa框架过程编写示例项目打包部署框架源码解读手写框架关于微前端的介绍这里就不再赘述了，网上有很多的文章，本文的重点在于刨析微前端框架single-spa的实现原理。s...
「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题
QCJay的博客
04-05 1965
介绍微前端 single-spa 项目过程中，遇到的 Vue 子应用和 React 子应用路由跳转问题，及实际项目中的解决方案。
使用 Single-SPA 从零开始搭建 React 微前端项目
weixin_43491820的博客
03-21 690
在这篇博客中，我们将探讨如何使用Single-SPA从零开始搭建一个React微前端项目，该项目将包含三个不同的子应用。我们将使用Webpack包管理工具和yarn来管理依赖关系，并使用Single-SPA技术来集成和协调不同的子应用。
微前端解决方案初探 02 微前端框架 single-spa
皮蛋很白的博客
01-25 1772
single-spa 概述 single-spa 是一个实现微前端架构的框架。 在 single-spa 框架中有三种类型的微前端应用： single-spa application / parcel：微前端架构中的微应用，可以使用 vue、react、angular 等框架。 single-spa Application 和路由相关联的，根据路由决定访问哪个微应用。 single-spa Parcel 的使用方式和前者一样，区别是这种类型的微应用不和路由进行关联，它主要是用于跨应用共享 UI 组件的
微前端架构实战中-single-spa篇
西岭老湿 的博客
04-26 1342
single-spa：https://zh-hans.single-spa.js.org/ 是一个实现微前端架构的框架。在 single-spa 框架中有三种类型的微前端应用：single...
微前端方案 qiankun 只是更完善的 single-spa
小生方勤
11-24 401
一个前端应用能够单独跑，也能被作为一个模块集成到另一个应用里，这种架构方式就叫做微前端。它在前端领域能解决一些特定的问题：中后台系统中，有一些别的技术栈开发的历史模块，但是希望能够在另一个应用集成进来saas 类的前端应用，业务比较复杂，可能模块很多，希望能拆分成多个应用独立维护，也能够集成到一起跨技术栈的应用集成、大的项目拆分成独立的小项目，这些是微前端解决的典型问题。微前端的实现方案有很多，比...
react-single-spa parcel使用
岑如花
11-01 449
从官方文档看 parcel仍然是一个application，只是使用场景有所区别 官方链接 以下是使用方式， 第一步：先按照官方文档说明创建一个rootconfig 第二步，按照官方文档说明创建一个application（以下称为app1） 第三步，按照官方文档说明创建一个parcel(仍然是一个application,以下称为app2) 第四步，将app1注册到rootconfig 第五步，app2添加到importmap中 rootconfig中index.ejs中的importmap的配置 &l
qubix:使用create-react-app创建微前端
04-30
标题中的“qubix”是一个基于Create-react-app的工具，用于构建微...在实际使用中，开发者需要了解如何配置和调用qubix提供的功能，以及如何与其他微前端框架（如single-spa、qiankun等）配合使用，以达到最佳效果。
react-一款快速构建reactspa的脚手架工具
08-15
React是一款由Facebook开发的开源JavaScript库，用于构建用户界面，特别是单页应用程序（Single-Page Applications，SPA）。React脚手架工具则是为了简化React项目的初始化和构建过程，它提供了预配置的开发环境和...
Single-Page-App-React-Flux
05-11
标题“Single-Page-App-React-Flux”揭示了我们正在探讨的是一个基于React和Flux架构的单页面应用程序（SPA）。这个项目利用了一系列现代前端技术，包括Node.js、Atomic CSS (Atomizer)、Less.js以及构建工具Grunt。...
react-使用ReactVue和Singlespa构建微前端MicroFrontends
08-15
使用React，Vue和Single-spa构建微前端(Micro Frontends)
single-spa的demo,微前端的最佳方案,可以实现多种代码框架共存
09-23
single-spa的demo微前端的最佳方案,可以实现多种代码框架共存
react-react入门架手架搭建reactreactrouter40redux
08-15
如果你的项目是“react-redux-spa-master”，那么这个项目可能已经包含了这些框架的集成。 创建项目后，你需要在`index.js`或`App.js`中引入并配置React Router。例如，你可以创建一个`<Router>`组件，并在其内部...
react-skeleton-scenes:我自己的 SPA PWA React样板
05-29
总的来说，React Skeleton Scenes提供了一个起点，帮助开发者快速搭建具备SPA和PWA功能的React应用，同时也展示了如何使用TIDE工具链优化开发流程。通过深入理解React、SPA、PWA以及场景化的架构设计，你可以在项目...
前端微服务化解决方案2 - Single-SPA
小飞侠的博客
05-06 4680
微前端MicroFrontend前端架构 技术选型 经过各种技术调研我们最终选择的方案是基于Single-SPA来实现我们的前端微服务化. Single-SPA 一个用于前端微服务化的JavaScript前端解决方案 使用Single-SPA之后,你可以这样做: (兼容各种技术栈)在同一个页面中使用多种技术框架(React, Vue, AngularJS, Angu...
react spa 骨架屏_使用单spa和React实现Micro Frontends
weixin_26750481的博客
09-08 641
react spa 骨架屏single-spa is a library that enables you to implement micro front-end architecture by providing a package that mounts and unmounts a piece of your front-end application in a framework-agn...
前端微服务框架single-spa
joyerz的博客
07-07 9374
前端微服务框架single-spajavascript（前端）微服务架构概况使用sing-spa会有多困难？ javascript（前端）微服务 single-spa是一个可以让使用多个使用javascript语言框架的构建的应用集成在一起的框架, 使用signle-spa架构可以带来一下好处： 在同一个页面下使用多个框架可以实现无刷新（react/vue/angluar/ember或其他） 单...
Single-Spa 实践（上） -- 子应用在相同目录下
进击的程序猿
12-03 715
Single-Spa 实践（上） – 子应用在相同目录下 基于 single-spa 来搭建一个 react 的微前端应用，主应用以及子应用都在同一个个目录下，即下方的 micro-front 下 Step 1 新建一个目录，并初始化 mkdir mirco-front && cd micro-front npm init -y Step 2 增加 webpack 配置 怎么简单怎么来，因为后面我们是用的 react，并且是用 CRA 来创建的子应用，所以这个 webpack 的基本配
react 使用react-viewer --save
最新发布
05-25
react-viewer 是一个基于 React 的图片浏览器组件，可以在网页中实现图片的预览和放大缩小等功能。如果你想在自己的项目中使用 react-viewer，可以通过以下命令来安装： ``` npm install react-viewer --save ``` 安装完成后，在需要使用的组件中引入即可，例如： ```javascript import ReactViewer from 'react-viewer'; <ReactViewer visible={this.state.visible} onClose={() => { this.setState({ visible: false }); }} images={[{ src: 'http://example.com/1.jpg', alt: '图片1' }, { src: 'http://example.com/2.jpg', alt: '图片2' }]} /> ``` 其中，`visible` 表示图片浏览器是否可见，`onClose` 是关闭图片浏览器的回调函数，`images` 是需要浏览的图片数组。具体的参数和用法可以查看 react-viewer 的文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值