您目前正在使用NODE_ENV以外的缩小代码===> '生产'

时间:2017-11-10 07:04:37

标签: reactjs react-native redux react-redux

  

“您目前正在使用NODE_ENV之外的缩小代码===   '生产'。这意味着您正在运行较慢的开发   Redux的构建。你可以使用loose-envify   (https://github.com/zertosh/loose-envify)用于browserify或   Webpack的DefinePlugin(http://stackoverflow.com/questions/30030031)   确保您拥有正确的生产构建代码。“

当我尝试在本机中运行我的应用程序时,我得到此错误,我不知道如何解决此错误,我已经在谷歌搜索解决方案。但我仍然得到这个错误

3 个答案:

答案 0 :(得分:0)

您可以将此配置添加到webpack.config,js以暂时删除此警告,

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

答案 1 :(得分:0)

您可以在脚本中定义节点env。基于你打开插件

在开发中,您不需要缩小代码。但在生产中它应该缩小。而且你不需要在生产中使用HOT LOADER,反之亦然。因此,最好定义节点ENV变量,并根据它进行切换。

这就是你如何定义它。

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

基于此环境,您可以使用更多/更少的插件来处理您的代码库 这是我基于env的常见webpackconfig。

下面是我的reactjs配置条件检查。你可以将simler概念应用于Native

const env=process.env.NODE_ENV;
const isProd = (env.toLowerCase().trim()=== 'production' || env.toLowerCase().trim() === 'staging')? true: false;
if (isProd) {
 //config.plugins will have all common plugin for both dev and prod
  Array.prototype.push.apply(config.plugins, [
    new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      minChunks(module) {
        const { context } = module;
        if (typeof context !== 'string') {
          return false;
        }
        return context.indexOf('node_modules') !== -1;
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks(module, count) {
        return count >= 2;
      },
    }),
    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|html)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
      noInfo: true,
      options: {
        context: './',
      },
    }),
    new HtmlWebpackPlugin({
      title: 'React App',
      filename: 'index.html',
      template: './src/index.ejs',
      favicon: './src/favicon.ico',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    }),
  ]);
} else {
  config.entry.splice(1, 0, 'react-hot-loader/patch');
  Array.prototype.push.apply(config.plugins, [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      title: 'React App',
      filename: 'index.html',
      template: './src/index.ejs',
      inject: true,
      favicon: './src/favicon.ico',
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: false,
      debug: true,
      noInfo: false,
      options: {
        context: './',
      },
    }),
  ]);
}

答案 2 :(得分:0)

我有同样的问题。 如果您正在使用expo来创建React Native应用,请检查 .expo 文件夹 在 settings.json 中:

{ 
  //you should have setted 
  minified: false,
  //when is 
  dev: true
}

那解决了我的问题