javascript - typescript 源中的断点不起作用

Question

我正在开发一个节点模块和一个示例应用程序。我正在尝试将调试断点添加到模块中的源文件之一，但我无法让 VSC 识别它。使用最新版本的 Typescript 和 VSC。

编辑:这应该是一个节点应用程序，无需担心浏览器。

EDIT2:这是存在问题的存储库 repo with problem.这是我当前的设置

├── dist
│   ├── index.d.ts
│   ├── index.js
│   ├── index.js.map
│   ├── main.d.ts
│   ├── main.js
│   ├── main.js.map
├── examples
│   ├── index.js
│   └── package.json
├── gulpfile.js
├── package.json
├── src
│   ├── index.ts
│   ├── main.ts
├── tsconfig.json
├── tslint.json

我正在 examples/index.js 中开发示例，并在 src/main.ts 中设置断点

这是我的 VSC launch.json 配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch TypeScript",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/examples/index.js",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/src",
      "args": [
        "--nolazy"
      ]
    }
  ]
}

我的 tsconfig.json

{
    "compilerOptions": {
      "target": "es2015",
      "module": "commonjs",
      "sourceMap": true,
      "outDir": "dist",
      "declaration": true,
      "rootDir": "src"
    },
    "exclude": [
      "node_modules",
      "examples",
      "dist"
    ]
}

我的吞咽任务

gulp.task('default', function () {
  var tsResult = tsProject.src('tsconfig.json')
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject));

  return merge([
        tsResult.dts.pipe(gulp.dest('dist')),
        tsResult.js
        .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: 'src'}))
        .pipe(gulp.dest('dist'))
    ]);
});

源映射是如何放置的

{"version":3,"sources":["main.ts"],"names":[],"mappings":";CAAC,...CAAC","file":"main.js","sourceRoot":"src"}

Answer 1

Visual Studio Code 使用“program”来引用相应“outDir”中的文件名“index.js”。在您的情况下，它正在寻找“dist/index.js”。

有一个备用条目文件会导致困惑。为了避免名称冲突，“examples/index.js”需要是“dist”中不存在的唯一文件名(exampleApp.js？)。