Встроенные исходные карты, сгенерированные gulp-sourcemaps, не работающими в отладчике VS-кода

Question

Я пытаюсь сгенерировать исходные карты с глотком. Я передаю свой код с 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 переносит мой код и .js.map файл создается в папке dist. Выполнение конфигурации отладчика сверху работает как задумано. Отладчик останавливается на точке останова.

Команда 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 выполняет эту задачу и .js.map файл создается в папке dist. Выполнение конфигурации отладчика сверху работает как задумано. Отладчик останавливается на точке останова.

Затем я отредактировал задачу 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 выполняет эту задачу, и исходные карты встроены в мой выходной файл. Однако отладчик не останавливается на точке останова. Я не смог понять, почему до сих пор.

Поскольку это единственный случай, когда отладчик не работает, я считаю, что отладчик не является источником проблемы. Он должен быть связан с исходной картой.

Любая идея? Большое спасибо!