错误的源地图后吞咽-丑陋

Question

我已经创建了一个gulp / typescript工作流，它执行以下操作。

1. Gulp.watch(.)
2. 吞咽式打字
3. 吞咽
4. 吞咽源图

使用以下..。

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

这个丑陋的插件会删除你的js代码，但不会改变源代码。因此，源地图提供的映射不再与实际的js-文件匹配。

大多数丑陋的插件都可以自己在上面生成源代码地图，这样你就可以尝试了。

我建议有两个不同的构建任务。一个用于开发，它不丑化您的代码和发布源代码地图，另一个用于生产，它丑化您的代码，但不发出源代码地图。