Подтвердить что ты не робот

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

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

Ответ 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

Ответ 2

Храните переменные среды в index.html !

если вы рассматриваете index.html как манифест развертывания, который содержит значения, специфичные для среды, вы можете использовать одни и те же активы с версией (js, css) в каждой среде!

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="#" onclick="location.href='https://assets.myapp.com/favicon.ico'; return false;">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="#" onclick="location.href='https://assets.myapp.com/manifest.json'; return false;">
    <title>React App</title>
    <script>
      env = {
        // Add your environment variables here
        api: "https://staging-api.myapp.com"
      };
    </script>
    <link href="#" onclick="location.href='https://assets.myapp.com/static/css/main.6bd13355.chunk.css'; return false;" rel="stylesheet">
</head>
<body>
    <div id="root"></div>
    <script src="https://assets.myapp.com/static/js/1.a700ff87.chunk.js"></script>
    <script src="https://assets.myapp.com/static/js/main.3ec5cdc6.chunk.js"></script>
</body>
</html>

В вашей ссылке на код значения непосредственно: myApi = window.env.api;

Подробнее об этой методологии читайте на странице https://immutablewebapps.org