Добавить внешний JS - скрипт на web - страницу
У меня написано простейшее приложение с помощью React, на языке Typescript. С помощью команды npx create-react-app app-name --template typescript я создал шаблон React - приложения на языке typescript. Ниже минимальный пример, в котором я просто генерирую простейшую веб - страницу и отдаю её клиенту. Это всё, что я поменял в сгенерированном шаблоне:
App.tsx
import React, { Component } from 'react';
import {Helmet} from "react-helmet";
class App extends Component {
render() {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<script src="jquery.min.js" type="text/javascript" />
<script src="script1.js" type="text/javascript" />
</Helmet>
<div className="container">
<a id="Test">Hello world!</a>
</div>
</div>
);
}
}
export default App;
script1.js
jQuery(function ($) {
"use strict"
alert("Hello world!");
});
jquery.min.js - Это загруженный скрипт jQuery.
Все три файла сложены в папку src, которая генерируется командой create-react-app. После запуска сервера и загрузки страницы, контент страницы отображается успешно, то есть единственный тег <a/>. А вот сообщение alert, запуск которого при загрузке страницы описан в скрипте script1.js - не отрабатывает. Проверив лог браузера, я увидел, что оба скрипта не были загружены:
Failed to load resource: the server responded with a status of 404 (Not Found)
Также, на вкладке sources отладки браузера скриптов этих нет. Я экспериментировал с путями, но так и не смог добиться загрузки скриптов. Как можно починить?
P.S.: я не загружаю jQuery - скрипт по его адресу https, потому что мне именно нужен локальный скрипт.
Ответы (1 шт):
Так src - не внешняя папка!
Вам консоль и говорит "По указанному пути ничего нет", потому что они не доступны от кроня самого сайта. Кладите скрипты в папку public, и всё заработает.
Подробнее об этом можно почитать тут: https://create-react-app.dev/docs/using-the-public-folder/
(Не забудьте указать / в путях к файлам, чтобы получать их от корня сайта)