web-dev-qa-db-fra.com

Puis-je utiliser NODE_ENV = "staging" avec mode = "production" dans le Webpack 4?

Mon application utilise NODE_ENV pour décider quel serveur api doit demander à.

NODE_ENV="production" => https://api.***/
NODE_ENV="staging" => https://api.staging-***/
NODE_ENV="development" => http://localhost:3000/

Je souhaite créer un paquet de stockage intermédiaire avec mode = "production", mais je garde NODE_ENV = "staging".

J'essaie de construire avec la configuration ci-dessous, mais bundle.js devient NODE_ENV = "production".

{
   mode: "production",
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
         'NODE_ENV': JSON.stringify("staging")
       }
     })
   ]
 }
webpackwebpack-4
5
Fumiya Karasawa

Je pense que vous souhaitez que votre build de mise en scène soit optimisé, tout comme votre build de production. Et pour autant que je sache, certaines bibliothèques (comme React ) vérifient si NODE_ENV === "production" supprime certaines erreurs de traitement ou offre d'autres optimisations. Donc, si vous définissez NODE_ENV sur staging, ils "penseront" que c'est un environnement de développement. 

Dans ce cas, je voudrais simplement utiliser une variable différente, telle que:

package.json 

"scripts": {
  "dev": "webpack-dev-server --config webpack.config.js --env.TARGET_ENV=development",
  "staging": "webpack --config webpack.config.js --env.TARGET_ENV=staging",
  "production": "webpack --config webpack.config.js --env.TARGET_ENV=production"
},

webpack.config.js 

module.exports = (env) => {
  const mode = env.TARGET_ENV === 'development' ? 'development' : 'production';

  return {
    mode: mode,
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          'TARGET_ENV': JSON.stringify(env.TARGET_ENV)
        }
      })
    ]
    // ...rest of config based on environment
  };
};
3
Tomasz Mularczyk

Webpack-cli est obsolète et la syntaxe avec env ne fonctionne plus avec Webpack-command ( https://github.com/webpack-contrib/webpack-command#the---env-flag-is- nuked ).

Pour répondre à vos besoins, j’utiliserais une simple variable env et l’utiliserais de manière standard.

var API_URL = {
  production: JSON.stringify('https://foo.bar/api'),
  development: JSON.stringify('http://localhost:3000/api'),
  staging: JSON.stringify('http://foo.stage.bar/api')
}

module.exports = function(argv) {
  const TARGET = process.env.TARGET_ENV ? process.env.TARGET_ENV : 'development';
  return {
    mode: argv.mode ? argv.mode : 'development',
....
    new webpack.DefinePlugin({
        'API_URL': API_URL[TARGET]
    }),
....
}

et appelez webpack comme ceci:

TARGET_ENV=staging webpack

De cette façon, vous trouveriez votre variable env API_URL définie globalement dans l'application. 

J'éviterais de redéfinir NODE_ENV via le plugin define.

1
sickrandir