Question

我正在尝试使用gulp任务生成源地图。我正在使用Babel转译我的代码，并且希望能够使用VS Code中的调试器。我对源映射一无所知，而我确定源映射是否有效的方法是尝试使用带有断点的调试器（如果它在断点处停止，那么它将起作用）。

这是我的剧本：

// src/main.js
const i = 1;
const n = 2*i; // breakpoint on this line
console.log(n);

这是调试器的配置：

//.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/dist/main.js"
    }
  ]
}

命令npx babel src --out-dir dist --source-maps编译了我的代码，并且在dist文件夹中创建了一个.js.map文件。从上面执行调试器配置按预期工作。调试器在断点处停止。

命令npx babel src --out-dir dist --source-maps inline编译我的代码，并且源映射嵌入在.js输出文件中。从上面执行调试器配置也可以按预期工作。调试器在断点处停止。

这表明我的调试器配置应同时适用于内联和外部源映射。

我创建了以下Gulp任务来进行代码翻译。

import {dest, src} from "gulp";
import babel from "gulp-babel";
import sourcemaps  from "gulp-sourcemaps";

function transpile() {
  return src("src/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(sourcemaps.write(
      ".",
      {
          includeContent: false,
          sourceRoot: "../src"
      }))
    .pipe(dest("dist"));
}
export {transpile};

命令npx gulp transpile执行此任务，并在dist文件夹中创建一个.js.map文件。从上面执行调试器配置按预期工作。调试器在断点处停止。

然后，我在上面编辑了Gulp任务，以便为我提供内联源地图：

import {dest, src} from "gulp";
import babel from "gulp-babel";
import sourcemaps  from "gulp-sourcemaps";

function transpile() {
  return src("src/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(sourcemaps.write())
    .pipe(dest("dist"));
}
export {transpile};

命令npx gulp transpile执行此任务，并将源映射嵌入到我的输出文件中。但是，调试器不会在断点处停止。到目前为止，我还无法理解为什么。

由于这是调试器无法正常工作的唯一情况，我相信调试器不是问题的根源。它必须链接到源地图。

有什么主意吗？非常感谢！

由gulp-sourcemaps生成的内联sourcemaps在VS代码调试器中不起作用

0 个答案: