VSCode断点不适用于由gulp源地图生成的源地图的类型记录

Question

我在一个子目录users.ts中有一个类型记录文件routes.

gulpfile.js中的gulp代码

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断点可以很好地处理由tsc生成的源地图。

因此，如何配置gulp-typescript/gulp-sourcemaps以生成与tsc相同的源地图

Answer 1

这与Gulp Typescript + Browserify; Bundled sourcemap points to transpiled JS rather than source 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方法构建它们的机器上将是正确的。但是，如果要在多台机器上编译一次源映射，请使用相对文件：

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