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

生成源图。 index.js.map指向＆＃34; ../ src / index.ts＆＃34; （正确）。地图文件的相应内容为{"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"
   ]
}

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

Answer 1

好的，我找到了一个解决方案来获得断点。我查看了源文件的错误部分。 "sources":["../src/controllers/authentication.controller.ts"]始终相同，可以忽略。如果我将gulp任务更改为使用sourceRoot: '../src'，则可以正常运行。在sourcemap-file的末尾，设置了sourceRoot。

这是我的新任务：

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

我的源文件位于＆＃34; src＆＃34;项目根文件夹中的文件夹和具有相应文件夹结构的所有输出进入＆＃34; dist＆＃34;文件夹与你的相似。这是我的＃34;编译＆＃34;我认为可以帮助你的任务：

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

希望这会有所帮助。

Typescript + Gulp + Sourcemaps错误的源路径

2 个答案: