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

时间:2015-12-11 07:38:46

标签: typescript gulp visual-studio-code gulp-sourcemaps

我在子目录classes.jar中有一个打字稿文件classes.jar

users.ts中的gulp代码:

routes

gulpfile.js生成的源地图不适用于VSCode:

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":""}

并且VSCode断点与tsc生成的源映射一起正常工作。

那么如何配置{"version":3,"file":"users.js","sourceRoot":"","sources":["users.ts"],"names":[], "mappings":"..."} 来生成与tsc相同的源地图?

4 个答案:

答案 0 :(得分:8)

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

我在Windows上使用gulp-sourcemaps 2.6.1,@ Westy92的解决方案不再工作(不再?),因为file.path返回绝对文件路径(包括文件名) ):

operator &

答案 3 :(得分:0)

可接受的答案是正确的,但是我花了一些时间才知道为什么这样有效以及如何针对我的特定环境调整答案(在我的情况下,我需要删除后缀/src)。

如果您检查生成的源地图(这仅在输出到地图文件(例如sourcemaps.write('.')时有效),您应该在json对象中看到两个字段:sourcessourceRoot,您需要确定两件事:

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

如果#1不正确,则该路径在某些情况下将起作用,而在另一些情况下将不起作用(某些工具可解析相对于源映射文件的相对路径,其他工具则基于您的工作区根目录,cwd或其他路径)。 >

如果不是#2,则您的工具将在错误的位置查找源文件。

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