#javascript #reactjs #typescript
Вопрос:
В моем приложении react у меня есть компонент, скажем, диаграмма, в которой вызывается внешний API.
Во время работы в локальной среде URL-адрес API будет localhost:8080 при развертывании, и URL-адрес API должен быть prod:8080
В примерах, основанных на .env, используется process.env, и внутри компонента, в котором API называется process, не определен.
Есть ли способ получить доступ к файлу env внутри компонента, который запускается в браузере.
Комментарии:
1. Если вы используете CRA для настройки своего проекта, вы можете выбрать его встроенные инструменты , если вы используете некоторые пользовательские настройки, основанные на вашей собственной конфигурации Webpack, вы можете проверить dotenv , crossenv или просто использовать плагин определения Webpack.
2. Единственное, что вам следует иметь в виду, это то, что все вышеперечисленные решения подразумевают, что
process.env.SOMETHINGво время сборки вы будете заменены фактическим значением соответствующей переменной среды (следовательно, доступной на стороне клиента), и вы должны быть осторожны, чтобы не раскрывать какие-либо конфиденциальные данные в вашем файле .env.
Ответ №1:
Если вы используете CRA:
Документация React по переменным среды:
«Ваш проект может использовать переменные, объявленные в вашей среде, как если бы они были объявлены локально в ваших файлах JS. По умолчанию для вас будет определен NODE_ENV и любые другие переменные среды, начинающиеся с REACT_APP_. »
В противном случае вы можете использовать что-то вроде dotenv и импортировать его в свое приложение index.tsx
Для вашего конкретного случая использования вы также хотите иметь 2 .env файла, так как вам нужен один для development и production . Так что взгляните на это.