Webpack:使用 DefinePlugin 和 DotEnv 未定义 process.env [英] Webpack: process.env undefined using DefinePlugin and DotEnv

问题描述

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

I would like to get my variable from my .env file but I always get 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 开发

NODE_ENV development

REACT_APP_MYAPP 未定义

REACT_APP_MYAPP undefined

在我的 package.json 中有:

In my package.json there is :

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

在我的 webpack.dev.js 中:

And in my 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 旁边:

And I placed my .env file at the root of my project, next to webpack.dev.js and package.json:

REACT_APP_MYAPP=http://localhost:8080/

REACT_APP_MYAPP=http://localhost:8080/

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

So I think, it doesn't success to get the variable in the file.

请问如何获取代码中的 REACT_APP_MYAPP 值?

How can I get the REACT_APP_MYAPP value in the code please ?

推荐答案

有几种方法可以使这项工作发挥作用.

There's a few ways you could make this work.

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

The easiest to test is to change your "start" : "webpack-dev-server --config webpack.dev.js", to "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 上可用.

This will inject the environment variable and it will be available during the webpack build process. You can use this technique whenever using npm or node to run a command. For instance, NODE_ENV='development REACT_MY_APP=http://localhost:8080/ node myapp.js and both will be available on process.env.

您也可以在 webpack.dev.js 中调用您的 require('dotenv').config() 文件.然后它将在您使用 DefinePlugin 期间进行设置.

You could also call your require('dotenv').config() file inside your webpack.dev.js. Then it would be set during your usage of the DefinePlugin.

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

Generally, you don't use the npm start command to run your development server.

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

As the application grows you should look at the Webpack Environment Plugin. Then you can use the .env for the "production" build settings, requiring it in the production webpack.prod.js, while setting your default/fallback environment variables using the plugin.

这篇关于Webpack:使用 DefinePlugin 和 DotEnv 未定义 process.env的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！