Smartkid Smartkid - 3 months ago 79
TypeScript Question

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

I have a typescript file

users.ts
in a sub-directory
routes
.

The gulp code in
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('.'));


The sourcemap generated by
gulp-sourcemaps
does not work with VSCode :

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


The sourcemap generated by
tsc
works fine in VSCode:

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

and the VSCode breakpoint works fine with the sourcemap generated by
tsc
.

So how to config
gulp-typescript/gulp-sourcemaps
to generate the same sourcemap as
tsc
?

Answer

It is the same problem as in Gulp Typescript + Browserify; Bundled sourcemap points to transpiled JS rather than source TS
Add sourceRoot function to sourcemaps.write(...)
Assuming your .ts files are in src folder of the project, sourcemaps pipe will look like:

.pipe(sourcemaps.write('.', {
           sourceRoot: function(file){ return file.cwd + '/src'; }
      }))