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

微前端-MicroApp

news 2025/10/21 9:08:44

微前端即是由一个主应用来集成多个微应用（可以不区分技术栈进行集成）
下面是使用微前端框架之一 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…...

编程日记 2024/11/30 2:19:39

Unity UGUI 垂直循环复用滚动

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

编程日记 2024/11/30 2:18:38

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

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

编程日记 2024/11/30 2:17:37

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

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

编程日记 2024/11/30 2:15:34

Three.js CSS2D/CSS3D渲染器

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

编程日记 2024/11/30 2:13:32

mongodb文档字符串批量替换

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

编程日记 2024/11/30 2:10:29

前端安全和解决方案

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

编程日记 2024/11/30 2:08:27

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…...

编程日记 2024/11/30 2:07:26

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

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

编程日记 2024/11/30 2:02:21

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

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

编程日记 2024/11/30 2:00:17

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

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

编程日记 2024/11/30 1:58:15

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

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

编程日记 2024/11/30 1:56:13

Java中的“多态“详解

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

编程日记 2024/11/30 1:55:13

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

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

编程日记 2024/11/30 1:49:04

ASP.NET Core 入门

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

编程日记 2024/11/30 1:48:03

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

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

编程日记 2024/11/30 1:47:02

题目 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)…...

编程日记 2024/11/30 1:45:59

算法——赎金信（leetcode383）

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

编程日记 2024/11/30 1:44:58

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

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

编程日记 2024/11/30 1:43:57

微软企业邮箱：安全可靠的企业级邮件服务！

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

编程日记 2024/11/30 1:40:54

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/10/16 0:30:44

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/10/11 3:06:19

「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

编程新知 2025/8/21 16:28:18

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

编程新知 2025/6/10 21:26:51

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

编程新知 2025/10/19 8:51:50

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

编程新知 2025/10/16 17:11:24

js 设置3秒后执行

如何在JavaScript中延迟3秒执行操作 在JavaScript中&#xff0c;要设置一个操作在指定延迟后&#xff08;例如3秒&#xff09;执行&#xff0c;可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法&#xff0c;它接受两个参数&#xff1a; 要执行的函数&…...

编程新知 2025/10/1 20:54:35

【1】跨越技术栈鸿沟：字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…...

编程新知 2025/10/11 0:08:51

13.10 LangGraph多轮对话系统实战：Ollama私有部署+情感识别优化全解析

LangGraph多轮对话系统实战：Ollama私有部署+情感识别优化全解析 LanguageMentor 对话式训练系统架构与实现 关键词：多轮对话系统设计、场景化提示工程、情感识别优化、LangGraph 状态管理、Ollama 私有化部署 1. 对话训练系统技术架构 采用四层架构实现高扩展性的对话训练…...

编程新知 2025/10/4 1:16:13