您当前正在使用 NODE_ENV === 'production' 之外的缩小代码。这意味着您正在运行一个较慢的 Redux 开发版本

Posted 2023-02-22

【中文标题】您当前正在使用 NODE_ENV === \'production\' 之外的缩小代码。这意味着您正在运行一个较慢的 Redux 开发版本

【英文标题】：You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux您当前正在使用 NODE_ENV === 'production' 之外的缩小代码。这意味着您正在运行一个较慢的 Redux 开发版本

【发布时间】：2017-09-27 09:48:00

【问题描述】：

我创建了一个基本应用并将其部署到生产环境。运行 webpack -p 并启动​​服务器后，我现在收到此控制台日志错误：

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://***.com/questions/30030031) to ensure you have the correct code for your production build.

这是我的 webpack.config.js 文件：

module.exports = 
  entry: [
    './src/index.js'
  ],
  output: 
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  ,
  module: 
    loaders: [
      exclude: /node_modules/,
      loader: 'babel',
      query: 
        presets: ['react', 'es2015', 'stage-1']
      
    ]
  ,
  resolve: 
    extensions: ['', '.js', '.jsx']
  ,
  devServer: 
    historyApiFallback: true,
    contentBase: './'
  
;

我对 React 和 Webpack 非常陌生，尤其是。如果有人能指出问题所在并帮助我了解 webpack（这非常令人困惑），那将永远感激不尽！

编辑：

我添加了 webpack 插件并运行 NODE_ENV=production webpack -p 并在终端中收到此错误：

/Users/Joseph/workspace/weather-fcc/webpack.config.js:27
    new webpack.DefinePlugin(
        ^

ReferenceError: webpack is not defined
    at Object.<anonymous> (/Users/Joseph/workspace/weather-fcc/webpack.config.js:27:9)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at requireConfig (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:96:18)
    at /usr/local/lib/node_modules/webpack/bin/convert-argv.js:109:17` FWIW my webpack version is 1.12.9

【参考方案1】：

Webpack 4 更新

如果你使用 webpack >= 4，你可以将 mode 设置为 production。这将自动将NODE_ENV 定义为production，而无需使用define 插件。 https://webpack.js.org/concepts/mode/#mode-production.

似乎 webpack 已经更新了 -p 标志，以在您的捆绑代码中自动将 process.env.NODE_ENV 定义为 production（感谢 @x-yuri 指出这一点）。因此，虽然现在不需要下面的答案，但我将其保留在那里以供参考，并解释 webpack 定义插件的工作原理。

原答案+解释

TLDR：使用webpack define plugin 将process.env.NODE_ENV 设置为生产环境。

长版：

React、Redux 和许多其他 JS 库包含额外的验证和错误日志记录，使开发更容易。但是，您显然不希望在生产中使用它，因为它们会使您的代码库更大且更慢。这些检查通常包含在如下所示的语句中：

if (process.env.NODE_ENV !== 'production') 
  // do development checks

你得到的错误是 Redux 告诉你虽然你已经缩小了代码，process.env.NODE_ENV 没有设置为production，所以开发检查仍然存在。要解决此问题，您需要使用 webpack define plugin 将 process.env.NODE_ENV 设置为生产环境。

var webpack = require('webpack');

module.exports = 
  entry: [
    './src/index.js'
  ],
  output: 
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  ,
  module: 
    loaders: [
      exclude: /node_modules/,
      loader: 'babel',
      query: 
        presets: ['react', 'es2015', 'stage-1']
      
    ]
  ,
  resolve: 
    extensions: ['', '.js', '.jsx']
  ,
  devServer: 
    historyApiFallback: true,
    contentBase: './'
  ,
  plugins: [
    new webpack.DefinePlugin(
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    ),
  ]
;

请注意，我将 process.env.NODE_ENV 的值定义为运行 webpack 时为您设置的任何值。因此，要生成您的生产包，您需要运行NODE_ENV=production webpack -p，而不仅仅是webpack -p。这将在你的包中用production 替换process.env.NODE_ENV 的任何实例。所以我上面显示的检查现在看起来像这样：

if ('production' !== 'production') 
  // do development checks

Minifiers 足够聪明，可以检测到 if 语句中的代码永远不会发生，并将其从您的生产包中删除。因此，您可以获得两全其美：更好的开发体验，并且在您的生产包中没有额外的代码:)

【讨论】：

编辑了我原来的帖子。添加了插件，不幸的是仍然出现错误！ FWIW 我的 webpack 版本是 1.12.9

确保您的配置文件顶部有var webpack = require('webpack')

现在工作！呜呜呜！！关于 webpack 插件的精彩解释 - 谢谢！

"例如，--optimize-minimize 标志将包括幕后的 UglifyJSPlugin。--define process.env.NODE_ENV="'production'" 将对 DefinePlugin 实例执行相同的操作如上所述。而且，webpack -p 将自动调用这两个标志，从而包含要包含的插件。没有运行webpack -penough？如果您要在webpack.config.js 中使用NODE_ENV，那么您只需要在前面加上NODE_ENV=production。我错过了什么吗？

是的，你是对的。自从我写了这个答案之后，这可能已经改变了，但我仍然建议你了解这一切是如何在幕后工作的

【参考方案2】：

在 react native 和 redux 中去

node_modules/redux/src/index.js

删除或评论：

if (
  process.env.NODE_ENV !== 'production' &&
  typeof isCrushed.name === 'string' &&
  isCrushed.name !== 'isCrushed'
) 
  warning(
    'You are currently using minified code outside of NODE_ENV === "production". ' +
      'This means that you are running a slower development build of Redux. ' +
      'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' +
      'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' +
      'to ensure you have the correct code for your production build.'
  )