Question

我想从我的.env文件中获取变量，但我总是得到undefined

这是我的js代码：

require('dotenv').config();
class Header extends React.Component{
    constructor(props){...}
    render(){
        console.log("NODE ENV", process.env.NODE_ENV);
        console.log("REACT_APP_MYAPP", process.env.REACT_APP_MYAPP);
        ...
   }
}

此打印：

NODE_ENV开发

REACT_APP_MYAPP undefined

在我的package.json中有：

"scripts":{
      "start" : "webpack-dev-server --config webpack.dev.js",
      "build" : "webpack --config webpack.prod.js"
 }

在我的webpack.dev.js中：

const webpack = require("webpack");
const merge = require("webpack-merge");
const path = require("path");
const common = require("./webpack.common.js");

module.exports = merge.smart(common, {
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        hot: true,
        overlay: {
            warnings: true,
            errors: true
        },
        inline :true,
        historyApiFallback: true,
        port: 8085
    },
    devtool: "inline-sourcemap",
    optimization: {
        namedModules: true
    },
    plugins: [
        new webpack.HotModulReplacementPlugin(),
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify("development"),
            "process.env.REACT_APP_MYAPP": JSON.stringify(process.env.REACT_APP_MYAPP)
        })
    ],
    mode: "development"
});

然后，我将.env文件放在项目的根目录下，紧挨着webpack.dev.js和package.json：

REACT_APP_MYAPP = http://localhost:8080/

所以我认为，获取文件中的变量并不成功。

请问如何在代码中获取 REACT_APP_MYAPP 值？

Answer 1

有几种方法可以使这项工作。

最容易测试的是将您的"start" : "webpack-dev-server --config webpack.dev.js",更改为"start" : "REACT_APP_MYAPP=http://localhost:8080/ node webpack-dev-server --config webpack.dev.js",

这将注入环境变量，并且在webpack构建过程中将可用。每当使用npm或node运行命令时，都可以使用此技术。例如，NODE_ENV='development REACT_MY_APP=http://localhost:8080/ node myapp.js和两者都将在process.env上可用。

您还可以在require('dotenv').config()中调用webpack.dev.js文件。然后将在您使用DefinePlugin时进行设置。

通常，您不使用npm start命令来运行开发服务器。

随着应用程序的增长，您应该查看Webpack Environment Plugin。然后，您可以将.env用于“生产”构建设置，在生产webpack.prod.js中需要它，同时使用插件设置默认/后备环境变量。

Answer 2

在深深的黑兔子洞中探险将带您了解以下事实：

Webpack 5不再提供process或other Node.js variables。
DefinePlugin的角色需要重新定义。
传递给DefinePlugin的值必须为stringified，即使它们是字符串。
EnvironmentPlugin使Webpack 5变得更加混乱。
process.env并不是您应该在前端中真正使用的东西。
您可以使用polyfills重新添加process和其他人，但是有a reason it's no longer available。
dotenv-wepack既不是必需的，也不是要走的路。
使用process.env的原因是全局访问变量。但这是乘坐错误的航班的乘客。我们可以删除它，而直接访问预期的变量：

plugins: [
    new DefinePlugin({
        // With dotenv (values must be stringified)
        ...Object.entries(dotenv.config().parsed).reduce((acc, curr) => ({...acc, [`${curr[0]}`]: JSON.stringify(curr[1]) }), {}),
        
        // Without dotenv 
        'myString': JSON.stringify('IAmAString')
    })
  ]

在前端：

declare var myString: string;
console.log(myString); // 'IAmAString'

如果您有多个带有变量的对象，则可以抽象化字符串化：

// Create a function to stringify values
function stringifyValues(object: {[key: string]: any;}){
    return Object.entries(object).reduce((acc, curr) => ({...acc, [`${curr[0]}`]: JSON.stringify(curr[1]) }), {} as { [key: string]: string; });
}

// use with DefinePlugin
plugins: [
    new DefinePlugin({
      ...stringifyValues(dotenv.config().parsed),
      ...stringifyValues(dotenv.config({ path: '/.env.special' }).parsed),
      'myObject': stringifyValues({ 
            name: 'Object', 
            description: 'to be an object' 
      })
    })
  ]

如果您真的想要访问process.env：

plugins: [
    new DefinePlugin({
        // this might expose confidential data about your environment
        'process.env': JSON.stringify(process.env),

        // the correct way
        'process.env.USERNAME': JSON.stringify('Donald Hump')
    })
  ]

在前端：

declare var process: any;
console.log(process) // will NOT work, because process hasn't been injected
console.log(process.env); // will work but risky
console.log(process.env.USERNAME); // correct: 'Donald Hump'

Answer 3

在开始时添加REACT_APP_MYAPP的第一个解决方案无效。但是第二种解决方案有效。

解决方案：

在我的require('dotenv').config()中添加webpack.dev.js文件并替换：

   new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("development"),
        "process.env.REACT_APP_MYAPP": JSON.stringify(process.env.REACT_APP_MYAPP)
    })

使用

    new webpack.EnvironmentPlugin(['NODE_ENV', 'REACT_APP_MYAPP']);

谢谢！

Answer 4

只有在变量名中不包含“ REACT_APP_”时，它才能在我的自定义React应用程序模型中起作用：

在webpack.config.js中：

// Node import
const path = require('path');

const webpack = require('webpack');

require('dotenv').config();

module.exports = [
   plugins: [
    new webpack.EnvironmentPlugin(['NODE_ENV', 'API'])
  ],
]

.env中的

NODE_ENV=development
API=http://localhost:5000

但是，当我部署应用程序时（例如在Netlify上），我从生产环境变量中排除了NODE_ENV。

Webpack：使用DefinePlugin和DotEnv未定义process.env

4 个答案: