当前位置: 首页 > news >正文

微前端-MicroApp

微前端即是由一个主应用来集成多个微应用(可以不区分技术栈进行集成)
下面是使用微前端框架之一 MicroApp 对 react微应用 的详细流程
 

第一步

创建主应用my-mj-app
利用脚手架 npx create-react-app my-mj-app 快速创建
安装 npm install --save react-router-dom  路由
npm run start  启动  localhost:3000
 

第二步

创建微应用reactapp1
利用webpack构建
 

//初始化项目
npm init -y
//安装核心库
npm install react react-dom
//webpack打包工具
npm install --save-dev webpack webpack-cli webpack-dev-server
//Babel:用于将 JSX 和 ES6 代码转换成兼容浏览器的 JavaScript 代码。
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
//HTML 插件:自动生成 HTML 文件并自动引入打包后的 JavaScript 文件。
npm install --save-dev html-webpack-plugin

配置Babel
根目录下创建一个 .babelrc 文件

{"presets": ["@babel/preset-env", // 转换 ES6+[// 转换 JSX"@babel/preset-react",{"runtime": "automatic" // 使用 React 17+ 的 JSX 转换方式}]]
}

配置Webpack
根目录下创建一个 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.jsx', // 项目入口文件output: {filename: 'bundle.js', // 输出的文件名path: path.resolve(__dirname, 'dist'), // 输出的目录},resolve: {extensions: ['.js', '.jsx'] // 引入文件时不用写后缀},module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: {loader: 'babel-loader'}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html' // 模板文件})]
};

创建React组件
在 src 目录下,创建 index.jsx 和 App.jsx
src/index.jsx
 

import { createRoot } from 'react-dom/client';
import App from './App';const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

src/App.jsx

function App() {return <div>Hello, React!</div>;
}export default App;

src/index.html
 

<!DOCTYPE html>
<html><head><title>React App</title></head><body><div id="root"></div></body>
</html>

修改package.json

"scripts": {"start": "webpack serve --open --mode development","build": "webpack --mode production"
}

npm start

npm run build

至此完成了一个基础的 React + Webpack 项目的搭建


第三步

有了主应用和子应用(可以有多个不同技术栈应用),开始接入MicroApp微服务

主应用配置
安装依赖 npm i @micro-zoe/micro-app --save
初始化micro-app 

// index.js
import microApp from '@micro-zoe/micro-app'
microApp.start()

嵌入第一个子应用

function AppChild(){return <div><h1>我是主应用</h1><h1>子应用👇</h1><micro-app name='reactapp1' url='http://localhost:8080/'></micro-app></div>
}
export default AppChild;

子应用配置
设置跨域支持

//webpack.config.jsdevServer: {headers: {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS','Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',},},

注册卸载函数

// index.js
window.unmount = () => {ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}

第四步

下面利用craco嵌入第二个子应用
还是先创建微应用reactapp2
利用脚手架 npx create-react-app reactapp2 快速创建
利用craco(Create React App Configuration Override)配置webpack

craco 是一个用于扩展 Create React App(CRA)的工具,CRA 是一个用于快速搭建 React 应用的脚手架工具。CRA 提供了一个简单的项目结构和配置,使得开发者可以快速开始一个 React 项目的开发。
然而 CRA 的配置是被隐藏的,开发者无法对其进行自定义和扩展。这就是 craco 出现的原因。craco(Create React App Configuration Override) 允许开发者覆盖和扩展 CRA 的配置,以满足更复杂的项目需求。
使用 craco,开发者可以在不弹出 CRA 的配置的情况下,修改 webpack 配置、babel 配置、ESLint 配置、devServer配置 等。craco 提供了一种简单的方式来覆盖 CRA 的默认配置,同时保留了 CRA 的简洁性和易用性。
通过 craco,开发者可以使用自定义的 webpack 插件、babel 插件 和 其他工具,以满足项目的特定需求。例如:可以添加自定义的 webpack loader,配置自定义的 babel preset 或 plugin,或者修改 webpack 的输出路径等。

 npm i -D @craco/craco


修改 package.json 文件中 scripts 配置的 react-scripts 替换为 craco

"scripts": {
-   // "start": "react-scripts start",
-   // "build": "react-scripts build",
-   // "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test","eject": "react-scripts eject"
}

根目录创建 craco.config.js 配置文件,可以理解为 Vue 项目中外抛的 vue.config.js。
 

