Webpack在编译TypeScript代码失败时，导致gulp watch崩溃。

Question

Webpack在编译TypeScript代码失败时，导致gulp watch崩溃。

3

我有一个gulp-watch任务正在运行，它正在编译我的前端应用程序。当我有一个typescript错误时（仅因为我保存得太早），整个过程都会崩溃，我必须手动重新启动它。只要webpack和typescript编译器在监视模式下运行，我希望它们能够报告错误而不是崩溃整个进程。

我使用gulp任务使用webpack编译我的typescript应用程序：

gulp.task('scripts', function (callback) {
    var isWatching = watchEnabled;

    var webpackOptions = {
        resolve: { extensions: ['', '.ts'] },
        watch: watchEnabled,
        module: {
            preLoaders: [{ test: /\.ts$/, exclude: /node_modules/, loader: 'tslint-loader' }],
            loaders: [{ test: /\.ts$/, exclude: /node_modules/, loader: 'awesome-typescript-loader' }]
        },
        output: { filename: 'app.js' },
        tslint: { emitErrors: !watchEnabled } // tslint crashes gulp when emitting errors, so don't do it while watch is enabled
    };

    if (debugEnabled) {
        webpackOptions.devtool = 'inline-source-map';
    }

    var webpackChangeHandler = function (err, stats) {
        if (err) {
            console.error('Webpack', err);
        }
        $.util.log(stats.toString({
            colors: $.util.colors.supportsColor,
            chunks: false,
            hash: false,
            version: false
        }));

        if (isWatching) {
            isWatching = false;
            callback();
        }
    };

    return gulp.src('./Scripts/application/app.ts')
      .pipe(webpack(webpackOptions, null, webpackChangeHandler))
      .pipe($.if(!debugEnabled, $.uglify()))
      .pipe($.if(!watchEnabled, $.rev()))
      .pipe(gulp.dest(tmpFolder + 'Content/'));
});

在CI服务器上编译代码时，最好让编译和tslint错误导致进程崩溃，并使CI服务器报告错误。

但是，在开发过程中，这样做会相当烦人。我已经解决了tslint的问题，通过在gulp watch和webpack watch运行时关闭emitErrors。但是对于TypeScript编译，我不确定该如何做。

这是我应该在webpack或awesome-typescript-loader上找到的选项吗？

我在awesome-typescript-loader的Github存储库中没有找到任何与此问题相关的内容，这使我想到应该启用某个webpack选项，但是哪一个呢？

- peter

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- qhor · Accepted Answer

我曾经遇到过同样的问题，这个方法对我有用。

var wp = webpack(webpackOptions, null, webpackChangeHandler);
// can bind error to console, but it will be duplicated with webpackChangeHandler err
// wp.on('error', console.error.bind(console));
wp.on('error', function() {});

return gulp.src('./Scripts/application/app.ts')
      .pipe(wp)
      .pipe($.if(!debugEnabled, $.uglify()))
      .pipe($.if(!watchEnabled, $.rev()))
      .pipe(gulp.dest(tmpFolder + 'Content/'));