Слияние кода завершено, страница обновится автоматически
Возможно, это самое простое решение для микрофронтенда, которое вы видели. Всего одна строка кода — и ваше приложение подключено 😎
<m-app entry="http://example.com/path/to/entry.html"></m-app>
Попробуйте и подключите своё приложение 🎉
<m-app> размещает дерево DOM микроприложения в Shadow DOM для обеспечения независимости дерева DOM и изоляции CSS, а код JavaScript выполняется в однородном 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>
├─...
<iframe>.type="module" и defer и async для тега <script>.npm i -S @ambit_tsai/m-app
import '@ambit_tsai/m-app';
или
<script src="path/to/m-app.js"></script>
Для получения дополнительной информации см. Wiki.
Компания «Гаодинг» ищет сотрудников! 👇Свяжитесь со мной для внутреннего продвижения или порекомендуйте друзьям, которые в этом нуждаются.
（🔓 Свяжитесь со мной, чтобы узнать больше）
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )