React不会切换到生产模式

  • Z时代
  • 2024-01-10
  • 分类：问答

浏览器控制台中的警告：

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)了server.js，我会得到production。

  • 通过 npm 安装React

  • 最新版本：15.0.2

  • 我使用Webpack UglifyJs插件

从第一个blockquote中的链接：

默认情况下，React将处​​于开发模式。要在生产模式下使用React，请将环境变量NODE_ENV设置为生产（使用envify或Webpack的DefinePlugin）。建议使用执行消除死代码的Minifier（例如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' 
      }
    ]
  }
}

回答：

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

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

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

问题发生的原因：当我们打包代码时，正在处理的代码实际上并未运行，而只是经过读取和处理。因此，当您运行它时-现在访问环境变量为时已晚。

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

以上是 React不会切换到生产模式 的全部内容， 来源链接： utcz.com/qa/428509.html

回到顶部