<m-app>
可能是你见过最简单的微前端解决方案,一行代码即可实现应用的接入
<m-app entry="http://example.com/path/to/entry.html"></m-app>
体验一下,并且可以在线接入你的应用
📃 简介
<m-app> 将微应用的 DOM 树置于 Shadow DOM 中维护,从而实现 DOM 树独立以及 CSS 隔离,而 JavaScript 代码则置于同源 iframe 中运行,由 iframe 提供独立的运行环境。
出于降低改造成本的考虑,微应用的 Shadow DOM 与正常 DOM 的结构保持一致。
微应用的 Shadow DOM 结构:
├─<iframe hidden>
│ ├─<meta>
ShadowRoot─│ ├─<head>─├─<title>
│ │ ├─...
├─<html>─│
│ ├─<h1>
├─<body>─├─<div>
├─...
正常 DOM 结构:
├─<meta>
├─<head>─├─<title>
│ ├─...
Document──<html>─│
│ ├─<h1>
├─<body>─├─<div>
├─...
✨ 特性
- 对 DOM、CSS、JS 进行硬隔离,实现真正的技术栈无关
- 微应用与基座应用的 UI 可以完美融合,无
<iframe>
的窗口隔离问题 - 运行时集成,微应用可独立开发、部署、升级
- 支持多应用同时接入
- 支持
<script>
的type="module"
、defer
、async
等特性 - HTML Entry,符合一般应用的开发方式,无需改造
⬇️ 安装
npm i -S @ambit_tsai/m-app
🔨 使用
import '@ambit_tsai/m-app';
或者
<script src="path/to/m-app.js"></script>
更多信息请查看 Wiki
🎉 招聘
稿定科技招人啦
- 地点:厦门、深圳、杭州
- 职位:前端、后端、SRE工程师、产品、测试、UI设计、运营、市场 ...
- 福利:双休、弹性上下班、六险一金、餐补、MacBook、人体工学椅、班车、零食供应 ...
(
☎️ 联系
- 微信: cai_fanwei
- QQ: 854521460
- QQ群: 663286147
- 邮箱: ambit_tsai@qq.com