Архитектура интерфейса с несколькими отдельными компонентами

Question

Проблема

У меня есть сайт A, написанный на React.

Я хочу рендерить меньшие компоненты React на сайт A всякий раз, когда пользователь переходит на определенную страницу внутри сайта A.

Каждый меньший компонент React живет в своем собственном репозитории, как и сайт A.

Вопрос

Как я могу динамически загрузить эти компоненты в сайт A, когда сайт A находится в производстве?

Какой рабочий процесс я могу настроить для локальной разработки меньших компонентов React на сайте A?

---

Я думал об использовании веб-компонентов (https://medium.com/@rchaves/building-microfrontends-part-iii-public-path-problem-1ce823be24c9) но я не хочу, чтобы компоненты уже были развернуты где-то, а просто загружал эти компоненты с сервера. Предпочтительно было бы решение, где я мог бы настроить что-то в своем конвейере, чтобы указать на репозитории, где существуют меньшие компоненты, и упаковать ихвместе с сайтом Код в один пакет всякий раз, когда создается какой-либо компонент.

Это также поднимает другую проблему загрузкиng одни и те же зависимости многократно (например, React, React DOM) из-за упаковки различных проектов.

В других случаях возможно использование модулей npm, iframes и т. д.

Answer 1

У меня была похожая проблема с моим собственным проектом, и я обнаружил, что подмодули git работают очень хорошо.

Другой способ, который я рассмотрел и может оказаться полезным, этоиспользуйте приватный пакет npm со всеми вашими меньшими компонентами.

Answer 2

Если вам нужна полная изоляция между основным приложением и меньшими компонентами, iframes - это путь, поскольку они могут гарантировать, что каждый компонент может иметь свои собственные версии и зависимости React.

Если вам нужно поделитьсяданные / взаимодействие между этими компонентами и основным приложением, а затем добавление его в качестве зависимости npm - один из способов.Но для этого потребуются единые версии фреймворка для всех компонентов.Или вы можете попробовать веб-компоненты.