使用Gulp时如何将React设置为生产模式 [英] How to set React to production mode when using Gulp
问题描述
process.env在生产模式下运行React，这可能需要在环境中定义以下内容： .NODE_ENV ='生产';
问题在于，我在Tornado（一个python web-server） .js文件。我也使用Supervisord来管理龙卷风实例，所以在运行环境中如何设置它并不十分清楚。
然而，我使用Gulp来构建我的jsx文件JavaScript的。
有没有可能以某种方式在Gulp中设置这个内容？如果是这样，我怎么检查React在生产模式下运行？
这是我的Gulpfile.js：
'use strict';
$ b var gulp = require（'gulp'），
babelify = require（'babelify'），
browserify = require（'browserify'），
browserSync = （'browser-sync'），
source = require（'vinyl-source-stream'），
uglify = require（'gulp-uglify'），
buffer = require（'乙烯基缓冲器'）;
var vendors = [
'react'，
'react-bootstrap'，
'jquery'，
];
$ b 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
}）;
vendor.forEach（function（vendor）{
stream.external（vendor）;
}）;
return stream.bundle（）
.pipe（source （'build.min.js'））
.pipe（buffer（））
.pipe（uglify（））
.pipe（gulp.dest（'build / js'）） ;
}）;
$ b 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（）{}）;
2017 - 编辑：任何人试图设置React in一个新项目的大嘴：只要使用创建反应应用程序
第一步：
> gulp.task（'apply-prod-environment'，function（）{
process.env.NODE_ENV ='production' ;
}）;第二步： 将其添加到您的帐户中默认的任务（或任何你用来服务/建立你的应用程序的任务）
//之前：
// gulp .task（'default'，['browsersync'，'watch']，function（）{}）;
// after：
gulp.task（'default'，['apply-prod-environment'，'browsersync'，'watch']，function（）{}）;
可选： p $ p> gulp.task（'apply-prod-environment'，function（）{
process.stdout.write（将NODE_ENV设置为'production'+\\\
）;
process.env.NODE_ENV ='production';
if（process.env.NODE_ENV！='production'）{
throw new Error（无法将NODE_ENV设置为生产！ （成功将NODE_ENV设置为生产+\ n）;
}
}）;
} else {
process.stdout.write
如果NODE_ENV没有设置为'production'，那么会抛出下面的错误。 b
$ b
[13:55:24]启动'apply-prod-environment'...
[13:55:24]'apply -prod-environment在77微秒后错误
[13:55:24]错误：无法将NODE_ENV设置为生产!!!!
I need to run React in production mode, which presumably entails defining the following somewhere in the enviornment:
process.env.NODE_ENV = 'production';
The issue is that I'm running this behind Tornado (a python web-server), not Node.js. I also use Supervisord to manage the tornado instances, so it's not abundantly clear how to set this in the running environment.
I do however use Gulp to build my jsx files to javascript.
Is it possible to somehow set this inside Gulp? And if so, how do I check that React is running in production mode?
Here is my 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() {});
2017 - Edit: anyone trying to set up React in Gulp for a new project: Just use create-react-app
Step I: Add the following to your gulpfile.js somewhere
gulp.task('apply-prod-environment', function() {
process.env.NODE_ENV = 'production';
});
Step II: Add it to your default task (or whichever task you use to serve/build your app)
// before:
// gulp.task('default',['browsersync','watch'], function() {});
// after:
gulp.task('default',['apply-prod-environment', 'browsersync','watch'], function() {});
OPTIONAL: If you want to be ABSOLUTELY CERTAIN that you are in prod mode, you can create the following slightly enhanced task instead of the one in Step I:
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");
}
});
Which will throw the following error if NODE_ENV is ever not set to 'production'
[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!!!!
这篇关于使用Gulp时如何将React设置为生产模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
