在 gulp 任务后无法在 vscode 上为 typescript 运行调试器，调试器运行未编译的代码

Posted 2023-03-08

【中文标题】在 gulp 任务后无法在 vscode 上为 typescript 运行调试器，调试器运行未编译的代码

【英文标题】：Can't run debugger on vscode for typescript after gulp tasks, debugger runs uncompiled code

【发布时间】：2021-02-06 09:22:16

【问题描述】：

好的，问题是在迁移到 gulp 调试器之前工作正常。这里有什么问题 我有带有以下配置的 tsconfig.json 文件

  "compilerOptions": 
    "target": "es2018",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": false,
    "sourceMap": true,
    "baseUrl": "src",
    "typeRoots": ["node_modules/@types/", "./src/modules/@types/**/"],
    "paths": 
      "@/*": ["./*"]
    
  ,
  "include": ["src"],
  "exclude": ["./src/modules/@types"]

vscode 调试器任务是 npm: build，它基本上运行“tsc”命令。但对于其他一些情况，我需要添加 gulp 文件并盯着用 gulp 编译 ts（包括源映射等） 但是当 vscode 调试器开始运行时，它会尝试运行 node ./src/server.ts 而不是 ./dist/server.js 文件。当构建任务是 gulp 时会发生这种情况。使用 tsc 命令它仍然可以完美运行。 gulp 文件是否需要返回某些内容或任何其他配置来强制 vscode 调试器运行 ./dist/server.js？

gulpfile 在这里

const gulp = require("gulp")
const babel = require("gulp-babel")
var ts = require("gulp-typescript")
var sourcemaps = require('gulp-sourcemaps');


const tsProject = ts.createProject("tsconfig.json")
gulp.task("tsc", () => 
  tsProject
    .src()
    .pipe(tsProject())
    .pipe(gulp.dest("dist"))
)

gulp.task("sourcemaps", () =>
  gulp.src("dist/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest("dist"))
)

gulp.task("resolve:alias", () => 
  gulp.src("dist/**/*.js")
    .pipe(
      babel(
        plugins: [
          [
            "babel-plugin-module-resolver",
            
              alias: 
                "@": "./dist",
              ,
            ,
          ],
        ],
      )
    )
    .pipe(gulp.dest("dist"))
)

module.exports.default = gulp.series("tsc", "resolve:alias", "sourcemaps")

我尝试了其他策略，例如单独运行 tsc。但即使删除所有其他任务并只运行 gulp tsc 任务也会失败但是标准 npx tsc pass

【参考方案1】：

好的，我解决了这个问题。我在错误的地方寻找解决方案。

问题： Gulp 在编译 ts 文件时会移除 sourcemaps。我添加了自定义源生成器插件，但它也生成了缺少映射的错误源映射。

解决方案： 我检查了与 tsc 生成的实际源图的差异。所以我更新了我的soucemap插件选项如下。

gulp.task("sourcemaps", () =>
  gulp
    .src("dist/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.identityMap())
    .pipe(
      sourcemaps.mapSources(function (sourcePath) 
        return "../src/" + sourcePath.replace(/\.js$/, ".ts")
      )
    )
    .pipe(sourcemaps.write(".",  includeContent: false, sourceRoot: "" ))
    .pipe(gulp.dest("dist"))
)

我不得不用ts扩展替换js扩展，因为，我需要在生成的js文件上调用babel插件，然后生成sourcemaps。现在可以了