React: Использовать переменные среды

Question

Как использовать переменные среды, определенные в .bash_profile в приложении React? У меня есть два приложения React на производстве (они - один и тот же проект, поэтому у них одинаковый код), но им нужно запросить разные хосты API, и я решил, что переменные env могут сделать трюк.

Answer 1

Использование webpack.DefinePlugin. Допустим, вы экспортировали FOO и BAR в вашем .bash_profile, то ваш webpackconfig должен выглядеть следующим образом:

const config = { 
    entry: 'somescript', 
    // ... 
    module: { 
    // ... 
    }, 
    // ... 
    plugins: [ 
    // ... your plugins 
    new webpack.DefinePlugin({ 
     'process.env':{ 
     'FOO': process.env.FOO, 
     'BAR': process.env.BAR 
     } 
    }) 
    ], 
    // ... 
} 

Вы сможете получить доступ к тем, в ваших JS во время компиляции с помощью process.env.FOO & process.env.BAR

Ресурс: https://github.com/topheman/webpack-babel-starter