Получение переменной среды не определено в React js

Question

Я хочу сохранить переменную в переменной .env и использовать ее как process.env

Я добавил файл .env в корневой каталог

REACT_APP_FOO = abcc111

webpack.config.dev.js

plugins: [
    new webpack.ProvidePlugin({
        React: 'react'
    }),
     new webpack.DefinePlugin({
       "process.env":{
       'REACT_APP_FOO': JSON.stringify(process.env.REACT_APP_FOO)
     }
   })
],

App.js

console.log(process.env);

Результат:

{REACT_APP_FOO: undefined}

Пожалуйста, дайте мне знать, если я что-то здесь упустил.

Answer 1

Шаги для добавления .env содержимого

1) npm install dotenv --save

2) В верхней части файла конфигурации веб-пакета

const dotenv = require('dotenv').config({path: __dirname + '/.env'});

3) Затем создайте файл .env в корневом каталоге вашего приложения и добавьте в него переменные.

// содержимое .env

REACT_APP_FOO = abcc111

4) файл конфигурации webpack

new webpack.DefinePlugin({
            "process.env": dotenv.parsed
        }),

4) Добавьте .env к вашему .gitignore файлу, чтобы Git игнорировал его и никогда не попадал на GitHub. Необходимо перезапустить приложение после добавления переменной в файл .env.

Если вы используете create-реакции-приложение, оно использует react-scripts с зависимостью dotenv, поэтому вам не нужно устанавливать и настраивать, вы можете просто создать .env файл и использовать в ваше заявление. Условное обозначение должно начинаться с REACT_APP

Надеюсь, это поможет !!!