Typoskript + Gulp + Sourcemaps falsche Quellpfad

Question

Ich habe eine NodeJS App mit der folgenden Ordnerstruktur:

project 
|-- src/ 
| |-- controllers/ 
| | |`-- authorize-controller.ts 
| |`-- index.ts 
|--dist/ 
| |--controllers/ 
| | |`-- authorize-controller.js 
| | |`-- authorize-controller.js.map 
| |`-- index.js 
| |`-- index.js.map 
`-- gulpfile.js 
`-- tsconfig.json 

Die sourcemaps erzeugt werden. Die index.js.map zeigt auf "../src/index.ts" (korrekt). Der entsprechende Inhalt der Kartendatei ist {"version":3,"sources":["../src/index.ts"],"names":[],"mappings"

Aber die dist \ controllers \ authorize-controller.js.map zeigt auf das falsche Verzeichnis. Es hat {"version":3,"sources":["../src/controllers/authentication.controller.ts"],"names":[],. Es fehlt eine ../.

Mein gulpfile.js ist:

gulp.task('compile',() => { 
    var tsResult = tsProject.src() 
    .pipe(sourcemaps.init()) 
    .pipe(tsProject()); 

    return tsResult.js 
    .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '/src' })) 
    .pipe(gulp.dest('dist')); 
}); 

Mein tsconfig.json ist:

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "target": "es6", 
     "noImplicitAny": false, 
     "sourceMap": true, 
     "outDir": "dist" 
    }, 
    "include": [ 
     "src/**/*.ts" 
    ], 
    "exclude": [ 
     "node_modules", 
     "dist", 
     ".vscode" 
    ] 
} 

Was mache ich falsch? Es scheint, dass das SourceRoot von gulp-sourcemaps ignoriert wird.

Answer 1

Ok Ich habe eine Lösung gefunden, um die Breakpoints zu bekommen. Ich schaute auf den falschen Teil der Quelldatei. "sources":["../src/controllers/authentication.controller.ts"] ist immer gleich und kann ignoriert werden. Wenn ich die Schluckaufgabe ändere, um sourceRoot: '../src' zu verwenden, funktioniert es. Am Ende der sourcemap-Datei wird der sourceRoot gesetzt.

Das ist meine neuer schluck Aufgabe:

gulp.task('compile',() => { 
    var tsResult = tsProject.src() 
     .pipe(sourcemaps.init()) 
     .pipe(tsProject()); 

    return tsResult.js 
     .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../src' })) 
     .pipe(gulp.dest('dist')); 
}); 

Answer 2

Meine Quelldateien im „src“ -Ordner auf dem Projektstammordner und alle Ausgaben mit Ordnerstruktur angeordnet sind, entsprechend geht in „dist“ ähnlich wie bei Ihnen Ordner. Hier ist meine „kompiliert“ Aufgabe, die ich denken können Ihnen helfen:

var gulp = require("gulp"); 
var tsc = require("gulp-typescript"); 
var sourcemaps = require('gulp-sourcemaps'); 

     gulp.task("compile", function() { 
     var tsProject = tsc.createProject('tsconfig.json'); 
     return gulp 
     .src("src/**/*.ts") 
     .pipe(sourcemaps.init()) 
     .pipe(tsProject()) 
     .pipe(sourcemaps.write(
      ".", 
     { 
      sourceRoot: function(file) { 
      var filePathSplit = file.sourceMap.file.split("/"); 
      var backTrack = '../'.repeat(filePathSplit.length-1) || '../' ; 
      var filePath = backTrack+ "src/"; 
      return filePath; 
     }} 
     )) 
     .pipe(gulp.dest("dist")); 
    }); 

Hope this helfen.