場合（process.env.NODE_ENV ===の生産 '）常にfalse

Question

package.jsonに、このスクリプトのリストからビルドコマンドを実行して、アンギュラWebPACKのアプリケーションを構築しようとすると：

"scripts": { 
    "test": "NODE_ENV=test karma start", 
    "build": "if exist dist rd /s /q dist && mkdir dist && set NODE_ENV=production && webpack && cp app/index.html dist/index.html", 
    "start": "webpack-dev-server --content-base app" 
    }, 

これは、コンソール上での結果である：

$ npm run build 

    > webpack-ng-egg@1.0.0 build M:\Learning webpack\egghead.io - AngularJS - Angula 
    r and Webpack for Modular Applications\webpack-ng-egg 
    > if exist dist rd /s /q dist && mkdir dist && set NODE_ENV='production' && webp 
    ack && cp app/index.html dist/index.html 

    process.env.NODE_ENV : 'production' 
    process.env.NODE_ENV === 'production' ???? : false 
    Hash: c3136b0024cbd48ccb2e 
    Version: webpack 1.13.2 
    Time: 3185ms 
     Asset  Size Chunks    Chunk Names 
    bundle.js 1.23 MB  0 [emitted] main 
     + 10 hidden modules 

これはwebpack.config.jsファイルどのように見えるかです：

var webpack = require('webpack'); 
    var path = require('path'); 
    var config = { 
     context: path.resolve(__dirname, "app"), 
     entry:'./app.js', 
     output: { 
      path : __dirname + '/app', 
      filename:'bundle.js' // il ne sera pas généré dans le code, juste en mémoire 
     }, 
     plugins:[ 
      new webpack.DefinePlugin({ 
       ON_TEST:process.env.NODE_ENV === 'test' 
      }) 
     ], 
     module:{ 
      loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', // 'babel-loader' is also a legal name to reference 
       query: { 
       presets: ['es2015'] 
       } 
      }, 
      { test: /\.css$/, 
       loader: "style-loader!css-loader", 
       exclude: /(node_modules|bower_components)/ 
      }, 
      { 
       test: /\.html$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'raw', // 'babel-loader' is also a legal name to reference 
      }, 
      { test: /\.styl$/, 
       loader: 'style-loader!css-loader!stylus-loader', 
       exclude: /(node_modules|bower_components)/ 
      } 
      ] 
     }, 
     devServer:{ 
      //contentBase:path.join(__dirname, 'dist') // ceci est juste un exemple, si dist est l'endroit ou on aurait généré les fichiers 
      inline:true, // les mises à jour de style ne sont plus affichés instantnément avec cette option donc j'ai ajouté le watch:true et çà marché!!! 
      watch:true 

     } 
     /*resolve: { 
      extensions: ['', '.js', '.jsx', '.css'] 
     }, 
     resolveLoader: { 
      root: require('path').resolve(__dirname, "node_modules") 
     }*/ 
    } 

    console.log("process.env.NODE_ENV : " + process.env.NODE_ENV); 
    console.log("process.env.NODE_ENV === 'production' ???? : " + (process.env.NODE_ENV == 'production')); 
    //config.output.path = path.resolve(__dirname, "dist"); 
    //console.log("config.output.path : " + config.output.path); 


    if(process.env.NODE_ENV === 'production') { 
     console.log("this is the prod env!!!!!!!!!!"); 
     config.output.path = path.resolve(__dirname, "dist"); 
    } 

    module.exports = config; 

ここで問題となるのは、(process.env.NODE_ENV === 'production')をテストすると、たとえそれが想定されていても真実を返すことはありません（上記のコンソールに何が記録されているのかを見てください）。私は単純な平等の代わりに厳しいものに挑戦しようとしましたが、それでも常に偽になります。

Answer 1

今日、この問題が発生しました。

set NODE_ENV=production && somethingをnpm scriptsで使用した場合、NODE_ENV=productionは、production + " "となり、後に空白が1つあります。

したがって、productionとproduction + " "を比較しています。これは明らかにfalseを返します。

scripts: { 
    "start": "set NODE_ENV=development && webpack --watch --progress", 
    "test": "set NODE_ENV=production && webpack" 
} 

比較

console.log(process.env.NODE_ENV.trim() === "production"); //True if ran test else false 
console.log(process.env.NODE_ENV === "production"); //False 
console.log(process.env.NODE_ENV.trim() === "development"); //True if ran start else false 
console.log(process.env.NODE_ENV === "development"); //False 

webpack.config.jsので

const webpack = require("webpack"); 
const dev = process.env.NODE_ENV.trim() !== "production"; 

module.exports = { 
    entry: "./index.js", 
    output: { 
     path: "./", 
     filename: "parse.js" 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js/, 
       use: "babel-loader", 
       exclude: /node_modules/ 
      } 
     ] 
    }, 
    plugins: dev ? [] : [ 
     new webpack.optimize.UglifyJsPlugin() 
    ], 
    target: "node" 
}; 

のワーキングサンプル

package.json、trim()を使用しています。

Answer 2

NODE_ENVに一重引用符を格納しているため、NODE_ENVの値は実際には"production"ではなく"'production'"です。これはあなたのデバッグ出力で明らかです。

set NODE_ENV='production'からset NODE_ENV=productionに変更してください。期待どおりに動作するはずです。