1 Star 0 Fork 23

evilemon / m-app

forked from Ambit / m-app 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 2.31 KB
一键复制 编辑 原始数据 按行查看 历史
Ambit 提交于 2021-02-24 16:05 . docs: update the link of img

<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. 微信: ambit_tsai
  2. QQ群: 663286147
  3. 邮箱: ambit_tsai@qq.com
TypeScript
1
https://gitee.com/evilemon/m-app.git
git@gitee.com:evilemon/m-app.git
evilemon
m-app
m-app
main

搜索帮助