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

【字号: 日期:2024-04-20浏览:11作者:雯心
(adsbygoogle = window.adsbygoogle || []).push({}); 如何解决您当前正在使用NODE_ENV ==='production'之外的缩小代码这意味着您正在运行较慢的Redux开发版本?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定义插件如何工作的解释。

原始答案+说明

:使用webpack define插件设置process.env.NODE_ENV为正式版。

长版:

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

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

您收到的错误是Redux告诉您,尽管您已缩小代码,process.env.NODE_ENV但未设置为production,因此开发检查仍在进行中。要解决此问题,您将需要使用webpackdefine插件设置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=productionwebpack -p,而不仅仅是运行webpack-p。这将替换的任何实例process.env.NODE_ENV与production你的包。因此,我上面显示的支票现在看起来像这样:

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

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

解决方法

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

相关文章: