Как я могу обслуживать удаленное приложение React с помощью тега script?

Question

В нашей компании есть приложение реагирования (созданное с помощью create-реагировать-приложения), которое сегодня обслуживается через iframe, которое хорошо работает.

Возникла потребность в обслуживании приложения (которое всегдавстроенный в другие страницы), с одним тегом скрипта (без тега iframe).

Я думал о чем-то вроде:

<div id="app-placeholder"></div>
<script src="https://our-app.com/init.js"></script> // this will create a function called window.InitMyApp
<script>
    InitMyApp('#app-placeholder', 'token', otherOptions)
</script>

Я пытался создать файл init.js вреагировать на общедоступную папку приложения.Я могу получить доступ к файлу.Из этого файла, как я могу отобразить само приложение реагирования для данного селектора (# app-placeholder)?

Поскольку этот файл обслуживается как есть и не передается через webpack / babel, яне могу использовать import / jsx / require () и другие вещи.

Я на правильном пути?Должен ли я вручную переносить этот файл?Есть ли другие решения для этого метода рендеринга?

Answer 1

Вы должны попытаться настроить компилятор с { output.library }.Это должно привести к выводу компиляции, готовой к распространению, что означает, что вы можете легко ссылаться на него в другом документе (и не нужно беспокоиться о, скажем, переносе / оптимизации источников, потому что это уже было выполнено веб-пакетом).

Вот пример библиотеки из нескольких частей , созданной webpack.Как вы видите, точки входа экспорта присваиваются window.