const path = require("path");
const { CracoAliasPlugin } = require("react-app-rewire-alias");module.exports = {// 跨域配置devServer: {port: 8090,proxy: {'/api': {target: 'https://localhost:8080',changeOrigin: true,pathRewrite: {'^/api': ''}}},headers: {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS','Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',},// ...},// webpack 配置webpack: {// 配置内容},// 配置别名plugins: [// 配置内容],
};

更改主应用配置 嵌入第二个子应用
 

function AppChild(){return <div><h1>我是主应用</h1><h1>第一个子应用👇</h1><micro-app name='reactapp1' url='http://localhost:8080/'></micro-app><h1>第二个子应用👇</h1><micro-app name='reactapp2' url='http://localhost:8090/'></micro-app></div>
}
export default AppChild;

集成后效果图如下

 

 

 至此利用MicroApp集成主应用微应用集成完毕,更多应用配置可以查询官方文档
MicroApp官网
https://micro-zoe.github.io/doc/zh/
craco  中文文档
https://developer.aliyun.com/article/1397201

相关文章:

微前端-MicroApp

微前端即是由一个主应用来集成多个微应用&#xff08;可以不区分技术栈进行集成&#xff09; 下面是使用微前端框架之一 MicroApp 对 react微应用 的详细流程 第一步 创建主应用my-mj-app 利用脚手架 npx create-react-app my-mj-app 快速创建 安装 npm install --save rea…...

Unity UGUI 垂直循环复用滚动

一 基础类 在unity里面新建这几个类 using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; /// <summary> /// 垂直方向滚动 /// </summary> public class CustomScroll:MonoBehaviour {public …...

Spring MVC 深度剖析:优势与劣势全面解读

文章目录 Spring MVC 优势1. **松耦合**2. **易于测试**3. **灵活性**4. **强大的配置机制**5. **异常处理**6. **国际化支持**7. **数据验证**8. **安全性**9. **性能优化** Spring MVC 劣势1. **学习曲线**2. **配置复杂性**3. **性能开销**4. **视图技术限制**5. **社区和支…...

力扣hot100-->前缀和/前缀书/LRU缓存

前缀和 1. 560. 和为 K 的子数组 中等 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2示例 2&#…...

Three.js CSS2D/CSS3D渲染器

在Three.js开发过程中&#xff0c;有时需要将 HTML 元素与 Three.js 渲染的 3D 场景相结合&#xff0c;这就需要用到 CSS2DRenderer 和 CSS3DRenderer。本文将详细介绍这两种渲染器的原理及其应用 一、CSS2DRenderer 渲染器 概述 CSS2DRenderer 渲染器用于在 3D 场景中渲染纯…...

mongodb文档字符串批量替换

【mongodb文档字符串批量替换脚本语句】 前言&#xff1a; 1、本方式对于数据量大的情况不适用&#xff0c;执行可能比较慢&#xff1b; 2、数据量大的情况&#xff0c;个人推荐代码层面解决&#xff0c;多线程替换更快&#xff1a; &#xff08;1&#xff09;写实体类的方式…...

前端安全和解决方案

提到这个我可能想到的就是不要暴露太多的账号密码信息。一些页面的请求和操作要加上权限。 然后下面就详细的介绍前端可能遇到的安全问题以及解决方法。 首先比较常见的前端的安全性问题就是跨站脚本攻击&#xff08;XSS&#xff09;。跨站请求伪造&#xff08;csrf&#xff…...

Tlias智能辅助学习系统-部门管理

包括查询、新增、删除、修改功能 控制层 package com.itheima.controller;import com.itheima.pojo.Dept; import com.itheima.pojo.Result; import com.itheima.service.DeptService; import lombok.extern.slf4j.Slf4j; import lombok.extern.slf4j.XSlf4j; import org.spr…...

React第十节组件之间传值之context

1、Context 使用creatContext() 和 useContext() Hook 实现多层级传值 概述&#xff1a; 在我们想要每个层级都需要某一属性&#xff0c;或者祖孙之间需要传值时&#xff0c;我们可以使用 props 一层一层的向下传递&#xff0c;或者我们使用更便捷的方案&#xff0c;用 creatC…...

flink中barrier不对齐的原因和影响

Barrier 不对齐&#xff08;Barrier Misalignment&#xff09;可能导致一些性能和一致性相关的问题&#xff0c;但 Flink 提供了机制来确保即使在不对齐的情况下&#xff0c;也可以保证数据的一致性。 1. 什么是 Barrier 不对齐&#xff1f; Barrier 不对齐是指在分布式数据流…...

