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

微前端-MicroApp

news 2026/3/26 22:54:08

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

机械扑翼飞鸟机构3D图纸 Solidworks设计

机械扑翼飞鸟机构的设计聚焦于模拟鸟类飞行姿态&#xff0c;通过机械结构的协同运动实现扑翼动作。其核心作用在于将复杂的生物运动转化为可工程化的机械系统&#xff0c;为仿生飞行器研究提供基础支撑。该机构通常由传动系统、扑翼组件及支撑框架构成&#xff0c;传动系统通过…...

编程新知 2026/3/26 22:46:23

SEO_2024年最新SEO趋势与核心优化方法介绍

<h1 id"seo2024seo">SEO:2024年最新SEO趋势与核心优化方法介绍</h1> <p>在互联网时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;仍然是网站流量和品牌推广的关键。2024年&#xff0c;SEO领域有许多新的趋势和核心优化方法&#xff0c;帮…...

编程新知 2026/3/26 22:36:20

论文检测「生死局」破局指南：Paperxie 四大降重方案，精准对抗知网 / 维普 AIGC 检测

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述https://www.paperxie.cn/weight?type1https://www.paperxie.cn/weight?type1 凌晨三点的电脑屏幕前&#xff0c;你盯着知网 AIGC 检测报告上刺眼的「99.8% 疑似度」&#xff0c;指尖冰凉 —— 刚写完的毕…...

编程新知 2026/3/26 22:20:17

在RK3576开发板上手把手编译并运行你的第一个MPP编码程序（含VSCode配置避坑）

在RK3576开发板上从零构建MPP编码开发环境的完整指南 1. 开发环境准备与交叉编译工具链配置 对于嵌入式开发者而言&#xff0c;RK3576开发板的MPP开发环境搭建需要从基础工具链开始。不同于x86平台的开发&#xff0c;我们需要特别注意交叉编译环境的配置细节。 首先需要获取适用…...

编程新知 2026/3/26 21:56:03

OpenClaw快速体验：30分钟玩转Qwen3.5-9B基础自动化

OpenClaw快速体验&#xff1a;30分钟玩转Qwen3.5-9B基础自动化 1. 为什么选择OpenClawQwen3.5组合&#xff1f; 去年冬天第一次接触OpenClaw时&#xff0c;我正被重复性的文件整理工作困扰。作为技术博主&#xff0c;每天需要从十几个渠道收集行业动态&#xff0c;手动归类到…...

编程新知 2026/3/26 21:15:52

用Node.js和request-promise玩转EduCoder API：手把手教你搭建自己的实训答案库

用Node.js构建EduCoder实训数据采集系统的工程实践 在编程教育平台EduCoder上&#xff0c;实训关卡的设计往往需要学习者反复尝试和验证。作为开发者&#xff0c;我们能否通过技术手段实现实训数据的自动化采集与管理&#xff1f;本文将深入探讨如何基于Node.js生态构建一个稳定…...

编程新知 2026/3/26 20:35:47

OpenClaw性能优化：GLM-4.7-Flash长任务链的Token节省技巧

OpenClaw性能优化&#xff1a;GLM-4.7-Flash长任务链的Token节省技巧 1. 问题背景&#xff1a;长任务链的Token消耗困境 上周我尝试用OpenClaw自动化处理一个典型的办公场景&#xff1a;从200页PDF中提取关键数据&#xff0c;整理成Excel表格后发送邮件。整个流程涉及PDF解析…...

编程新知 2026/3/26 20:29:45

F_Record：让Photoshop绘画过程录制变得简单高效的轻量级插件

F_Record&#xff1a;让Photoshop绘画过程录制变得简单高效的轻量级插件 【免费下载链接】F_Record 一款用来录制绘画过程的轻量级PS插件 项目地址: https://gitcode.com/gh_mirrors/fr/F_Record 在数字艺术创作领域&#xff0c;每一笔笔触都承载着创作者的灵感与思考。…...

编程新知 2026/3/26 20:23:44

ChezScheme测试性能优化：从53分钟到8分钟的效率跃迁

ChezScheme测试性能优化&#xff1a;从53分钟到8分钟的效率跃迁 【免费下载链接】ChezScheme Chez Scheme 项目地址: https://gitcode.com/gh_mirrors/ch/ChezScheme 一、痛点分析&#xff1a;串行测试的性能瓶颈 识别测试效率问题 在软件开发迭代过程中&#xff0c;…...

编程新知 2026/3/26 20:09:41

如何用3种方法让Fira Code字体提升你的编码效率？

如何用3种方法让Fira Code字体提升你的编码效率&#xff1f; 【免费下载链接】FiraCode Free monospaced font with programming ligatures 项目地址: https://gitcode.com/GitHub_Trending/fi/FiraCode 还在为代码中的箭头符号显示不清晰而烦恼&#xff1f;是否经常需要…...

编程新知 2026/3/26 19:49:33