您似乎正在使用React的开发版本的缩小副本

时间:2017-04-13 12:08:43

标签: javascript reactjs webpack

更新 - 2017年09

问题在于第三方库本身包含了一个未缩小版本的反应。

好的,我需要帮助。

  • Webpack 1.15.0
  • React 15.5.4

配置的所有内容(大部分)如下所示 https://github.com/davezuko/react-redux-starter-kit

我已经使用相同的入门套件开发了多个项目,从未遇到过这个问题。

我使用以下命令启动编译:

$ NODE_ENV=production npm run compile

ENV var设置正确,我可以看作编译器输出:

app:config:project Creating default configuration. +0ms
app:config:project Looking for environment overrides for NODE_ENV    "production". +4ms
app:config:project Found overrides, applying to default configuration. +2ms
app:config:webpack Creating configuration. +0ms
app:config:webpack DefinePlugin { 'process.env': { NODE_ENV: '"production"' },
'$LOCALES': '{"en-US":"en","it-IT":"ita"}',
NODE_ENV: 'production',
__DEV__: false,
__PROD__: true,
__STAGING__: false,
__TEST__: false,
__COVERAGE__: false,
__BASENAME__: '""' } +1ms
app:config:webpack Enabling plugins for production (OccurenceOrder, Dedupe & UglifyJS). +14ms
app:config:webpack Applying ExtractTextPlugin to CSS loaders. +111ms
app:bin:compile Starting compiler. +1ms

我知道我已经在编译代码中注入了process.env.NODE_ENV,因为在浏览器中env不可用。

我知道这是在webpack中使用以下内容完成的(从我的webpack.config中提取)

webpackConfig.plugins = [
  new webpack.DefinePlugin(project.globals),
  ...
]

其中projects.globals与上面的编译器输出中显示的相同:

config.globals = {
  'process.env'  : {
    'NODE_ENV' : JSON.stringify(config.env)
  },
  '$LOCALES'     : JSON.stringify(config.i18n.locales),
  'NODE_ENV'     : config.env,
  '__DEV__'      : config.env === 'development',
  '__PROD__'     : config.env === 'production',
  '__STAGING__'  : config.env === 'staging',
  '__TEST__'     : config.env === 'test',
  '__COVERAGE__' : !argv.watch && config.env === 'test',
  '__BASENAME__' : JSON.stringify(process.env.BASENAME || '')
}

config.env也被定义:

const config = {
    env : process.env.NODE_ENV || 'development',
    ...

如果没有运行UglifyJsPlugin,我可以在输出中看到很多

if (false):
   // some check like "production" !== process.env.NODE_ENV

似乎是正确的,因为我读了一些github问题(https://github.com/webpack/webpack/issues/868),if (false)是由webpack生成的,因为它正确地注入process.env.NODE_ENV值,因为原始代码应该看起来像

if (!"production" === process.env.NODE_ENV) {
   ...
   if("production" === process.env.NODE_ENV)
}

好的,现在我启用了UglifyJsPlugin:

} else if (__PROD__ || __STAGING__) {
  debug('Enabling plugins for production (OccurenceOrder, Dedupe & UglifyJS).')
  webpackConfig.plugins.push(
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress : {
        unused    : true,
        dead_code : true,
        warnings  : false
      }
    }),
    new webpack.optimize.AggressiveMergingPlugin()
  )
}

输出充满

"production"!==t.env.NODE_ENV

并且警告出现在控制台中:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb[dot]me/react-minification for more details.

我已尝试在搜索此类错误的第一个2/3 Google搜索结果页中建议的所有方法以及" webpack process.env.NODE_ENV"但没有运气。

我正在寻找一些帮助或想法,谢谢。

1 个答案:

答案 0 :(得分:0)

(代表问题作者发布的解决方案)

问题出在第三方库中,该库本身包含未缩小的React版本。