Настройка приложений React: основного и удалённых

Удалённое приложение добавляет ModuleFederationPlugin в конфигурацию Webpack с тремя ключевыми свойствами: name (уникальный идентификатор, например «buttonApp»), filename («remoteEntry.js» — выходной манифест) и exposes (карта от общедоступного имени к пути исходного файла).

Конфигурация exposes сопоставляет общедоступный путь к модулю с локальным файлом: { './Button': './src/Button' }. Это означает, что хост может импортировать 'buttonApp/Button' и получить компонент из ./src/Button.tsx. Можно предоставлять несколько компонентов, утилит или даже целых страниц.

Свойство shared сообщает Module Federation, какие модули следует сделать общими для хоста и удалённого приложения, а не дублировать. Для React: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. Параметр singleton:true не позволяет одновременно загружать несколько экземпляров.

Конфигурация ModuleFederationPlugin приложения-хоста включает свойство remotes: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. Ключ — это пространство имён импорта, а значение — имя удалённого приложения и его URL, объединённые символом @. Так Webpack узнаёт, откуда получать удалённое приложение во время выполнения.

В коде React хоста импортируйте компонент удалённого приложения с помощью динамического импорта: const Button = React.lazy(() => import('buttonApp/Button')). Путь импорта соответствует пространству имён удалённого приложения и имени предоставленного модуля. React.lazy разделяет код импорта на отдельный фрагмент и загружает его асинхронно.

Поскольку удалённые модули загружаются асинхронно, всегда оборачивайте лениво импортируемый компонент удалённого приложения в границу Suspense: Suspense fallback=Loading... /. Резервное содержимое отображается, пока Module Federation получает remoteEntry.js и фрагмент компонента по URL удалённого приложения.

Хуки React (useState, useContext, useEffect) зависят от одного внутреннего экземпляра React, отслеживающего состояние компонентов. Если и хост, и удалённое приложение загрузят собственную копию React, хуки вызовут ошибки «недопустимый вызов хука». Параметр singleton:true заставляет их совместно использовать один экземпляр React и полностью устраняет этот класс ошибок.

Когда хост использует react@18.2.0, а удалённое приложение — react@18.3.0, общая область Module Federation согласовывает используемую версию. При singleton:true и requiredVersion обычно выбирается более новая версия, если она совместима. Указание requiredVersion: '>=18.0.0' вместо фиксированной версии разрешает гибкие диапазоны версий.

TypeScript не знает о модулях удалённых приложений во время компиляции, поэтому импорты вроде import('buttonApp/Button') без объявлений вызовут ошибки типов. Используйте @module-federation/typescript или вручную создайте файлы .d.ts, объявляющие типы модулей, чтобы обеспечить проверку типов свойств удалённых компонентов.

Запустите оба приложения одновременно: удалённое приложение на порту 3001, а хост — на порту 3000. Откройте хост — его среда выполнения Module Federation получит http://localhost:3001/remoteEntry.js, обнаружит модуль Button, загрузит его фрагмент и отрисует его внутри приложения-хоста как локальный компонент.

В рабочей среде замените localhost:3001 на URL развёрнутого удалённого приложения. Распространённый подход — использовать переменную окружения для URL удалённого приложения, чтобы CI/CD могло подставить правильный URL для каждой среды: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

Почему React должен быть настроен как модуль с единственным экземпляром в общей конфигурации Module Federation?

Для настройки Module Federation необходимо добавить ModuleFederationPlugin и в удалённое приложение (с name, filename и exposes), и в хост (с remotes). Используйте компоненты удалённых приложений через React.lazy и динамический импорт, обёрнутые в Suspense. React и React DOM должны быть общими модулями с единственным экземпляром, чтобы предотвратить ошибки хуков из-за нескольких экземпляров. Объявления TypeScript и URL удалённых приложений через переменные окружения завершают настройку, готовую для рабочей среды.