Micro Frontends · From Scratch

手写微前端内核

这里把《微前端从入门到精通》文章里的手写实现做成了真实可运行的代码, 且每一处都忠于官方源码的核心机制。三个内核各自可交互验证——看状态机流转、看沙箱隔离、看双容器渲染。 源码带 对应源码文件 注释, 对照官方仓库即可印证。

← 返回样例总导航

1. mini-single-spa 状态机 + reroute 调度

注册两个"子应用"(纯函数模拟), 点击切换路由, 观察 single-spa 的状态机流转: NOT_LOADED → ... → MOUNTED → UNMOUNTING。对应源码 src/navigation/reroute.js。

2. mini-with-sandbox with + Proxy 隔离

在沙箱里执行一段"污染全局"的子应用代码, 验证它写的全局变量不泄漏到真实 window, 卸载后自动清理。对应 micro-app src/sandbox/with/window.ts。

3. mini-wujie iframe + ShadowRoot 双容器

把一个子应用页面加载进"iframe 跑 JS + ShadowRoot 渲染 DOM"的双容器, 子应用的 document.querySelector 实际作用在 ShadowRoot 上。对应 wujie packages/wujie-core/src/proxy.ts。