VSCode断点在具有由gull源映射生成的源映射的typescript中不起作用

Question

我在子目录routes中有一个typescript文件users.ts。

gulpfile.js:中的gullow代码

var tsProject = ts.createProject(tsConfigFile);
return tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject))
    .js
    .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''})) 
    .pipe(gulp.dest('.'));

gulp-sourcemaps生成的源映射不适用于VSCode:

{"version":3,"sources":["routes/users.ts"],"names":[], "mappings":"...","file":"routes/users.js","sourceRoot":""}

tsc生成的源映射在VSCode:中运行良好

{"version":3,"file":"users.js","sourceRoot":"","sources":["users.ts"],"names":[], "mappings":"..."}

并且VSCode断点与CCD_ 6生成的源映射良好地工作。

那么，如何配置gulp-typescript/gulp-sourcemaps以生成与tsc相同的源映射呢？

Answer 1

这与Gulp Typescript+Browserify中的问题相同；绑定的源映射指向已传输的JS，而不是源TS
将sourceRoot函数添加到sourcemaps.write(...)
假设你的.ts文件在项目的src文件夹中，sourcemaps管道将看起来像：

.pipe(sourcemaps.write('.', {
           sourceRoot: function(file){ return file.cwd + '/src'; }
      }))

Answer 2

接受的答案是正确的，但我花了一些时间才意识到为什么这有效&如何根据我的特定环境调整答案（在我的情况下，我需要去掉/src后缀）。

如果你检查生成的源映射（这只在输出到映射文件时有效，例如sourcemaps.write('.')），你应该在json对象中看到两个字段：sources和sourceRoot，你需要确定两件事：

1. sourceRoot应该是一个绝对路径
2. sources中的每个路径都应该与sourceRoot组合，形成源文件的绝对路径

如果#1不正确，则路径在某些情况下有效，而在其他情况下无效（一些工具解析相对于源映射文件的相对路径，另一些工具基于您的工作区根、cwd或其他路径）。

如果#2不是真的，那么您的工具将在错误的位置查找源文件。

另一个提示：请记住，更改gulpfile不会触发重新运行监视模式或清除任何文件缓存，因为源文件没有更改。

Answer 3

Sourcemap路径在使用v-andrew方法构建它们的机器上是正确的。但是，如果您想在多台机器上编译一次源映射，请使用相对文件路径：

var path = require('path');
...
.pipe(sourcemaps.write('.', {
  includeContent: false,
  sourceRoot: function(file) {
    var fullPath = path.join(file.cwd, file.path);
    return path.relative(fullPath, file.base);
  },
}))

Answer 4

我在Windows上使用的是gulp-sourcemaps 2.6.1，@Westy92的解决方案不起作用了（现在？），因为file.path返回绝对文件路径（包括文件名）：

var path = require('path');
...
.pipe(sourcemaps.write({
  includeContent: false,
  sourceRoot: function(file) {
    return path.relative(path.dirname(file.path), file.base);
  },
}))