Typescript Gulp Sourcemaps错误的源路径

Question

我有一个nodejs应用，具有以下文件夹结构：

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

生成了sourcemaps。index.js. -map指向" ../src/index.ts"（正确）。地图文件的相应内容是{"version":3,"sources":["../src/index.ts"],"names":[],"mappings"

但是，dist controllers 授权controller.js.map指向错误的目录。它具有{"version":3,"sources":["../src/controllers/authentication.controller.ts"],"names":[],。缺少一个../。

我的gulpfile.js是：

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

我的tsconfig.json是：

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

我在做什么错？似乎Sourceroot被Gulp-Sourcemaps忽略了。

Answer 1

好的，我找到了一个解决断点点击的解决方案。我看了看源文件的错误部分。"sources":["../src/controllers/authentication.controller.ts"]总是相同的，可以忽略。如果我更改了使用sourceRoot: '../src'的Gulp任务，则可以正常工作。在Sourcemap-File的末尾，设置了Soutceroot。

这是我的新鸿沟任务：

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

我的源文件位于项目root文件夹的" src"文件夹中，所有带有相应文件夹结构的输出都与您的文件夹相似。这是我认为可以帮助您的"编译"任务：

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

希望这会有所帮助。