Webpack 在编译 typescript 代码失败时会导致 gulp watch 崩溃

Posted 2023-03-13

【中文标题】Webpack 在编译 typescript 代码失败时会导致 gulp watch 崩溃

【英文标题】：Webpack crashes gulp watch when it fails to compile typescript code

【发布时间】：2016-05-06 02:18:40

【问题描述】：

我正在运行一个 gulp-watch 任务，它正在编译我的前端应用程序。当我遇到打字稿错误时（只是因为我太早点击保存）整个过程崩溃，我必须手动重新启动它。我希望 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 服务器报告错误是好的。

但是在开发的时候很烦人。只要 gulp watch 和 webpack watch 正在运行，我就通过关闭 emitErrors 解决了 tslint 问题。但是对于打字稿编译，我不知道该怎么做。

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

我在 awesome-typescript-loader github repo 上没有找到任何适合这个问题的东西，这让我觉得我应该启用一些 webpack 选项，但是哪个？

【参考方案1】：

有同样的问题。这对我有用

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/'));