VSCode 断点在 typescript 中无法使用 gulp-sourcemaps 生成的源映射答案

【问题标题】：VSCode breakpoint not working in typescript with sourcemap generated by gulp-sourcemapsVSCode 断点在 typescript 中无法使用 gulp-sourcemaps 生成的源映射
【发布时间】：2016-03-17 01:28:35
【问题描述】：

我在子目录routes 中有一个打字稿文件users.ts。

gulpfile.js 中的 gulp 代码：

var tsProject = ts.createProject(tsConfigFile);
return tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject))
    .js
    .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''})) 
    .pipe(gulp.dest('.'));

gulp-sourcemaps 生成的 sourcemap 不适用于 VSCode：

{"version":3,"sources":["routes/users.ts"],"names":[], "mappings":"...","file":"routes/users.js","sourceRoot":""}

tsc 生成的 sourcemap 在 VSCode 中运行良好：

{"version":3,"file":"users.js","sourceRoot":"","sources":["users.ts"],"names":[], "mappings":"..."}

并且 VSCode 断点与tsc 生成的源映射配合得很好。

那么如何配置gulp-typescript/gulp-sourcemaps 生成与tsc 相同的sourcemap？

【问题讨论】：

.js 在pipe(ts(tsProject)) 之后的调用是什么？
见npmjs.com/package/gulp-typescript#source-maps，.js在`pipe(ts(tsProject))之后被调用

标签： typescript gulp visual-studio-code gulp-sourcemaps

【解决方案1】：

和Gulp Typescript + Browserify; Bundled sourcemap points to transpiled JS rather than source TS中的问题一样
将 sourceRoot 函数添加到sourcemaps.write(...)
假设您的 .ts 文件位于项目的 src 文件夹中，sourcemaps 管道将如下所示：

.pipe(sourcemaps.write('.', {
           sourceRoot: function(file){ return file.cwd + '/src'; }
      }))

【讨论】：

我遇到了与 OP 相同的问题（也适用于 TSC 生成的源地图），不幸的是这并不能解决它。
确认这个作品。 @pyrho 确保 '/src' 部分相对于项目的根目录映射到项目的根目录。您可能需要使用其他值，例如 '' 或 '/src/server' 等。
你能发布你的 gulpfile.js 和你的项目布局的相关部分吗？谢谢！
好的，我想我找到了问题所在。使用 sourceRoot 工作正常。但由于某种原因，gulp-typescript 将文件名小写，这会以某种方式破坏 VSCode 的文件映射，请参阅this gulp-typescript issue。谢谢。

【解决方案2】：

接受的答案是正确的，但是我花了一些时间才意识到为什么这样做以及如何针对我的特定环境调整答案（在我的情况下，我需要删除 /src 后缀）。

如果您检查生成的源映射（这仅在输出到映射文件时有效，例如sourcemaps.write('.')），您应该在 json 对象中看到两个字段：sources 和 sourceRoot，您需要做两件事确保：

sourceRoot 应该是绝对路径。
sources 中的每个路径都应与 sourceRoot 组合形成源文件的绝对路径。

如果 #1 不正确，则路径在某些情况下有效，但在其他情况下无效（一些工具解析相对于源映射文件的相对路径，其他工具基于您的工作区根、cwd 或其他路径）。

如果 #2 不正确，您的工具将在错误的位置查找源文件。

另一个提示：请记住，更改 gulpfile 不会触发监视模式的重新运行或清除任何文件缓存，因为您的源文件没有更改。

【讨论】：

【解决方案3】：

Sourcemap 路径在您使用 v-andrew 方法构建它们的机器上是正确的。但是，如果您想编译一次 sourcemap 以在多台机器上工作，请使用相对文件路径：

var path = require('path');

...

.pipe(sourcemaps.write('.', {
  includeContent: false,
  sourceRoot: function(file) {
    var fullPath = path.join(file.cwd, file.path);
    return path.relative(fullPath, file.base);
  },
}))

【讨论】：

【解决方案4】：

我在 Windows 上使用 gulp-sourcemaps 2.6.1，@Westy92 的解决方案不起作用（不再？），因为 file.path 返回绝对文件路径（包括文件名）：

var path = require('path');

...

.pipe(sourcemaps.write({
  includeContent: false,
  sourceRoot: function(file) {
    return path.relative(path.dirname(file.path), file.base);
  },
}))

【讨论】：