С помощью федерации модулей Webpack выбирайте, что вы открываете из своих микро-интерфейсов.

Микро-интерфейсы - это автономные, независимо развертываемые приложения, имеющие собственный цикл разработки, которые все еще объединяются для общего блага.

Если вы хотите узнать больше о том, что такое микро-интерфейсы. Я рекомендую прочитать это.



Микро-интерфейсы в действии
Давайте реализуем приложение, составляющее MFE, построенное на React и Angular medium.com



Объединение модулей позволяет приложениям JavaScript динамически загружать часть или строительный блок из другого приложения. При этом, если удаленному модулю нужна зависимость, ее тоже можно загрузить.

Звучит знакомо? Мы уже делали это с модулями узлов, но основным моментом здесь является динамическая загрузка, которую вносит объединение модулей Webpack. Вы сами решаете, когда загружать требуемый компонент и загружать только тот фрагмент, в котором он есть. Удивительный! Правильно?

Кроме того, важно отметить, что вы не загружаете весь пакет, сгенерированный другим приложением, а просто загружаете необходимый компонент.

Поскольку приложение потребителя / хоста - это всего лишь одна монолитная сборка Webpack, такие преимущества, как встряхивание дерева, совместное использование зависимостей и уменьшение дублирования кода; встают на место по умолчанию.

Для простоты разговора давайте создадим одно приложение, которое предоставляет только один компонент в качестве интегрированного модуля. Назовем это приложение удаленным. Другому приложению под названием «хост» необходимо загрузить этот компонент из удаленного приложения.

Приведенный выше фрагмент кода доступен по адресу



Пример здесь довольно простой. Существует удаленное приложение, которое предоставляет компонент под названием Greet как интегрированный модуль, используя параметр exposes, объявляя его зависимости как готовые. Здесь вы можете сделать гораздо больше, поскольку удаленное приложение может также сказать, что мне нужна конкретная версия зависимости.

В хост-приложении вы объявляете удаленный хост с помощью параметра удаленные и даете ему имя, здесь мы просто называем его удаленным. Вы можете выбрать загрузку модулей удаленного приложения по запросу посредством такой отложенной загрузки.

Если вы запустите удаленное и хост-приложения, вы увидите, что хост-приложение лениво загружает фрагмент удаленного приложения, в котором есть компонент Greet.

Хотя этот пример очень простой, но он открывает множество возможностей с точки зрения совместного использования динамических модулей. Более того, это не ограничивается рендерингом на стороне клиента, он также работает с рендерингом на стороне сервера. Хотя это было моей отправной точкой, чтобы начать использовать федерацию модулей, все же есть над чем подумать:

  • Как мы управляем конфликтами зависимостей в крупномасштабных взаимозависимых приложениях?
  • Как лучше поддерживать управление версиями в больших масштабах?
  • Было бы сложно управлять опциями «нетерпеливый» и «синглтон», если бы у приложений был собственный жизненный цикл. Здесь я говорю о приложении, которое может быть хостом или удаленным в зависимости от необходимости. Такие приложения называются Двунаправленными хостами.

Должны прочитать





Исправление проблем



Заключение

Хотя это кажется очень впечатляющим и то, что пока не удавалось сделать так легко. Использование объединения модулей в больших масштабах в производстве может быть непростым делом, пока мы лучше не разберемся с управлением версиями и конфликтами зависимостей. Престижность Заку Джексону за его изобретение. Да здравствует модульная федерация!

Больше контента на plainenglish.io