#javascript #html #reactjs #typescript #dom
#javascript #HTML #reactjs #typescript #dom
Вопрос:
То, что я пытаюсь сделать, это импортировать объект из моего файла typescript в тег скрипта
Это то, что я пытаюсь сделать
<div id="app-root"></div>
<script>
import {config} from '../config.ts';
let script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${config.GOOGLE_MAPS_KEY}`;
document.getElementsByTagName('script')[0].parentNode.appendChild(script);
</script>
Я не уверен, возможно ли это, но мое приложение react отображается в #app-root, и я пытаюсь обработать свой ключ API из своей конфигурации. Когда я запускаю это, ничего не происходит, но если вместо этого я добавляю статическое значение, оно, похоже, работает.
Я ожидаю, что произойдет, если передать переменную в src скрипта, скрипт будет успешно выполнен.
Комментарии:
1. 1. это невозможно 2. вы можете передать переменную как переменную среды и скомпилировать ее в шаблон индекса во время выполнения (среда разработки) или во время сборки (среда prod). пожалуйста, обратитесь к документам CRA для получения дополнительной информации
Ответ №1:
Нет, невозможно прочитать ts-файл в теге скрипта (по крайней мере, без предварительной компиляции его в js).
Однако что вы можете сделать, так это использовать вместо этого переменные среды и позволить react-scripts скомпилировать их в ваш шаблон, как это уже происходит каждый раз, когда вы запускаете сервер разработки или запускаете сборку.
начните здесь:
https://create-react-app.dev/docs/adding-custom-environment-variables
Сначала создайте env-файл, вызываемый .env в корне нашего проекта
Далее, давайте добавим нашу переменную окружения в этот файл:
REACT_APP_GOOGLE_MAPS_KEY=<your key>
Наконец, давайте изменим index.html чтобы ссылаться на нашу переменную окружения:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_MAPS_KEY%"></script>
В качестве последней мысли, вместо того, чтобы заниматься всеми этими проблемами, вы могли бы вместо этого включить зависимость от Google Maps там, где это необходимо, предпочтительным способом реагирования: с помощью плагина react. Проверьте это. он позаботится о загрузке / выгрузке api для вас, и вы можете передать свой ключ из конфигурации при загрузке api:
Ответ №2:
Файлы typescript должны быть скомпилированы / преобразованы в JS (в файл .js) для использования из браузера.
Вы можете скомпилировать свой TS-файл онлайн здесь: https://www.typescriptlang.org/play и скопируйте выходные данные в файл .js
или
Установите его через командную строку (при условии, что вы используете Windows).
npm install typescript // add -g if you want to install it globally
cd intoYourFolder // change directory to the folder where you have the .ts file
tsc *.ts // this will compile all typescript files in the directory
tsc yourFile.ts // this will compile only a specific file