Module Federation. Микрофронтенды с помощью Webpack

• Плагин Module Federation позволяет создавать микрофронтенды.  

• Пример использования: встраивание одного приложения в другое.  

• Технология похожа на iframe, но используется JavaScript-код.  

• Можно экспортировать только часть кода приложения.  

• Пример: экспорт компонента, блока или кнопки.  

• Создание двух проектов: контейнер и приложение.  

• Установка зависимостей: Vue, Axios, Axios-Server, Axios-Force.  

• Оба приложения будут использовать одинаковые зависимости.  

• Создание файлов package.json и package-lock.json.  

• Настройка режима разработки и порта для контейнера.  

• Приложение будет простым: кнопка и экран.  

• Использование асинхронного импорта для экспорта кода.  

• Создание функции init для инициализации приложения.  

• Запуск приложения через npm start.  

• Проверка работы кнопки в браузере.  

• Создание div для встраивания приложения.  

• Настройка конфигов для Module Federation.  

• Экспорт файла с инструкциями для микрофронтенда.  

• Настройка конфига для контейнера.  

• Экспорт и импорт кода из приложения.  

• Проверка работы кнопки в контейнере.  

• Запуск контейнера и проверка работы кнопки.  

• Преимущества Module Federation: возможность использования кода из разных фреймворков.  

• Приложение можно выложить как npm-пакет и подключить как библиотеку.  

• Обновления происходят на лету, без необходимости перезапуска контейнера.  

• Изменения в первом приложении сразу отражаются в контейнере.  

• Приложения могут обмениваться данными, например, цветом для кнопок.  

• Контейнерное приложение может передавать свойства, такие как цвет фона.  

• Фреймворк позволяет передавать любые значения через экспортируемые функции.  

• Можно использовать плагин-модуль для управления зависимостями.  

• Если в одном приложении используется React, его можно вписать в общую зависимость.  

• Видео не показывает детали, но обещает вернуться к этой теме в будущем.