React App忽略生產模式的NODE_ENV

對於React我很新，我已經使用webpack作爲模塊捆綁器和npm構建了客戶端反應應用程序。它在使用Webpack devServer進行開發時可以順利運行。在製作過程中，我使用express作爲服務器。在localhost：8080上運行時，它顯示正常，但我得到這些警告。我設置了NODE_ENV ='生產'，但仍然是相同的警告。React App忽略生產模式的NODE_ENV

這裏是我的生產配置文件

production.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 
const webpack = require('webpack') 
const path = require('path') 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 



const config ={ 
devtool: 'cheap-module-source-map', 


    entry: [ 
    'react-hot-loader/patch', 
    './client/main.js' 
    ], 

    output: { 
    path: path.resolve(__dirname, 'build'), 
    filename: 'app.bundle.js', 
    publicPath:'/' 

    }, 


    module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
      { 
       loader: 'css-loader', 
       //query: { sourceMap: false }, 
       options: { 
       importLoaders: 1, 
       } 
      }, 
      { 
       loader: 'postcss-loader' 
      } 
      ] 

     }) 
     }, 
     { 
     test: /\.jsx?$/, 
     use: 'babel-loader', 
     exclude: /node_modules/ 
     }, 

     { 
     test: /\.(png|jpe?g|gif|svg|ico|\.woff$|\.ttf$|\.wav$|\.mp3$)$/i, 
     use: ['file-loader?name=img/[name].[ext]', 
      'image-webpack-loader'] 

     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file-loader?name=fonts/[name].[ext]' 

     } 
    ] 
    }, 

    plugins: [ 
    //index.html custom template 
    new HtmlWebpackPlugin({ 
     title: 'Index', 
     template: './index.html' 

    }), 
    new webpack.EnvironmentPlugin(
     { 
     'process.env': 
     { 
     NODE_ENV: JSON.stringify('production') } 
    } 
    ), 

    //extract css files 
    new ExtractTextPlugin({filename:"styles.css",disable:false,allChunks:true}), 
    new UglifyJsPlugin({ 
     sourceMap: false, 
     mangle: true, 
     beautify:false, 
     compress: { 
     warnings: false, // Suppress uglification warnings 
     pure_getters: true, 
     unsafe: true, 
     unsafe_comps: true, 
     screw_ie8: true 
     }, 
     output: { 
     comments: false 
     } 
    }) 


    ] 
}; 

module.exports=config

的package.json

{ 
    "name": "react-app", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "webpack": "webpack", 
    "dev": "webpack-dev-server --colors", 
    "prod": "npm run build && node deploy.js", 
    "build": "webpack --config production.config.js --progress --colors" 
     }

//依賴省略 }

來源

2017-10-14 Ndx

嘗試'「build」：「export NODE_ENV = production && NODE_ENV = production && webpack --config production.config.js --progress --colors」'。您可能還需要在shell中將NODE_ENV設置爲'production'，這些額外的命令將執行此操作。 – Jaxx

剛剛嘗試過您的解決方案，但它將導出爲不是公認的命令。我的操作系統是windows。 – Ndx

https://stackoverflow.com/questions/40212411/what-is-windows-equivalent-command-to-export-user-supplied-password-pswd。顯然，等效的Windows命令是'set'。 – Jaxx

嘗試採用這種封裝形式：https://www.npmjs.com/package/cross-env

我相信這是與設置NODE_ENV =生產中，它解決了Windows命令提示一個問題。

用例：

構建腳本：

cross-env NODE_ENV=production webpack

webpack.config.js：

const webpack = require('webpack'); 

const env = process.env.NODE_ENV || 'production'; 

//... 

plugins = [ 
    new webpack.DefinePlugin({ 
    'process.env': { 
     NODE_ENV: JSON.stringify(env) 
    } 
    }) 
] 

//...

希望有所幫助。

來源

2017-10-15 05:01:37 MikeDiaz1

謝謝你的答案！我通過將'process.env'設置爲'process.env.NODE_ENV'並將'set NODE_ENV ='production''設置爲引用來解決它，並且它工作正常。自從我接近我所做的修復以來，我會加倍努力。 – Ndx

React App忽略生產模式的NODE_ENV

回答

相關問題