一Micro-App
基座应用 react "@micro-zoe/micro-app": "^1.0.0-rc.24",
"dependencies": {
"@micro-zoe/micro-app": "^1.0.0-rc.24",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^13.5.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-router-dom": "^7.4.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import microApp from "@micro-zoe/micro-app";
microApp.start();
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
app.js
import { BrowserRouter, Link, Routes, Route } from "react-router-dom";
import Page1 from "./page-1";
import Page2 from "./page-2";
function App() {
return (
<div className="App">
<BrowserRouter>
<Link to="/react">react项目</Link>
<Link to="/vue">vue项目</Link>
<Routes>
<Route path="/react/*" element={<Page1></Page1>}></Route>
<Route path="/vue/*" element={<Page2></Page2>}></Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
然后就是子应用的引入 Page1 -react项目
export default function page1() {
return (
<div>
<h1>react项目</h1>
<micro-app name="app1" url="http://localhost:8081" baseroute="/react" />
</div>
);
}
Page2 -vue项目
export default function page2() {
return (
<div>
<h1>vue项目</h1>
<micro-app name="app2" url="http://localhost:8080" baseroute="/vue" />
</div>
);
}
Micro-App (微应用) 框架简介
Micro-App 是一款基于 WebComponent (Shadow DOM 和 Custom Elements) 标准的微前端框架。它旨在解决微前端在不同框架（React, Vue, Angular 等）混合使用时可能遇到的问题，并提供开箱即用的解决方案。
核心理念和特点：
-
基于 WebComponent： 这是 Micro-App 最核心的特点和优势。它利用浏览器原生的 WebComponent 标准来创建沙箱环境。
- Shadow DOM： 用于样式隔离，确保子应用的样式不会污染基座，也不会相互污染。
- Custom Elements： 用于生命周期管理，每个微应用都被包裹在一个自定义元素中，易于挂载、卸载和管理。
- 真正的沙箱隔离： 相较于一些基于 JavaScript 劫持的沙箱，WebComponent 提供的是浏览器原生级别的隔离，理论上更稳定、性能更好。
-
零成本接入：
- Micro-App 强调“零接入成本”，这意味着它对子应用的代码侵入性很小。子应用无需修改打包方式、无需改造运行时代码，可以直接作为微应用加载。
- 这对于旧项目改造或快速集成现有应用非常有吸引力。
-
支持多种框架混合：
- 无论是 React、Vue、Angular、jQuery 还是原生 JavaScript，Micro-App 都可以很好地支持它们作为微应用在基座中运行。
-
功能丰富： 提供了微前端所需的核心功能：
- 路由隔离： 保证基座和子应用的路由独立，互不影响。
- JS 隔离： 使用 WebComponent 的沙箱特性，隔离全局变量。
- CSS 隔离： 利用 Shadow DOM 提供天然的样式隔离。
- 通信机制： 支持基座与子应用、子应用与子应用之间的数据通信。
- 生命周期管理： 提供了微应用的加载、挂载、卸载等生命周期钩子。
-
性能优化：
- 利用 WebComponent 的原生能力，减少了 JavaScript 劫持带来的性能损耗。
- 支持预加载、按需加载等策略。
