关于reactjs：如何在React中加载环境变量


How to load environment variables in React

我一直试图在React中加载环境变量，但似乎无法弄清楚。我尝试了多种方法：

使用dotenv-webpack包

加载它们

webpack.config.dev.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const template = require('html-webpack-template');
const Dotenv = require('dotenv-webpack');
const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      template,
      inject: false,
      appMountId: 'app',
      mobile: true,
      lang: 'es-ES',
      title: 'My App',
      meta: [
        {
          name: 'description',
          content: 'My App',
        },
      ],
    }),
    new Dotenv(),
  ],
});

.env

1
2
API_HOST=http://localhost:8000
REACT_APP_API_HOST=http://localhost:8000

直接将其传递给package.json脚本：

1
"start":"webpack-dev-server --config ./webpack.config.dev.js"

在webpack命令上使用.env

1
webpack --env.API_HOST=http://localhost:8000

使用webpack.environmentPlugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const webpack = require('webpack');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const template = require('html-webpack-template');
const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'cheap-module-source-map',
  devServer: {
    publicPath: '/',
    contentBase: './dist',
    compress: true,
    stats: 'minimal',
    overlay: true,
    historyApiFallback: true,
    port: 8081,
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template,
      devServer: 'http://localhost:8081',
      inject: false,
      appMountId: 'app',
      mobile: true,
      lang: 'es-ES',
      title: 'My App',
      meta: [
        {
          name: 'description',
          content: 'React template.',
        },
      ],
    }),
    new webpack.EnvironmentPlugin({
      API_HOST: 'http://localhost:8000',
    }),
  ],
});

这些方法都不起作用，当我尝试在React代码中访问process.env变量时，得到undefined
关于我可能做错了什么的任何想法？

当我想为Firebase项目提供设置但不将其加载到公共存储库中时，我一直在与环境变量作战。

据我所知，您需要命名您的环境变量应始终以前缀REACT_APP_开头。您可以随时随地定义它们，但是如果您使用create-react-app工具创建了应用，则可以将变量放入.env文件或其他一些文件中-(https://facebook.github.io/create -react-app / docs / adding-custom-environment-variables)

当我想创建自己的文件时，我的痛苦开始了，因为我有两个不同的Firebase项目-一个用于登台，另一个用于生产。

我最终使用了react-app-env模块，该模块有助于：
-定义我自己的文件-staging.env和production.env
-自动为我的变量加上REACT_APP_

前缀

例如：

我在staging.env文件中定义了Firebase ApiKey：
API_KEY = xxxxxxxxxxxxxxxxxxx

当我在firebase.js文件中使用它时，我将其用作：

1
2
3
const config = {
    apiKey: process.env.REACT_APP_API_KEY,
}

并确保我针对暂存环境进行开发(Firebase项目)，我已将package.json更改为：

1
2
3
"scripts": {
   "start":"react-app-env --env-file=staging.env start",
  },

希望有帮助！

相关讨论

您需要正确指定webpack配置文件。您将需要为dev创建一个单独的配置。 (webpack.config.dev.js)

此处为示例。

1
2
3
scripts: {
   "dev":"webpack --env.API_HOST=http://localhost:8000 --config webpack.config.dev.js"
}

此外，您需要使用Webpack.DefinePlugin。

1
2
3
4
plugins: [
  ...
  new webpack.DefinePlugin({ `process.env.API_HOST`: JSON.stringify(${env.API_HOST}) })
]

或者您可以使用reduce使它更全面。

1
2
3
4
5
6
7
8
9
10
11
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      ...
      new webpack.DefinePlugin(envKeys)
    ]
  };
相关讨论

您可以在package.json脚本部分中指定环境变量：

1
2
3
4
5
6
7
{
  ...
 "scripts": {
   "start": NODE_ENV=development webpack-dev-server
  },
  ...
}

我为此找到了一个简单的解决方案。您需要安装\\'dotenv-webpack \\'，然后将此配置添加到您的webpack配置中：

1
2
3
4
5
6
7
const Dotenv = require('dotenv-webpack');

...
  plugins: [
    new Dotenv(),
  ],
...

.env

1
2
3
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

最后，您可以在应用程序中访问环境变量

1
console.log(process.env.DB_PASS);

从文档中：DB_HOST和S3_API的.env值未包含在我们的捆绑包中，因为它们从未在代码中引用(如process.env。[VAR_NAME])。
希望对您有所帮助！

同意@Philip \\的答案，这就是我构造dev.config.js

的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  ...
  plugins: [
    new webpack.DefinePlugin({
      // process.env
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        WHY_DID_YOU_UPDATE: process.env.WHY_DID_YOU_UPDATE,
      },
      // my other global flags
      __CLIENT__: true,
      __SERVER__: false,
      __DEVELOPMENT__: true,
      __DEVTOOLS__: true
    }),
  ]

我还使用better-npm-run来管理我的package.json，在这里您可以轻松地管理env变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 "betterScripts": {
   "dev": {
     "command":"concurrently --kill-others "better-npm-run watch-client" "better-npm-run start-dev" "gulp watch --gulpfile semantic/gulpfile.js""
    },
   "why-did-you-update": {
     "command":"better-npm-run dev",
     "env": {
       "WHY_DID_YOU_UPDATE": true
      }
    },
   "watch-client": {
     "command":"node webpack/webpack-dev-server.js",
     "env": {
       "UV_THREADPOOL_SIZE": 100,
       "NODE_ENV":"development",
       "NODE_PATH":"./src",
       "PORT": 3000
      }
    },
   "build": {
     "command":"webpack --verbose --colors --display-error-details --config webpack/prod.config.js"
    }
  },

希望此信息对您也有帮助！