React没有切换到生产模式

Question

浏览器控制台警告：

bundle.js:1 警告：看起来你正在使用React开发版本的缩小版。在将React应用程序部署到生产环境时，请确保使用跳过开发警告且更快的生产构建。有关更多详细信息，请参见http://facebook.github.io/react/downloads.html。

---

package.json中的脚本：

  "scripts": {
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:dev": "webpack-dev-server --inline --content-base public/ --history-api-fallback",
    "start:prod": "webpack && node server.js"
  },

---

Git Bash 中的命令：

NODE_ENV=production npm start

如果我在server.js中使用console.log(process.env.NODE_ENV)，会得到production。

React是通过npm安装的，最新版本为15.0.2。我使用了Webpack的UglifyJs插件。

有什么错误吗？

从第一个引用块中的链接可以看出：

默认情况下，React将处于开发模式。要在生产模式下使用React，请将环境变量NODE_ENV设置为production（使用envify或webpack的DefinePlugin）。建议使用执行死代码消除的缩小器，例如UglifyJS，以完全删除开发模式中存在的额外代码。

我错过了什么吗？我真的需要某种第三方包或插件来设置变量吗？但它已经在控制台日志中显示为生产环境了，这对我来说似乎不合逻辑。

更新：当前webpack.config.js。

var webpack = require('webpack')

module.exports = {
  entry: './index.js',

  output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: '/'
  },

  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : [],

  module: {
    loaders: [
      { 
          test: /\.js$/, 
          exclude: /node_modules/, 
          loader: 'babel-loader?presets[]=es2015&presets[]=react' 
      }
    ]
  }
}

- Solo

---

请检查 webpack.DefinePlugin 并在 webpack 配置中手动传递 process.env。 - zerkms

我已经更新了我的问题，并附上了我的当前webpack配置文件。@zerkms - Solo

"环境检查完美运行" --- 您检查服务器进程的环境，而React在浏览器中运行。 - zerkms

Answer 1

这通常是我做事的方式：

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

将其传递给webpack插件数组。

问题出现的原因：当webpack处理代码时，处理的代码实际上并没有运行，而是读取+处理。所以当你运行它时，访问环境变量已经太迟了。

您正在检查服务器上运行的进程的环境，而React在浏览器中运行，显然无法访问服务器进程环境变量。因此，您需要在构建时显式地注入它。

- zerkms

---

对我没用...错误仍然显示:/ - pgarciacamou

@camou请提出一个单独的问题并提供所有细节。 - zerkms

@zerkms http://stackoverflow.com/questions/43267458/reactjs-shows-error-when-uglifying-even-with-production-env-with-webpack - pgarciacamou