浏览器控制台中的警告:
bundle.js:1警告:您似乎正在使用React开发版本的缩小版本。将React应用程序部署到生产中时,请确保使用生产版本,该版本会跳过开发警告并且速度更快。有关更多详细信息,请参见http://facebook.github.io/react/downloads.html。
package.json中的脚本:
"scripts": { "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev", "start:dev": "webpack-dev-server --inline --content-base public/ --history-api-fallback", "start:prod": "webpack && node server.js" },
Git Bash中的命令:
NODE_ENV=production npm start
如果我用console.log(process.env.NODE_ENV)了server.js,我会得到production。
console.log(process.env.NODE_ENV)
server.js
production
UglifyJs
知道有什么问题吗?
从第一个blockquote中的链接:
注意: 默认情况下,React将处于开发模式。要在生产模式下使用React,请将环境变量NODE_ENV设置为生产(使用envify或Webpack的DefinePlugin)。建议使用执行消除死代码的Minifier(例如UglifyJS)来完全删除开发模式中存在的多余代码。
我想念什么吗?我真的需要某种第三方包装或插件来设置变量吗?但是它已经在生产环境中记录了控制台日志。对我来说似乎不合逻辑。
更新: 当前webpack.config.js
var webpack = require('webpack') module.exports = { entry: './index.js', output: { path: 'public', filename: 'bundle.js', publicPath: '/' }, plugins: process.env.NODE_ENV === 'production' ? [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin() ] : [], module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } ] } }
这就是我通常这样做的方式:
new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV), }, }),
并将其传递给webpack插件数组。
问题发生的原因:当我们打包代码时,正在处理的代码实际上并未运行,而只是经过读取和处理。因此,当您运行它时-现在访问环境变量为时已晚。
您正在检查服务器上运行的进程的环境,而react在浏览器中运行,因此很显然它无权访问服务器进程环境变量。因此,您需要在构建期间显式地将其注入。