VSCode断点不能在带有gulp-sourcemaps生成的源映射的typescript中工作

Question

我在子目录routes有一个打字稿文件users.ts .

gulpfile.js中的gulpfile.js代码：

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 gulp-sourcemaps sourcemaps生成的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断点与tsc生成的源映射一起正常工作。

那么如何配置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

源代码路径在使用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 3

我在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);
  },
}))

Answer 4

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

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

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

如果＃1不成立，则路径在某些情况下会起作用而在其他情况下不起作用（某些工具会解析相对于源映射文件的相对路径，其他工具则基于工作区根目录，cwd或其他路径）。

如果＃2不成立，您的工具将在错误的位置查找源文件。

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