当流库抛出错误时，正确处理 Gulp.js 乙烯基流错误

Question

我正在使用 Gulp 编译 React JSX（是的，我知道）。

我有这个 Gulp 任务：

gulp.task('transpile-jsx', function () {
    return transpileJSX().on('error',function(err){   // < I just added this error handler, but it doesn't do much
        console.error(err);
    });
});

上面的任务是这样调用的：

gulp.task('metagen:all', ['transpile-jsx'], function (done) {

    runAllMetagens(done);

});

实际的功能如下：

function transpileJSX() {
    return gulp.src('./public/static/app/js/views/**/*.js').pipe(react({harmony: true}))
        .pipe(gulp.dest('./public/static/app/js/jsx'));
}

try/catch 不适用于流，因为它们是异步的，那么附加错误处理程序的最佳方法是什么，以便我的 gulp 进程在遇到 JSX 转译错误时不会陷入困境：

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: Parse Error: Line 94: Unexpected token >
    at throwError (/Users/amills001c/WebstormProjects/baymax/AdminUI/node_modules/gulp-react/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2808:21)
    at throwUnexpected (/Users/amills001c/WebstormProjects/baymax/AdminUI/node_modules/gulp-react/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2870:9)
    at parseJSXChild (/Users/amills001c/WebstormProjects/baymax/AdminUI/node_modules/gulp-react/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:7068:13)
    at parseJSXElement (/Users/amills001c/WebstormProjects/baymax/AdminUI/node_modules/gulp-react/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:7140:31)
    at parsePrimaryExpression (/Users/amills001c/WebstormProjects/baymax/AdminUI/node_modules/gulp-react/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3572:20)
    at parseLeftHandSideExpressionAllowCall (/Users/amills001c/WebstormProjects/baymax/AdminUI/node_modules/gulp-react/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3656:61)
    at parsePostfixExpression (/Users/amills001c/WebstormProjects/baymax/AdminUI/node_modules/gulp-react/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3696:20)
    at parseUnaryExpression (/Users/amills001c/WebstormProjects/baymax/AdminUI/node_modules/gulp-react/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3763:16)
    at parseBinaryExpression (/Users/amills001c/WebstormProjects/baymax/AdminUI/node_modules/gulp-react/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3853:16)
    at parseConditionalExpression (/Users/amills001c/WebstormProjects/baymax/AdminUI/node_modules/gulp-react/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3913:16)

我遇到的问题是实时发生的转译错误正在使我的开发服务器崩溃（因为我的开发服务器是我的 gulp 进程），而这些转译错误正在使我的 gulp 进程崩溃。

Answer 1

使用gulp-util

那么就当做吧

var gutil = require('gulp-util');

function transpileJSX() {
    return gulp.src('./public/static/app/js/views/**/*.js')
        .pipe(react({harmony: true}))
        .on('error', gutil.log) // Add gutil.log for error handling/logging
        .pipe(gulp.dest('./public/static/app/js/jsx'));
}

我将它与我的Browserify 进程一起使用来捕获任何捆绑错误并显示它们，而不会杀死我的Watchify 实例。应该为你的 React 编译做同样的事情。