React 不会切换到生产模式

IT技术 node.js reactjs
2021-05-23 18:55:22

浏览器控制台中的警告:

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

如果我使用console.log(process.env.NODE_ENV)in server.js,我会得到production.

  • React通过npm安装
  • 最新版本:15.0.2
  • 我使用 WebpackUglifyJs插件

知道有什么问题吗?


从第一个块引用中的链接:

注意:默认情况下,React 将处于开发模式。要在生产模式下使用 React,请将环境变量 NODE_ENV 设置为生产(使用 envify 或 webpack 的 DefinePlugin)。建议使用 UglifyJS 等执行死代码消除的压缩器来完全删除开发模式中存在的额外代码。

我错过了什么吗?我真的需要某种 3rd 方包或插件来设置变量吗?但是它已经在控制台记录了它在生产环境中的日志。对我来说似乎不合逻辑。


更新:当前的 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' 
      }
    ]
  }
}
1个回答

这就是我通常这样做的方式:

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

并将其传递给 webpack 插件数组。

为什么会出现这个问题:当wepack处理代码时——正在处理的代码实际上并没有运行,而是简单地读取+处理。因此,当您运行它时 - 访问环境变量为时已晚。

您正在检查服务器上运行的进程的环境,而 react 在浏览器中运行,因此显然它无法访问服务器进程环境变量。因此,您需要在构建期间明确地将它注入那里。