gulp-uglify 后打字稿源映射错误

Posted 2023-02-23

【中文标题】gulp-uglify 后打字稿源映射错误

【英文标题】：Typescript sourcemaps wrong after gulp-uglify

【发布时间】：2016-11-16 21:16:53

【问题描述】：

我创建了一个执行以下操作的 gulp / typescript 工作流。

gulp.watch(..) gulp 打字稿 gulp-丑化 gulp-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())”那么我可以完美调试，没有问题。

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

【问题讨论】：

你能告诉我为什么需要 sourcemap 吗？

嗨@smartmouse，我想把它提供给第三者。

【参考方案1】：

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

大多数 uglify-plugins 都可以选择自行生成源映射，因此您可以尝试一下。

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