在gulp-uglify之后,typescript sourcemaps错误

Question

我创建了一个gulp/typescript工作流,它执行以下操作.

1. gulp.watch(..)
2. 一饮而尽,打字稿
3. 一饮而尽,丑化
4. 一饮而尽,sourcemaps

使用以下..

var tsProject = ts.createProject('tsconfig.json') // See below for options

gulp.task('watch-ts', function () {
    return gulp.watch(paths.scriptSrc + '/**/*.ts', ['compile-ts']);
});

gulp.task('compile-ts', function () {
    var tsResult = gulp
        .src(paths.scriptSrc + '/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject));

    return tsResult
        .js
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.scripts));
});

{
    "compilerOptions": {
        "outFile": "app.js",
        "target": "es5",
        "removeComments": true,
        "noImplicitAny": false,
        "module": "system",
        "experimentalDecorators": true,
        "declaration": false,
        "noEmitOnError": true
    }
}

因此,在创建了js文件+源映射之后,当我尝试使用Chrome调试器插入并调试我的一个打字稿文件时,断点会跳到整个地方,并且每行F10按下一行跳转到一些随机行.我相信在生成源图时会发生一些奇怪的事情,但不知道是什么.

如果我注释掉".pipe(uglify())"那么我可以完美地调试并且没有问题.

有谁知道可能导致这种行为的原因是什么？

Answer 1

uglify 插件会删除您的 js 代码，但不会更改源映射。因此，sourcemap 提供的映射与您实际的 js 文件不再匹配。

大多数 uglify 插件都有一个选项可以自行生成源映射，因此您可以尝试一下。

我建议有两个不同的构建任务。一种用于开发，不会丑化您的代码并发出源映射；一种用于生产，它会丑化您的代码但不发出源映射。