javascript — Как подключить js файл к проекту React

Задать вопрос

Вопрос задан

Изменён 5 месяцев назад

Просмотрен 148 раз

Имеется страница с игрой и чтобы в нее поиграть нужно подключить game.js файл с логикой игры. Game.jsx

import React from "react";
const Game = () => {
return(
    <div>
        <h2>Press A Key to Start</h2>
        <div className="container">
            <div>
                <div type="button" className="btn green">
                </div>
                <div type="button" className="btn red">
                </div>
            </div>
            <div>
                <div type="button" className="btn yellow">
                </div>
                <div type="button" className="btn blue">
                </div>
            </div>
        </div>
    </div>
)
}
export default Game

App. js

import React from "react";
import {BrowserRouter, Route, Routes, Link} from "react-router-dom";
import './style.css'
import './game.js'
import Game from "./pages/Game";
export default function App() {
return(
    <BrowserRouter>
         <Routes>
        <Route path="/scoreboard" element={<Scoreboard/>}>
        </Route>
        <Route path="/" element={<Game/>}>
        </Route>
        </Routes>
    </BrowserRouter>
)
}

index.html

  <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div></div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256- 
 H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh37Xc0jk=" crossorigin="anonymous"></script>
</html>

Подключая файл через App.js появляется ошибка: Uncaught (in promise) DOMException: Failed to load because no supported source was found.

  • javascript
  • reactjs
import * as game from '.
/game.js'

тогда ты сможешь использовать функции из этого файла способом ниже:

game.someFunc()

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Написание кода JavaScript в Visual Studio без решения или проекта

Twitter LinkedIn Facebook Адрес электронной почты

  • Статья
  • Чтение занимает 2 мин

Область применения:Visual StudioVisual Studio для Mac Visual Studio Code

Начиная с Visual Studio 2017 вы можете разрабатывать код без проектов и решений. Вы можете открыть папку кода и сразу же приступить к работе в полнофункциональном редакторе, используя IntelliSense, поиск, рефакторинг, отладку и многое другое. Помимо этих функций, в инструменты Node.js для Visual Studio добавлена поддержка сборки файлов TypeScript, управления пакетами npm и выполнения сценариев npm.

Чтобы приступить к работе, выберите

Файл>Открыть>Папку на панели инструментов. Обозреватель решений отображает все файлы в папке, и можно открыть любой из файлов, чтобы начать редактирование. В фоновом режиме Visual Studio индексирует файлы, предоставляя функции npm, сборки и отладки.

Важно!

Многие функции, описанные в этой статье, включая интеграцию npm, требуют Visual Studio 2017 версии 15.8 или более поздней. Должна быть установлена рабочая нагрузка Visual Studio Разработка Node.js.

Интеграция npm

Если открытая папка содержит файл package.json, щелкните правой кнопкой мыши package. json, чтобы открыть контекстное меню для npm.

В контекстном меню вы можете управлять пакетами, установленными npm, так же, как вы управляете пакетами npm при использовании файла проекта.

Кроме того, в меню можно выполнять сценарии, определенные в элементе scripts в package.json. Эти скрипты будут использовать версию Node.js, доступную в переменной среды PATH. Скрипты выполняются в новом окне. Это отличный способ сборки и выполнения скриптов.

Сборка и отладка

package.json

Если package.json в папке указывает элемент main, команда отладки будет доступна в контекстном меню для

package.json. При нажатии этой кнопки запускается node.exe с указанным скриптом в качестве аргумента.

Файлы JavaScript

Вы можете отлаживать файлы JavaScript, щелкнув файл правой кнопкой мыши и выбрав Отладка в контекстном меню. Запустится node.exe с этим файлом JavaScript в качестве аргумента.

Файлы TypeScript и tsconfig.json

Если в папке нет файла tsconfig.json, щелкните правой кнопкой мыши файл TypeScript, чтобы открыть команды контекстного меню и скомпилировать и отладить этот файл. При использовании этих команд сборка и отладка выполняются с помощью tsc.exe с параметрами по умолчанию. (Вам нужно создать файл до отладки.)

Примечание

При создании кода TypeScript мы используем последнюю версию, установленную в C:\Program Files (x86)\Microsoft SDKs\TypeScript.

