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

IT技术 reactjs webpack redux
2021-05-24 12:04:47

我已经创建了一个基本的应用程序并将其部署到生产环境中。运行 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://stackoverflow.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
2个回答

Webpack 4 更新

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

这似乎也已经的WebPack更新-p标志自动定义process.env.NODE_ENVproduction你绑定的代码(指出这点感谢@ X-尤里)。因此,虽然现在不需要下面的答案,但我将其保留在那里以供参考,并作为对 webpack 定义插件如何工作的解释。

原答案+解释

TLDR:使用webpack 定义插件设置process.env.NODE_ENV为生产。

长版:

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

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

你得到的错误是 Redux 告诉你,虽然你已经缩小了代码,但process.env.NODE_ENV没有设置为production,所以开发检查仍然存在。要解决此问题,您需要使用webpack 定义插件设置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. 这将替换您的包中的任何process.env.NODE_ENVwith实例production所以我上面显示的检查现在看起来像这样:

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

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

在 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.'
  )
}