Skip to content

📦 微应用容器组件,对 DOM、CSS、JS 进行硬隔离,达到真正的技术栈无关,并且运行时集成,微应用可独立开发、部署、升级。使用如 iframe 般简便,却超脱 iframe 的局限,你值得一试!

License

Notifications You must be signed in to change notification settings

ambit-tsai/m-app

Repository files navigation

<m-app>

可能是你见过最简单的微前端解决方案,一行代码即可实现应用的接入 😎

<m-app entry="http://example.com/path/to/entry.html"></m-app>

体验一下,并且可以在线接入你的应用 🎉

  1. Gitee Pages
  2. 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>
                             ├─...

✨ 特性

  1. 对 DOM、CSS、JS 进行硬隔离,实现真正的技术栈无关
  2. 微应用与基座应用的 UI 可以完美融合,无 <iframe> 的窗口隔离问题
  3. 运行时集成,微应用可独立开发、部署、升级
  4. 支持多应用同时接入
  5. 支持 <script>type="module"deferasync 等特性
  6. HTML Entry,符合一般应用的开发方式,无需改造

⬇️ 安装

npm i -S @ambit_tsai/m-app

🔨 使用

import '@ambit_tsai/m-app';

或者

<script src="path/to/m-app.js"></script>

更多信息请查看 Wiki

🎉 招聘

稿定科技招人啦 👇联系我可内推,或是推荐给需要的朋友

  1. 地点:厦门、深圳、杭州
  2. 职位:前端、后端、SRE工程师、产品、测试、UI设计、运营、市场 ...
  3. 福利:双休、弹性上下班、六险一金、餐补、MacBook、人体工学椅、班车、零食供应 ...

(🔓联系我解锁更多信息)

☎️ 联系

  1. 微信: cai_fanwei
  2. QQ: 854521460
  3. QQ群: 663286147
  4. 邮箱: [email protected]

About

📦 微应用容器组件,对 DOM、CSS、JS 进行硬隔离,达到真正的技术栈无关,并且运行时集成,微应用可独立开发、部署、升级。使用如 iframe 般简便,却超脱 iframe 的局限,你值得一试!

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published