如何在使用Gulp時將React設置為生產模式

Question

我需要在生產模式下運行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() {});

Answer 1

2017年 - 編輯：任何人都試圖在Gulp中為一個新項目設置React：只需使用create-react-app

---

第一步：將以下內容添加到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中的任務：

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未設置為“生產”，則會拋出以下錯誤

[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!!!!

Answer 2

與其他答案類似，但希望給某人一個起點：

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]

如果在react源中找到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，所有的！=='production'warngins和check都被跳過了。

Answer 3

要在生產模式下設置React，您需要將NODE_ENV變量設置為production並將JS作為額外步驟進行uglify。

您已經在處理uglification，用於設置NODE_ENV變量：

• 在運行gulp任務時設置變量：

NODE_ENV='production' gulp

• 或者通過執行以下操作從gulpfile中設置它：

gulp.task('set-production-env', function() { return process.env.NODE_ENV = 'production'; });

Answer 4

您也可以使用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

Answer 5

遺憾的是，上述答案都不起作用，因為設置process.env.NODE_ENV在Browserify中沒有效果。 生成的bundle仍然包含process.env.NODE_ENV引用，因此

• Browserify require() React生產版本模塊，
• minifier將無法刪除死代碼，並且
• 應用程序仍將以調試模式運行。

不幸的是，這不是唯一提供這種方法作為正確答案的地方:-(

---

正確的方法可以在例如

• https://github.com/hughsk/envify/issues/15#issuecomment-62229101
• https://reactjs.org/docs/optimizing-performance.html#browserify

您需要將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
    ...