Если в папке есть файл tsconfig.json, щелкните правой кнопкой мыши файл TypeScript, чтобы открыть команду меню для отладки этого файла TypeScript. Этот параметр отображается только в том случае, если в tsconfig.json не указан outFile. Если outFile указан, для отладки этого файла щелкните правой кнопкой мыши tsconfig.json и выберите нужный параметр. Файл tsconfig.json также предоставляет параметр сборки для указания параметров компилятора.

Примечание

Дополнительные сведения о файле tsconfig.json см. на странице руководства по tsconfig.json в TypeScript.

Модульные тесты

Вы можете включить интеграцию модульных тестов в Visual Studio, указав тестовый корень в файле package.json:

{
    // ...
    "vsTest":{
        "testRoot": "./tests"
    }
    // ...
}

Средство запуска тестов перечисляет локально установленные пакеты, чтобы определить, какие платформы тестирования использовать. Если ни одна из поддерживаемых платформ не распознается, выбирается средство выполнения тестов по умолчанию ExportRunner. Другие поддерживаемые платформы:

  • Mocha (mochajs.org)
  • Jasmine (Jasmine.github.io)
  • Tape (github.com/substack/tape)
  • Jest (jestjs.io)

После открытия обозревателя тестов (выберите Тест>Windows>Обозреватель тестов) Visual Studio обнаруживает и отображает тесты.

Примечание

Средство выполнения тестов перечисляет только файлы JavaScript в тестовом корне. Если ваше приложение написано в TypeScript, вам нужно сначала создать их.

JavaScript Здание | Hugo

Любой файл ресурсов JavaScript можно транспилировать и «встряхнуть дерево» с помощью js.Build , который принимает в качестве аргумента либо строку для пути к файлу, либо список параметров, перечисленных ниже.

Опции

targetPath [строка]
Если не задано, исходный путь будет использоваться как базовый целевой путь. Обратите внимание, что расширение целевого пути может измениться, если целевой тип MIME отличается, например. когда источником является TypeScript.
params [карта или срез]
Параметры, которые можно импортировать как JSON в ваши файлы JS, например:
 {{ $js := resources.Get "js/main.js" | js. Build (dict "params" (dict "api" "https://example.org/api")) }}
 

И затем в вашем файле JS:

 import * as params from '@params';
 

Обратите внимание, что это предназначено для небольших наборов данных, т.е. настройки конфига. Для больших данных поместите/смонтируйте файлы в

/assets и импортируйте их напрямую.

minify [bool]
Пусть js.Build обрабатывает минимизацию.
вводить [срез]
Этот параметр позволяет автоматически заменить глобальную переменную на импорт из другого файла. Имена путей должны относиться к активам . См. https://esbuild.github.io/api/#inject
прокладок
Эта опция позволяет заменять один компонент другим. Распространенным вариантом использования является загрузка зависимостей, таких как React, из CDN (с прокладками ) в производстве, но работает с полным набором зависимостей node_modules во время разработки:
 {{ $shims := dict "react" "js/shims/react. js" "react-dom" "js/shims /реагировать-dom.js" }}
{{ $js = $js | js.Build dict "прокладки" $shims }}
 

Файлы shim могут выглядеть так:

 // js/shims/react.js
модуль.экспорт = окно.Реагировать;
 
 // js/shims/react-dom.js
модуль.экспорт = окно.ReactDOM;
 

С учетом вышеизложенного этот импорт должен работать в обоих сценариях:

 импорт * как React из 'реагировать'
импортировать * как ReactDOM из 'react-dom';
 
sourceMap [строка, логическое значение]
Пусть js.Build выводит исходную карту. Текущий только встроенный поддерживается. true по умолчанию встроенный. Один из: ‘ встроенный , внешний По умолчанию «» (отключено)
цель [строка]
Целевой язык. Один из: es5 , es2015 , es2016 , es2017 , es2018 , es2019 , es2020 или esnext . По умолчанию esnext .
внешние [срез]
Внешние зависимости. Используйте это, чтобы обрезать зависимости, которые, как вы знаете, никогда не будут выполнены. См. https://esbuild.github.io/api/#external
defines [map]
Позволяет определить набор замен строк, которые будут выполняться при сборке. Должна быть карта, где каждый ключ должен быть заменен его значением.
 {{ $define := dict "process.env.NODE_ENV" `"разработка"` }}
 
