Как я могу обслуживать удаленное приложение React с тегом скрипта?
В нашей компании есть приложение для реагирования (созданное с помощью приложения create-react-app), которое сегодня обслуживается через iframe, и оно хорошо работает.
Возникла потребность обслуживать приложение (которое всегда встраивается в другие страницы) только с помощью тега script (без тега 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 в общей папке приложения React. Я могу получить доступ к файлу.
Как из этого файла отобразить само приложение реакции для данного селектора (# app-placeholder)?
Поскольку этот файл обслуживается как есть и не передается через webpack / babel, я не могу использовать import / jsx / require () и другие вещи.
Я на правильном пути? Следует ли мне вручную перенести этот файл? Есть ли другие решения этого метода рендеринга?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам следует попробовать настроить компилятор с помощью { output.library }. Это должно дать результат компиляции, готовый к распространению, что означает, что вы можете легко ссылаться на него в другом документе (и не нужно беспокоиться, скажем, о переносе / оптимизации источников, потому что это уже было выполнено с помощью webpack).
Вот пример составная библиотека, созданного webpack. Как видите, экспорт точки входа назначается window.
Спасибо за ответ, кажется, это правильное решение. Теперь у меня возникает проблема, когда Webpack пытается загрузить файл фрагмента, используя URL-адрес приложения хостинга, и, очевидно, получает 404. Есть идеи, как с этим справиться?