Dotenv 配置不适用于 React.js 应用答案

【问题标题】：Dotenv configuration isn't working with React.js appDotenv 配置不适用于 React.js 应用
【发布时间】：2017-12-16 05:26:57
【问题描述】：

我有一个使用 Webpack 和 Babel 的 React 应用程序，我正在尝试使用 process.env 在我的反应组件中加载 .env 常量，但该对象始终为空。看起来有dotenv 插件在后台运行，但它不适用于我的项目。

我希望在我的 react 组件中看到 .env（位于应用程序的根目录）常量。

我的package.json：

{
  "name": "**************",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.16.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^3.3.7",
    "dotenv": "^4.0.0",
    "dotenv-webpack": "^1.5.3",
    "material-ui": "^0.18.3",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.0",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-tap-event-plugin": "^2.0.1",
    "webpack": "^2.6.1"
  },
  "devDependencies": {
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "react-scripts": "1.0.7",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9"
  },
  "scripts": {
    "dev":   "webpack -d --watch",
    "test":  "react-scripts test --env=jsdom",
    "start": "react-scripts start",
    "build": "webpack -p",
    "eject": "react-scripts eject"
  }
}

我的webpack.config.js：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

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

module.exports = {
    entry: APP_DIR + '/index.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.png$/,
                loader: "url-loader?limit=100000"
            },
            {
                test: /\.jpg$/,
                loader: "file-loader"
            },
            {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=image/svg+xml'
            }
        ]
    },

    plugins: [
        new Dotenv({
            path: './.env', // Path to .env file (this is the default)
            safe: false // load .env.example (defaults to "false" which does not use dotenv-safe)
        })
    ]
};

我尝试了以下操作：

Adding Development Environment Variables In .env — 没用。
DotenvPlugin — 没用。
DefinePlugin — 我设法使用来自 webpack conf 的 DefinePlugin 加载常量，但我确实需要能够使用 .env 文件。

有什么想法吗？

【问题讨论】：

您没有使用弹出的应用程序，因此我建议您改用react-app-env。
我正在搜索这个问题，你的选项 1 它适用于我使用 dotenv 弹出的反应应用程序。

标签： javascript reactjs webpack webpack-2

【解决方案1】：

一个问题可能是 create-react-app 默认情况下会忽略任何不以“REACT_APP_”为前缀的 .env 变量

create-react-app 中有一段读给我 Here 更详细地解释了这一点

他们这样做的原因是，您不能无意中在系统上包含来自其他项目的环境变量

【讨论】：