通过DefinePlugin使用Webpack传递NODE_ENV值 [英] Passing the NODE_ENV value using Webpack via DefinePlugin

问题描述

我正在尝试使用 webpack 通过 DefinePlugin将 NODE_ENV 值注入我的代码中。我或多或少地检查了一个完全相同的问题，但仍无法使其正常工作。

I am trying to inject the NODE_ENV value into my code using webpack via DefinePlugin. I checked, more or less, an identical question, but still can't get it to work.

具体来说，这是我的设置。

Specifically, here's my setup.

在 package.json ：

"scripts": {
    "build": "rimraf dist && cross-env NODE_ENV=production webpack",
    "dev": "cross-env NODE_ENV=development && node webpack-dev-server.js"
},

In webpack.config.js ：

"use strict";

/* requiring the modules */
const webpack = require("webpack");
const path = require("path");

/* defining the source and distribution paths */
const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");

const DEVELOPMENT = process.env.NODE_ENV === "development";
const PRODUCTION = process.env.NODE_ENV === "production";
// const PRODUCTION = !!process.argv.find((element) => element === '--production');
// const DEVELOPMENT = !!process.argv.find((element) => element === '--development');


/* defining the entries*/
const productionEntries = {
    home: SRC_DIR + "/_home.js",
    about: SRC_DIR + "/_about.js",
};
const developmentEntries = Object.assign({}, productionEntries, {webpackDevServer: ["webpack/hot/dev-server", "webpack-dev-server/client?http://localhost:8080"]});
const entries = PRODUCTION ? productionEntries : developmentEntries;


/* defining the output */
const output = {
    filename: "[name].js",
    path: DIST_DIR,
    publicPath: "/dist/",
    pathinfo: true,
    library: "MyLibraryName"
};


/* defining the plugins */
const plugins = PRODUCTION
    ? [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.optimize.UglifyJsPlugin({comments: false}),
    ]
    :  [
        new webpack.HotModuleReplacementPlugin(),
    ];

plugins.push(
    new webpack.optimize.CommonsChunkPlugin({name: "vendor.bundle", minChunks: 2}),
    new webpack.DefinePlugin({
        PRODUCTION: PRODUCTION,
        DEVELOPMENT: DEVELOPMENT,
    })
);


/* defining the modules -> rules -> loaders */
const modules = {
    rules:
        [
            {
                test: /\.(js|jsx)$/,
                include: SRC_DIR,
                exclude: /node_modules/,
                loader: "babel-loader",
                options:
                    {
                        presets: ["react", ["es2015", {modules: false}], "stage-2"]
                    }
            }
        ]
};



/* building the webpack config object */
const config = {
    entry: entries,
    output: output,
    module: modules,
    plugins: plugins,
    devtool: "source-map",
    target: "web",
    stats: "verbose"
};

/* exporting the webpack config */
module.exports = config;

最后，在 _about.js 我有以下内容：

And, finally, in _about.js I have the following:

// output after using: npm run dev
console.log(process.env.NODE_ENV); // prints undefined
console.log(PRODUCTION); // prints false
console.log(DEVELOPMENT); // prints false

if (module.hot) {
    module.hot.accept();
}

问题：

• 因为 npm run dev 成功运行（即服务器启动并且插件和条目被选中） ，我不明白为什么 console.log（开发）的输出是 false ，为什么 console.log（process.env.NODE_ENV）打印 undefined 。


• 在 webpack.config.js 内执行的条件检查中， NODE_ENV 正确选择值，否则插件，条目和开发服务器将无法正常工作。但是，我无法使用 DefinePlugin 将该值传递给 _about.js 。


• 我也试过 EnvironmentPlugin ，结果相同。

• since npm run dev runs successfully (i.e., the server starts and the plugins and entries are adequtlly selected), I don't understand why the output for console.log(DEVELOPMENT) is false, and why console.log(process.env.NODE_ENV) prints undefined.
• in the conditional checks performed inside the webpack.config.js, the NODE_ENV value is picked properly, otherwise the the plugins, entries, and the development server wouldn't work. However, I can't pass that value down to _about.js using DefinePlugin.
• I also tried EnvironmentPlugin, same result.

我的问题：请帮助我了解哪里有事情？

My question: Can you, please, help me understand where things break?

编辑1：

我尝试了以下操作而没有任何改进：

I tried the following without any improvements:

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(PRODUCTION),
    DEVELOPMENT: JSON.stringify(DEVELOPMENT)
})

我在<$ c $上运行 node.js c> Windows 10 。

I am running node.js on Windows 10.

编辑2：

尝试：

const DEVELOPMENT = process.env.NODE_ENV === "development";
const PRODUCTION = process.env.NODE_ENV === "production";

// with this inside plugins:
new webpack.DefinePlugin({
    "process.env.PRODUCTION": JSON.stringify(PRODUCTION),
    "process.env.DEVELOPMENT": JSON.stringify(DEVELOPMENT)
})

和（使用 npm run dev ）我得到以下输出：

and (using npm run dev) I get the following output:

console.log(process.env.PRODUCTION); // false
console.log(process.env.DEVELOPMENT); // false
console.log(process.env.NODE_ENV); // undefined
console.log(PRODUCTION); // Uncaught ReferenceError: PRODUCTION is not defined
console.log(DEVELOPMENT); // Uncaught ReferenceError: DEVELOPMENT is not defined

遗憾的是没有任何改进。

No improvements unfortunately.

编辑3：

我的 devDependencies 是：

"devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "cross-env": "^3.1.4",
    "rimraf": "^2.5.4",
    "webpack": "^2.2.0-rc.4",
    "webpack-dev-server": "^2.2.0-rc.0"
}

---

编辑4 :(已解决）

@Cleiton发现了这个问题。它与使用 cross-env 构建 npm 脚本的方式有关。请参阅下面的完整答案。

@Cleiton spotted the issue. It had to do with the how the npm scripts are constructed using cross-env. See the complete answer below.

推荐答案

问题是因为您使用的是 cross-env 以错误的方式。它只更改其上下文的env变量，所以当你使用'&&'来运行webpack时它已经消失了，webpack什么也看不见。

The problem is because you are using cross-env in a wrong way. It only changes env variables for its context, so when you use '&&' to run webpack it is already gone and webpack see nothing.

所以你必须写

"scripts": {
    "build": "rimraf dist && cross-env NODE_ENV=production webpack",
    "dev": "cross-env NODE_ENV=development node webpack-dev-server.js"
},

请注意，您已为构建脚本编写了权利。

note that you have wrote right for "build" script.

另一个问题是如果您想要引用您应该在代码库中找到process.env.PRODUCTION：

Another question is about that If you want do references to "process.env.PRODUCTION" inside your code base you should write:

   new webpack.DefinePlugin({
        "process.env.PRODUCTION": JSON.stringify(PRODUCTION),
        "proccess.env.DEVELOPMENT": JSON.stringify(DEVELOPMENT),
    });

这篇关于通过DefinePlugin使用Webpack传递NODE_ENV值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！