Добавить внешний 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 шт):

Автор решения: Vladimir Gonchar

Так src - не внешняя папка!

Вам консоль и говорит "По указанному пути ничего нет", потому что они не доступны от кроня самого сайта. Кладите скрипты в папку public, и всё заработает.

Подробнее об этом можно почитать тут: https://create-react-app.dev/docs/using-the-public-folder/

(Не забудьте указать / в путях к файлам, чтобы получать их от корня сайта)

→ Ссылка