可能是你见过最简单的微前端解决方案,一行代码即可实现应用的接入 😎
<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]