формат [строка]
Выходной формат. Один из: iife , cjs , esm . Значение по умолчанию — iife , самовыполняющаяся функция, подходящая для включения в качестве тега.
sourceMap
Создавать ли встроенную или внешнюю исходную карту из esbuild. Внешние исходные карты будут записаны в цель с именем выходного файла + «.map». Входные исходные карты можно считывать из модулей js. Build и node и объединять в выходные исходные карты.

Импорт кода JS из /assets

Начиная с версии Hugo v0.78.0 js. Сборка имеет полную поддержку файловой системы виртуального объединения в модулях Hugo. Вы можете увидеть несколько простых примеров в этом тестовом проекте, но вкратце это означает, что вы можете сделать следующее:

 import { hello } from 'my/module';
 

И он будет разрешен к самому верхнему индексу .{js,ts,tsx,jsx} внутри assets/my/module в многоуровневой файловой системе.

 import { hello3 } from 'my/module/hello3';
 

Разрешится в hello3.{js,ts,tsx,jsx} внутри assets/my/module .

Любой импорт, начинающийся с . разрешается относительно текущего файла:

 import { hello4 } from './lib';
 

Для других файлов (например, JSON , CSS ) необходимо использовать относительный путь, включая любое расширение, например:

 import * as data from 'my/module/data. json';
 

Любой импорт в файл за пределами /assets или который не разрешается в компонент внутри /assets , будет разрешен ESBuild с каталогом проекта в качестве каталога разрешения (используется в качестве отправной точки при поиске node_modules и т. д.). Также см. Hugo mod npm pack. Если в вашем проекте есть какие-либо импортированные зависимости npm, вам нужно обязательно запустить npm install , прежде чем запускать Hugo .

Также обратите внимание на новую опцию params , которую можно передать из шаблона в ваши файлы JS, например:

 {{ $js := resources.Get "js/main.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
 

И затем в вашем файле JS:

 import * as params from '@params';
 

Hugo по умолчанию создает файл assets/jsconfig.json , который отображает импорт. Это полезно для навигации/подсказки IntelliSense внутри редакторов кода, но если вам это не нужно/не нужно, вы можете отключить его.

Включить зависимости в package.json/node_modules

Любой импорт в файл за пределами /assets или который не разрешается в компонент внутри /assets , будет разрешен ESBuild с каталогом проекта в качестве каталога разрешения (используется в качестве отправной точки при поиске node_modules и т. д.). Также см. Hugo mod npm pack. Если в вашем проекте есть какие-либо импортированные зависимости npm, вам нужно обязательно запустить npm install , прежде чем запускать Hugo .

От Хьюго 0.78.1 начальный каталог для разрешения пакетов npm (также известных как пакеты, которые находятся в папке node_modules ) всегда является основной папкой проекта.

Примечание: Если вы разрабатываете тему/компонент, который должен быть импортирован и зависит от зависимостей внутри package. json , мы рекомендуем прочитать о пакете Hugo Mod npm, инструменте для объединения всех зависимостей npm в проект.

Примеры

 {{ $built := resources.Get "js/index.js" | js.Build "main.js" }}
 

Или с опциями:

 {{ $externals := slice "react" "react-dom" }}
{{ $define := dict "process.env.NODE_ENV" `"разработка"` }}
{{ $opts := dict "targetPath" "main.js" "внешние" $externals "определяет" $define }}
{{ $built := resources.Get "scripts/main.js" | js.Build $opts }}

 

Добавить файл JavaScript в HubSpot

Вы можете размещать и редактировать файлы JavaScript в менеджере дизайна. Узнайте, как создать файл JavaScript и связать его с шаблоном или доменом.


Создайте файл JavaScript

  • В своей учетной записи HubSpot перейдите к Маркетинг > Файлы и шаблоны > Инструменты дизайна .
  • В меню левой боковой панели нажмите Файл  >  Новый файл . Возможно, вам придется щелкнуть значок папки  значок папки  , чтобы развернуть меню.
  • В диалоговом окне нажмите Что вы хотите построить сегодня? раскрывающееся меню и выберите JavaScript .


  • Нажмите Далее .
  • В поле  Имя файла  введите имя для вашего файла JavaScript.
  • Чтобы обновить местоположение файла, в разделе  Расположение файла  нажмите  Изменить  и выберите папку , в которую нужно добавить файл.

  • Нажмите  Создать .
  • Введите или вставьте свой JavaScript в редактор кода.
  • Если вы включили ESLint, вы можете увидеть любые предупреждения или ошибки JavaScript, щелкнув, чтобы переключить Показать включение выхода .

  • В правом верхнем углу нажмите Опубликовать изменения , чтобы применить изменения.

Прикрепите файл JavaScript к шаблону

  • В поисковике слева щелкните шаблон , который вы хотите обновить.
  • В инспекторе справа перейдите на вкладку Редактировать .
  • В разделе  Связанные файлы JavaScript  нажмите раскрывающееся меню  Добавить и выберите Файл JavaScript .

 

  • В правом верхнем углу нажмите  Опубликовать изменения , чтобы изменения вступили в силу.

Включить файл JavaScript на страницы HubSpot

настройки значок настроек на главной панели навигации.»}» data-sheets-userformat=»{«2″:8402945,»3»:{«1″:0} ,»14″:[null,2,0],»15″:»Arial»,»16″:10,»26″:400}» data-sheets-formula=»=»»»>settings значок настроек на главной панели навигации. «}» data-sheets-userformat=»{«2″:8402945,»3»:{«1″:0},»14″:[null,2,0],»15″:»Arial»,»16″:10,»26″:400}» -formula=»=»»»>Вы можете добавить свой файл JavaScript на все страницы домена, размещенного на HubSpot, или на отдельные страницы, используя общедоступный URL-адрес.

