Typescript + Gulp + Sourcemaps 错误的源路径答案

【问题标题】：Typescript + Gulp + Sourcemaps wrong source pathTypescript + Gulp + Sourcemaps 错误的源路径
【发布时间】：2017-02-17 07:20:49
【问题描述】：

我有一个具有以下文件夹结构的 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

源地图已生成。 index.js.map 指向“../src/index.ts”（正确）。地图文件对应内容为{"version":3,"sources":["../src/index.ts"],"names":[],"mappings"

但是 dist\controllers\authorize-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"
   ]
}

我做错了什么？ gulp-sourcemaps 似乎忽略了 sourceRoot。

【问题讨论】：

标签： javascript node.js typescript gulp gulp-sourcemaps

【解决方案1】：

好的，我找到了解决断点的方法。我查看了源文件的错误部分。 "sources":["../src/controllers/authentication.controller.ts"] 始终相同，可以忽略。如果我将 gulp 任务更改为使用 sourceRoot: '../src' 它可以工作。在 sourcemap 文件的末尾，设置了 sourceRoot。

这是我的新 gulp 任务：

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

【讨论】：

【解决方案2】：

我的源文件位于项目根文件夹的“src”文件夹中，所有具有相应文件夹结构的输出都进入类似于您的“dist”文件夹。这是我认为可以帮助您的“编译”任务：

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

希望这会有所帮助。

【讨论】：