VSCode 断点在使用 gulp-sourcemaps 生成的 sourcemap 的打字稿中不起作用

Question

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

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 生成的 sourcemap 不适用于 VSCode :

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

tsc 生成的 sourcemap 在 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

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 3

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

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，有两件事你需要确定：

sourceRoot 应该是绝对路径。
sources 中的每个路径都应与 sourceRoot 结合形成源文件的绝对路径。

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

如果 #2 不正确，您的工具将在错误的位置查找源文件。

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

VSCode 断点在使用 gulp-sourcemaps 生成的 sourcemap 的打字稿中不起作用

VSCode breakpoint not working in typescript with sourcemap generated by gulp-sourcemaps

typescript

gulp

gulp-sourcemaps

visual-studio-code