Как использовать переменные окружения с помощью webpack + reactjs?

Question

Я компилирую свои файлы Reactjs с помощью webpack. В моем проекте мне нужно сделать вызовы API для бэкэнд.

Теперь у меня есть 3 среды, которые будут локальными, развиваются и производятся.

Так у меня есть constants.jsx файл, в котором я объявленный следующем: -

export const url= 'http://localhost:8002/api/v0'; 

Так что в моих компонентах я импортировать URL из выше и использовать их, чтобы позвонить APIS, но как мне нужно изменить выше переменной в зависимости от того, является ли она локальной, dev или prod.

Как реализовать выше?

Answer 1

Так что я пытался несколько вещей и решил выше, выполнив следующие действия: -

В нашем WebPack конфигурации добавить DefinePlugin. Ниже мой WebConfig: -

plugins: [ 
    new BundleTracker({filename: './webpack-stats.json'}), 
    new webpack.DefinePlugin({ 
    'process.env': { 
     'NODE_ENV': JSON.stringify(process.env.environment), 
    } 
    }) 
    ], 

Теперь при компиляции мы используем следующие команды: -

environment=local webpack (for local) 
environment=development webpack(for dev) 
environment=production webpack(for prod) 

Теперь, если вы видите, мы устанавливаем «NODE_ENV» с входом Cli так, когда «NODE_ENV» является производство как значение, webpack автоматически минимизирует ваш выходной пакет.

Теперь скажем, что у нас есть API url, объявленный в файле (у меня был Constants.jsx), поэтому мы добавляем следующее к константам.jsx. Мы можем прочитать набор NODE_ENV в конфигурации webpack в этом Constants.jsx и импортировать их в ваши компоненты, из которых APIS вызывается, экспортируя его здесь.

const api_url=function(){ 
    let api_url=''; 
    if(process.env.NODE_ENV == 'local'){ 
    api_url= 'http://localhost:8002/api/v0'; 
    } 
    else if(process.env.NODE_ENV == 'development'){ 
    api_url = 'https://development/api/v0'; 
    } 
    else if(process.env.NODE_ENV == 'production'){ 
    api_url = 'https://production/api/v0'; 
    } 
    return api_url; 
} 

export const url= api_url();