Как реализовать динамические плагины для SPA на ReactJS?

Question

[asmyasnikov]

Здравствуйте, уважаемые знатоки!

У меня вопрос о динамическом встраивании js-модулей.
Идея следующая. Есть базовый код приложения, написанный на ReactJS. Мне необходим механизм встраивания плагинов (на том же ReactJS) на страницу. Т.е. на скомпилированную webpack'ом страницу в зависимости от некоего конфига, по наличию в папке WWW-ROOT/plugins или QUERY_STRING дополнительно нужно подгрузить js-файлы (из WWW-ROOT/plugins), встроить компоненты плагина (про которые базовый код ничего не знает) и реагировать на изменение state'а с единой точкой входа MainApp.render()
Идеально было бы иметь доступ к глобальному state базового кода из кода плагина.
Варианты с router'ом видел, но они требуют перекомпиляции bundle'а, что нецелесообразно для production-сервера.
Сейчас мое веб-приложение написано на старом (pure) js, встраивание плагинов происходит по списку (указанному в конфиге) путем динамического добавления элемента script (и при необходимости style). Каждый js-плагин "сам знает" куда ему надо встроиться и как модифицировать страницу. Хотелось бы этот же механизм иметь и в SPA на ReactJS...

Answer 1

[Aleksei Podgaev]

Вопрос решается в два приёма.

Во-первых нужно изучить динамическую подгрузку компонентов, чанки и т.п. вопросы конфигурирования webpack. Можно сделать то же, что делает роутер, но без роутера. ;)

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