软银集团孙正义再度加码OpenAI,近屿智能专注AI人才培养

11月28日凌晨&#xff0c;全球最大财经CNBC报道&#xff0c;软银集团创始人兼CEO孙正义再次向人工智能领域的领军企业OpenAI投资了15亿美元。软银对OpenAI的投资已不是首次。就在上个月&#xff0c;软银已在OpenAI的上一轮融资中注入了5亿美元的资金。但他一直寻求获得OpenAI更…...

麒麟系统x86安装达梦数据库

一、安装准备前工作 操作系统&#xff1a;银河麒麟V10&#xff0c;CPU&#xff1a; x86_64 架构 下载地址&#xff0c;麒麟官网&#xff1a;https://www.kylinos.cn/ 数据库&#xff1a;dm8_20220915_x86_kylin10_64 下载地址&#xff0c;达梦数据库官网&#xff1a;https://…...

Java中的“多态“详解

多态&#xff08;Polymorphism&#xff09;是面向对象编程&#xff08;OOP&#xff09;中的一个核心概念&#xff0c;它允许同一个接口或方法在不同对象上具有不同的实现方式。多态性使得程序在运行时可以根据对象的实际类型来决定调用哪个方法&#xff0c;从而提高代码的灵活性…...

buuctf-[SUCTF 2019]EasySQL 1解题记录

把你的旗帜给我&#xff0c;我会告诉你这面旗帜是对的。 堆叠注入查询数据库 1; show databases; ​ 查询表名 1; show tables; 获取flag 1;set sql_modepipes_as_concat;select 1...

ASP.NET Core 入门

使用 .NET CLI 创建并运行 ASP.NET Core Web 应用。 文章目录 一、先决条件二、创建Web应用项目三、运行应用四、编辑Razor页面 一、先决条件 .NET 8.0 SDK 二、创建Web应用项目 打开命令行界面&#xff0c;然后输入以下命令&#xff1a; dotnet new webapp --output aspne…...

php反序列化1_常见php序列化的CTF考题

声明&#xff1a; 以下多内容来自暗月师傅我是通过他的教程来学习记录的&#xff0c;如有侵权联系删除。 一道反序列化的CTF题分享_ctf反序列化题目_Mr.95的博客-CSDN博客 一些其他大佬的wp参考&#xff1a;php_反序列化_1 | dayu’s blog (killdayu.com) 序列化一个对象将…...

题目 1013: [编程入门]Sn的公式求和

题目 1013: [编程入门]Sn的公式求和 [编程入门]Sn的公式求和 求Snaaaaaa…aa…aaa&#xff08;有n个a&#xff09;之值&#xff0c;其中a是一个数字&#xff0c;为2。 例如&#xff0c;n5时222222222222222&#xff0c;n由键盘输入。 #include<stdio.h> int A(int n)…...

算法——赎金信(leetcode383)

题目&#xff1a; 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 示例 1&#…...

transformers训练(NLP)阅读理解(多项选择)

简介 在阅读理解任务中&#xff0c;有一种通过多项选择其中一个答案来训练机器的阅读理解。比如&#xff1a;给定一个或多个文档h,以及一个问题S和对应的多个答案候选&#xff0c;输出问题S的答案E&#xff0c;E是答案候选中的某一个选项。 这样的目的就是通过文档&#xff0c…...

微软企业邮箱:安全可靠的企业级邮件服务!

微软企业邮箱的设置步骤&#xff1f;如何注册使用烽火域名邮箱&#xff1f; 微软企业邮箱作为一款专为企业设计的邮件服务&#xff0c;不仅提供了高效便捷的通信工具&#xff0c;更在安全性、可靠性和功能性方面树立了行业标杆。烽火将深入探讨微软企业邮箱的多重优势。 微软…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

STM32标准库-ADC数模转换器

文章目录 一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”&#xff1a;输入模块&#xff08;GPIO、温度、V_REFINT&#xff09;1.4.2 信号 “调度站”&#xff1a;多路开关1.4.3 信号 “加工厂”&#xff1a;ADC 转换器&#xff08;规则组 注入…...

2025.6.9总结(利与弊)

凡事都有两面性。在大厂上班也不例外。今天找开发定位问题&#xff0c;从一个接口人不断溯源到另一个 接口人。有时候&#xff0c;不知道是谁的责任填。将工作内容分的很细&#xff0c;每个人负责其中的一小块。我清楚的意识到&#xff0c;自己就是个可以随时替换的螺丝钉&…...