Я создал веб-приложение React, используя приложение create-react-app, и я занят включением в проект шаблона панели мониторинга. Мне удалось встроить большую часть HTML в различные повторно используемые компоненты React, и я смог успешно импортировать все таблицы стилей. Однако я ударился о кирпичную стену, когда попытался включить файлы шаблона JavaScript в свой проект.
Итак, я взял все необходимые файлы JavaScript и добавил их все во вспомогательные файлы. папка ресурсов (находится в папке publi c) с именем js, то есть:
/public/assets/js/{file.js}
Затем я добавил теги сценария в индекс . html в папке publi c:
<!DOCTYPE html>
<html lang="en" class="js">
<head>
<meta charset="utf-8" />
<!-- other meta tags -->
<title>My Dashboard</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/JavaScript" src="./assets/js/bundle.js"></script>
<script type="text/JavaScript" src="./assets/js/scripts.js"></script>
</body>
</html>
Когда я запускаю сервер разработки, приложение загружается правильно, однако со скриптами происходит что-то странное; Я добавил компонент (слайдер) на целевую страницу, который использует пакет . js и скрипты. js файлы. Когда страница изначально загружается, компонент отображается правильно (т.е. JS работает), однако через секунду компонент становится полностью сломанным - почти как если бы страница обновлялась без правильной загрузки JS во второй раз.
Когда я посмотрел на консоль, я увидел, что у меня были вызваны два JS файла с одинаковыми именами. Я понял, что как часть пакета WebPack в фоновом режиме создает собственный пакет и обслуживает его - и этот пакет также называется пакетом. js. Следовательно, я переименовал внешний файл JavaScript в externalbundle. js и, соответственно, внес изменения в атрибут sr c в теге скрипта:
<script type="text/JavaScript" src="./assets/js/externalbundle.js"></script>
Приложение компилируется и загружается успешно, и я не вижу предупреждений или ошибок в консоли, но то же самое происходит; ползунок загружается правильно в течение этой первой секунды, а затем прерывается (консоль по-прежнему не показывает никаких предупреждений или ошибок).
Я также добавил console.log('Loaded') в конце externalbundle. js файл, и он отображается в консоли, как и ожидалось, когда приложение загружено.
Поэтому я действительно хотел бы знать, неправильно ли я ссылаюсь на эти внешние сценарии, возможно, не полностью понимаю, как работает DOM и как он работает с внешними скриптами, или есть совершенно другой способ работы с внешними скриптами?
Возможно, стоит упомянуть также, что файлы JavaScript, на которые я ссылаюсь, недоступны как библиотеки в npm. Я также пробовал импортировать их внутри index. js вместо этого (конечно, перемещая файлы в каталог sr c), что вызывает всевозможные ошибки, такие как
'define' не определены
и
Ожидалось присвоение или вызов функции, и вместо этого было обнаружено выражение NodeJS "совместимый" файл (добавив exports.{filename} = function(a,b) { ... } и вызвав его внутри index. js, импортировав import { filename } from './path/to/file.js' и вызвав его с помощью filename()) дал еще худшие результаты.
Есть идеи?