我需要在生产模式下运行React，这可能需要在环境中的某个地方定义以下内容：
process.env.NODE_ENV = 'production';
问题是我在Tornado（一个python web-server）后面运行它，而不是Node.js.我还使用Supervisord来管理龙卷风实例，所以在运行环境中如何设置它并不是很清楚。
但是我使用Gulp将我的jsx文件构建为javascript。
有可能以某种方式在Gulp中设置这个吗？如果是这样，我如何检查React是否在生产模式下运行？
这是我的Gulpfile.js：
'use strict';
var gulp = require('gulp'),
babelify = require('babelify'),
browserify = require('browserify'),
browserSync = require('browser-sync'),
source = require('vinyl-source-stream'),
uglify = require('gulp-uglify'),
buffer = require('vinyl-buffer');
var vendors = [
'react',
'react-bootstrap',
'jquery',
];
gulp.task('vendors', function () {
var stream = browserify({
debug: false,
require: vendors
});
stream.bundle()
.pipe(source('vendors.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('build/js'));
return stream;
});
gulp.task('app', function () {
var stream = browserify({
entries: ['./app/app.jsx'],
transform: [babelify],
debug: false,
extensions: ['.jsx'],
fullPaths: false
});
vendors.forEach(function(vendor) {
stream.external(vendor);
});
return stream.bundle()
.pipe(source('build.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
gulp.task('watch', [], function () {
// gulp.watch(['./app/**/*.jsx'], ['app', browserSync.reload]);
gulp.watch(['./app/**/*.jsx'], ['app']);
});
gulp.task('browsersync',['vendors','app'], function () {
browserSync({
server: {
baseDir: './',
},
notify: false,
browser: ["google chrome"]
});
});
gulp.task('default',['browsersync','watch'], function() {});
答案 0 :(得分：29)
第一步： 将以下内容添加到您的gulpfile.js
gulp.task('apply-prod-environment', function() {
process.env.NODE_ENV = 'production';
});
第二步： 将其添加到默认任务（或用于投放/构建应用的任务）
// before:
// gulp.task('default',['browsersync','watch'], function() {});
// after:
gulp.task('default',['apply-prod-environment', 'browsersync','watch'], function() {});
可选： 如果您想绝对禁止您处于产品模式，可以创建以下略微增强的任务，而不是步骤I中的任务： / p>
gulp.task('apply-prod-environment', function() {
process.stdout.write("Setting NODE_ENV to 'production'" + "\n");
process.env.NODE_ENV = 'production';
if (process.env.NODE_ENV != 'production') {
throw new Error("Failed to set NODE_ENV to production!!!!");
} else {
process.stdout.write("Successfully set NODE_ENV to production" + "\n");
}
});
如果NODE_ENV未设置为＆＃39; production＆＃39;
，则会抛出以下错误[13:55:24] Starting 'apply-prod-environment'...
[13:55:24] 'apply-prod-environment' errored after 77 μs
[13:55:24] Error: Failed to set NODE_ENV to production!!!!
答案 1 :(得分：7)
与其他答案类似，但希望能给某人一个起点：
var vendorList = ['react', 'react-dom'];
gulp.task('vendor-dev', function() {
browserify()
.require(vendorList)
.bundle()
.on('error', handleErrors)
.pipe(source('vendor.js'))
.pipe(gulp.dest('./build/dev/js'));
});
gulp.task('vendor-production', function() {
process.env.NODE_ENV = 'production';
browserify()
.require(vendorList)
.bundle()
.on('error', handleErrors)
.pipe(source('vendor.js'))
.pipe(buffer())
.pipe(uglify({ mangle: false }))
.pipe(gulp.dest('./build/production/js'));
});
主要区别在于我在捆绑供应商库之前明确设置了NODE_ENV。 Gulp任务不能保证按顺序运行。
我是否在生产模式下运行？
如果删除uglify行（和之前的缓冲区），您会注意到dev和production构建的大小几乎相同 - 并且在行数中匹配。
不同之处在于生产版本将会出现：
"production" !== "production" ? [show dev error] : [no nothing]
最值得信赖的minify'ers（我相信）会删除deadend代码，例如上面的内容，这将总是导致错误。
但我该怎么说呢？
最容易确定的方法是，转到正在运行的应用程序的控制台并输入：
React.createClass.toString();
输出应为：
"function (e){var t=function(e,t,n){this.__reactAutoBindMap&&c(this),"[....and more and more]
如果在反应源中找到createClass，您将看到：
createClass: function (spec) {
var Constructor = function (props, context, updater) {
// This constructor is overridden by mocks. The argument is used
// by mocks to assert on what gets mounted.
if ("production" !== 'production') {
"production" !== 'production' ? warning(this instanceof Constructor, 'Something is calling a React component directly. Use a factory or ' + 'JSX instead. See: react-legacyfactory') : undefined;
}
// Wire up auto-binding
if (this.__reactAutoBindMap) {
bindAutoBindMethods(this);
}
注意控制台输出如何直接跳到this.__reactAutobind，因为你在生产模式下运行，并且使用minify'er，所有的！=='生产'警告和检查都被跳过了。
答案 2 :(得分：1)
要在生产模式下设置React，您需要将NODE_ENV变量设置为production并将JS作为额外步骤进行uglify。
您已经在处理uglification，以设置您的NODE_ENV变量：
NODE_ENV='production' gulp
gulp.task('set-production-env', function() {
return process.env.NODE_ENV = 'production';
});
答案 3 :(得分：0)
此外，您可以使用gulp-environments：
var environments = require('gulp-environments');
var production = environments.production;
gulp.src(paths.js)
.pipe(concat("app.js"))
// only minify the compiled JS in production mode
.pipe(production(uglify()))
.pipe(gulp.dest("./public/app/js/"));
在生产模式下运行gulp：
gulp build --env=production
答案 4 :(得分：0)
不幸的是，上述答案都不起作用，因为设置process.env.NODE_ENV对Browserify没有影响。生成的包中仍然包含process.env.NODE_ENV个引用，因此
require() React生产版本模块，遗憾的是，这不是唯一提供此方法作为正确答案的地方： - （
正确的方法可以在例如
中找到您需要将envify转换切换为全局转换，例如
# note the "-g" instead of the usual "-t"
$ browserify ... -g [ envify --NODE_ENV production ] ....
或gulpfile.js
browserify(...)
...
.transform('envify', {
global: true, // also apply to node_modules
NODE_ENV: debug ? 'development' : 'production',
})
...
.bundle()
...
.pipe(gulpif(!debug, babelMinify())) // my example uses gulp-babel-minify
...