可能是你见过最简单的微前端解决方案，一行代码即可实现应用的接入 😎
<m-app entry="http://example.com/path/to/entry.html"></m-app>体验一下，并且可以在线接入你的应用 🎉
m-app 将应用的 DOM 树置于 Shadow DOM 中维护，从而实现 DOM 树独立以及 CSS 隔离。而 JavaScript 代码则置于同源 iframe 中运行，由 iframe 提供独立的运行环境，并劫持 iframe 中 document、document.head、document.body 等元素对象的方法，重定向到 Shadow DOM 中对应的元素上去。此外，还劫持了普通元素上有引入新元素能力的方法，如 appendChild、replaceChild 等，分析其中的 <script> 元素，并置于 iframe 中运行。
m-app 的 Shadow DOM 结构如下：
├─<iframe hidden>
│ ├─<meta>
ShadowRoot─│ ├─<head>─├─<title>
│ │ ├─...
├─<html>─│
│ ├─<h1>
├─<body>─├─<div>
├─...m-app 的 Shadow DOM 与正常的 DOM 结构基本一致，降低应用接入的改造成本。
├─<meta>
├─<head>─├─<title>
│ ├─...
Document──<html>─│
│ ├─<h1>
├─<body>─├─<div>
├─...- 运行时集成，应用可独立开发、部署、升级
- HTML Entry
- 天然支持 DOM、CSS、JS 隔离
- 不限制接入应用的技术栈
- 支持多应用并行
- 支持
<script>的 type="module"、defer、async 等原生特性
npm i -S @ambit_tsai/m-app
import '@ambit_tsai/m-app';或者
<script src="path/to/m-app.js"></script>更多信息请查看 Wiki
- 微信: ambit_tsai
- QQ群: 663286147
- 邮箱: [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent