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



Answers

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

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'(我相信)會刪除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都被跳過了。

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() {});



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



Related