web-dev-qa-db-fra.com

Passer la valeur NODE_ENV à l'aide de Webpack via DefinePlugin

J'essaie d'injecter la valeur NODE_ENV Dans mon code en utilisant webpack via DefinePlugin. J'ai vérifié, plus ou moins, une question identique , mais je n'arrive toujours pas à le faire fonctionner.

Plus précisément, voici ma configuration.

Dans package.json:

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

Dans 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;

Et, enfin, dans _about.js J'ai ce qui suit:

// 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();
}

Le problème :

  • comme npm run dev s'exécute correctement (c'est-à-dire que le serveur démarre et que les plugins et les entrées sont correctement sélectionnés), je ne comprends pas pourquoi la sortie de console.log(DEVELOPMENT) est false, et pourquoi console.log(process.env.NODE_ENV) affiche undefined.
  • dans les vérifications conditionnelles effectuées à l'intérieur du webpack.config.js, la valeur NODE_ENV est choisie correctement, sinon les plugins, les entrées et le serveur de développement ne fonctionneraient pas. Cependant, je ne peux pas transmettre cette valeur à _about.js En utilisant DefinePlugin.
  • J'ai également essayé EnvironmentPlugin, même résultat.

Ma question : Pouvez-vous, s'il vous plaît, m'aider comprendre où les choses se cassent?

Modifier 1:

J'ai essayé ce qui suit sans aucune amélioration:

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

J'exécute node.js Sur Windows 10.

Édition 2:

A essayé:

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)
})

et (en utilisant npm run dev) j'obtiens la sortie suivante:

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

Aucune amélioration malheureusement.

Édition 3:

Mes devDependencies sont:

"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"
}

Édition 4: (résolu)

@Cleiton a repéré le problème. Cela avait à voir avec la façon dont les scripts npm sont construits en utilisant cross-env. Voir la réponse complète ci-dessous.

javascriptnode.jsnpmwebpack
13
Mihai

Le problème est dû au fait que vous utilisez cross-env dans le mauvais sens. Il ne modifie que les variables env pour son contexte, donc lorsque vous utilisez '&&' pour exécuter webpack, il est déjà parti et webpack ne voit rien.

Vous devez donc écrire

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

notez que vous avez bien écrit pour le script "build".

Une autre question est à ce sujet. Si vous voulez faire des références à "process.env.PRODUCTION" dans votre base de code, vous devez écrire:

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

Le DefinePlugin attend des chaînes, vous devez donc JSON.stringify() toutes les valeurs qui lui sont passées.

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