我需要在生产模式下运行React,这可能需要在环境中的某个地方定义以下内容:

process.env.NODE_ENV = 'production';

问题是我在Tornado(一个python web服务器)后面运行这个,而不是Node.js.我还使用Supervisord来管理tornado实例,因此还不清楚如何在运行环境中设置它.

不过,我确实使用Gulp将jsx文件构建为javascript.

有没有可能把它放在肚子里?如果是这样,我如何判断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() {});

推荐答案

2017 - Edit: anyone trying to set up React in Gulp for a new project: Just use create-react-app


100将以下内容添加到您的gulpfile中.某处

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

100将其添加到默认任务(或用于服务/构建应用程序的任务)

// before: 
// gulp.task('default',['browsersync','watch'], function() {});
// after:
   gulp.task('default',['apply-prod-environment', 'browsersync','watch'], function() {});

100如果您想绝对确定自己处于prod模式,可以创建以下稍微增强的任务,而不是步骤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从未设置为"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!!!!

Reactjs相关问答推荐

react应用程序中的字体不适用于.scss扩展名

如何在关闭和打开此 Select 输入时应用旋转效果?

react -在选项中 Select 我想要显示和图像.但当我 Select 该选项时,我希望控件仅显示该选项的文本部分

在新屏幕上显示照片时出现问题-react

未定义发送的数据无法在reactjs中找到原因

状态改变不会触发重新渲染

无法在 NextJS 中获取嵌套对象

React 为什么标签导致 onClick 事件运行 2 次?

React-router-dom的链接不改变路由(ReactRouter6)

如何覆盖自定义 MUI 手风琴的样式(分隔线和折叠图标)

使用 react pro 侧边栏展开折叠菜单

react-router v6 中的 BrowserRouter 和 createBrowserRouter 有什么区别?我可以在不使用数据 API 的情况下使用 createBrowserRouter 吗?

React Three Fiber mesh 标签在此浏览器中无法识别

表单错误后 Ionic React 无法 Select 单选按钮

页面加载时不显示数组中的数据

Material UI:使用 mui 手风琴时出现props 类型失败:isValidElement 不是函数

如何在props 更改时运行自定义挂钩?

如何使用 UseState 正确测试组件

加密 Django Rest Framework API 响应 + 解密响应应用程序中的响应

在 Redux 中更新布尔状态时出错