使用 Gulp 时如何将 React 设置为生产模式

IT技术 javascript python flask reactjs tornado
2021-04-25 13:02:23

我需要在生产模式下运行 React,这大概需要在环境中的某处定义以下内容:

process.env.NODE_ENV = 'production';

问题是我在 Tornado(一个 python 网络服务器)而不是 Node.js 后面运行它。我也使用 Supervisord 来管理 Tornado 实例,所以在运行环境中如何设置它不是很清楚。

但是,我确实使用 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() {});
4个回答

2017 - 编辑:任何试图在 Gulp 中为新项目设置 React 的人:只需使用create-react-app


第 I 步:将以下内容添加到您的 gulpfile.js 某处

gulp.task('apply-prod-environment', function() {
    process.env.NODE_ENV = 'production';
});

第 II 步:将其添加到您的默认任务(或您用于服务/构建应用程序的任何任务)

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

与其他答案类似,但希望给某人一个起点:

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 行(和先前的缓冲区),您会注意到开发版本和生产版本的大小几乎相同 - 并且行数匹配。

不同之处在于生产版本将充斥着:

"production" !== "production" ? [show dev error] : [no nothing]

大多数有信誉的 minify'ers(我相信)会去除死角代码,例如上面的代码,这总是会导致错误。

但我真的要怎么说呢?

最简单的方法是转到正在运行的应用程序的控制台并键入:

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,所有 !== '生产' 警告和检查都已被跳过。

不幸的是,上述答案process.env.NODE_ENV均无效,因为设置在 Browserify 中无效。结果包中仍然有process.env.NODE_ENV引用,因此

  • Browserify 不会require()响应生产版本module,
  • 压缩器将无法删除死代码,并且
  • 应用程序仍将在调试模式下运行。

不幸的是,这不是唯一提供这种方法作为正确答案的地方:-(


正确的方法可以在例如

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

要将 React 设置为生产模式,您需要将 NODE_ENV 变量设置为生产,并将您的 JS 丑化为一个额外的步骤。

您已经在处理丑化问题,以设置您的 NODE_ENV 变量:

  • 在运行 gulp 任务时设置变量:

NODE_ENV='production' gulp

  • 或者通过执行以下操作从您的 gulpfile 内部设置它:

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