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不會觸發重新運行監視模式或清除任何文件緩存，因為源文件沒有更改。