настройки значок настроек на главной панели навигации.» }» data-sheets-userformat=»{«2″:8402945,»3»:{«1″:0},»14″:[null,2,0],»15″:»Arial»,»16 «:10,»26″:400}» data-sheets-formula=»=»»»>настройки значок настроек на главной панели навигации.»}» data-sheets-userformat=»{«2″:8402945,»3»:{«1″:0},»14″:[null,2,0],»15″:»Arial»,»16″:10,»26″:400}» -formula=»=»»»>Для доступа к общедоступному URL-адресу файла:

  • настройки значок настроек на главной панели навигации.»}» data-sheets-userformat=»{«2″:8402945,»3» :{«1″:0},»14″:[null,2,0],»15″:»Arial»,»16″:10,»26″:400}» data-sheets-formula=»= «»»>настройки значок настроек на главной панели навигации. «}» data-sheets-userformat=»{«2″:8402945,»3»:{«1″:0},»14″:[null ,2,0],»15″:»Arial»,»16″:10,»26″:400}» data-sheets-formula=»=»»»>В меню слева выберите свой Файл JavaScript .
  • настройки значок настроек на главной панели навигации.»}» data-sheets-userformat=»{«2″:8402945,»3»:{«1″:0},»14″:[null,2, 0],»15″:»Arial»,»16″:10,»26″:400}» data-sheets-formula=»=»»»>настройки значок настроек на главной панели навигации.»}» data-sheets-userformat=»{«2″:8402945,»3»:{«1″:0},»14″:[null,2,0],»15″:»Arial»,»16″: 10,»26″:400}» data-sheets-formula=»=»»»>Нажмите  Действия  >  Скопировать общедоступный URL-адрес .

настройки значок настроек на главной панели навигации.»}» data-sheets-userformat=»{«2″:8402945,»3»:{«1″:0},»14″:[null,2,0 ],»15″:»Arial»,»16″:10,»26″:400}» data-sheets-formula=»=»»»>Чтобы добавить файл на все ваши страницы HubSpot в домене:

  • настройки значок настроек на главной панели навигации. «}» data-sheets-userformat=»{«2″:8402945,»3»:{«1″:0},»14″:[null,2, 0],»15″:»Arial»,»16″:10,»26″:400}» data-sheets-formula=»=»»»>В своей учетной записи HubSpot щелкните настройки значок настроек на главной панели навигации.
  • В меню левой боковой панели выберите  Веб-сайт  >  Страницы .
  • Нажмите раскрывающееся меню Выберите домен, чтобы изменить его настройки и выберите домен , чтобы добавить файл JavaScript. Вы можете выбрать Настройки по умолчанию для всех доменов , если хотите, чтобы файл JavaScript применялся ко всем подключенным доменам.
  • В нижнем колонтитуле сайта HTML  , вставьте общедоступный URL   в качестве значения источника тега скрипта:
  • .