@ambit_tsai/m-app
v1.0.0-beta.10
Published
A micro app container component, it's as easy as iframe, and beyond the limitation of iframe
Downloads
25
Maintainers
ambit_tsaiReadme
<m-app>
可能是你见过最简单的微前端解决方案，一行代码即可实现应用的接入 😎
<m-app entry="http://example.com/path/to/entry.html"></m-app>体验一下，并且可以在线接入你的应用 🎉
- Gitee Pages
- GitHub Pages
📃 简介
<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
- 邮箱: [email protected]