React 中的 env-vars 使用 Dotenv 和 Webpack

Question

我想访问我在前端 (React) 中定义的一些环境变量。

我有以下设置：

• React + NodeJS（我不使用create-react-app）
• Webpack 4
• Dotenv

我尝试关注https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5#0618，但它不起作用，也抛出任何错误。

webpack.config.js

const dotenv = require("dotenv");

module.exports = () => {
  // call dotenv and it will return an Object with a parsed key
  const env = dotenv.config().parsed;

  // reduce it to a nice object, the same as before
  const envKeys = Object.keys(env).reduce((prev, next) => {
    console.log(prev)
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

return { 
  ...,
  plugins: [
      new webpack.DefinePlugin(envKeys)
  ],
  ...
}

通过上面的 Webpack 配置，我想我应该可以在 file.js 中执行 <h4>My var: {process.env.REACT_APP_MY_VAR}</h4>，当然我已经在位于项目根目录的 .env 文件中定义了 REACT_APP_MY_VAR。

我希望file.js 呈现REACT_APP_MY_VAR 的值，但我没有呈现任何内容，无论是值还是错误。

Answer 1

我建议使用dotenv-webpack 而不是dotenv 包以便于配置。

4 个简单步骤：-

1) 使用安装dotenv-wepack

npm install dotenv-webpack --save

2) 在应用程序根目录创建.env 文件

API_URL=http://localhost:8000

3) 将此添加到您的 webpack 配置文件中。

const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

4) 在应用程序中的任何地方使用环境变量。

import React from 'react';

    const App = () => {
        return (
            <h1>{process.env.API_URL}</h1>        
        );
    }
    export default App;

希望对你有帮助！！！