[英]VSCode breakpoint not working in typescript with sourcemap generated by gulp-sourcemaps
I have a typescript file users.ts
in a sub-directory routes
. 我在子目录
routes
有一个打字稿文件users.ts
.
The gulp code in gulpfile.js
: gulpfile.js
中的gulpfile.js
代码:
var tsProject = ts.createProject(tsConfigFile);
return tsProject.src()
.pipe(sourcemaps.init())
.pipe(ts(tsProject))
.js
.pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''}))
.pipe(gulp.dest('.'));
The sourcemap generated by gulp-sourcemaps
does not work with VSCode : gulp
gulp-sourcemaps
sourcemaps生成的gulp-sourcemaps
不适用于VSCode:
{"version":3,"sources":["routes/users.ts"],"names":[], "mappings":"...","file":"routes/users.js","sourceRoot":""}
The sourcemap generated by tsc
works fine in VSCode: tsc
生成的源图在VSCode中工作正常:
{"version":3,"file":"users.js","sourceRoot":"","sources":["users.ts"],"names":[], "mappings":"..."}
and the VSCode breakpoint works fine with the sourcemap generated by tsc
. VSCode断点与
tsc
生成的源映射一起正常工作。
So how to config gulp-typescript/gulp-sourcemaps
to generate the same sourcemap as tsc
? 那么如何配置
gulp-typescript/gulp-sourcemaps
来生成与tsc
相同的源图?
It is the same problem as in Gulp Typescript + Browserify; 这与Gulp Typescript + Browserify中的问题相同; Bundled sourcemap points to transpiled JS rather than source TS
捆绑的源映射指向转换JS而不是源TS
Add sourceRoot function to sourcemaps.write(...)
将sourceRoot函数添加到
sourcemaps.write(...)
Assuming your .ts
files are in src
folder of the project, sourcemaps
pipe will look like: 假设您的
.ts
文件位于项目的src
文件夹中, sourcemaps
管道将如下所示:
.pipe(sourcemaps.write('.', {
sourceRoot: function(file){ return file.cwd + '/src'; }
}))
Sourcemap paths will be correct on the machine where you build them with v-andrew's method. 源代码路径在使用v-andrew方法构建它们的机器上是正确的。 However, if you want to compile the sourcemaps once to work on multiple machines, use relative filepaths:
但是,如果要编译源映射一次以在多台计算机上工作,请使用相对文件路径:
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);
},
}))
I'm using gulp-sourcemaps 2.6.1 on Windows, and @Westy92's solution doesn't work (anymore?), because file.path returns the absolute file path (including file name): 我在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);
},
}))
The accepted answer is correct, however it took me some time to realize why this worked & how to adjust the answer for my particular environment (in my case I needed to drop the /src
suffix). 接受的答案是正确的,但是我花了一些时间才意识到为什么这有效以及如何调整我的特定环境的答案(在我的情况下我需要删除
/src
后缀)。
If you inspect the generated source maps (this only works when outputting to map files, eg sourcemaps.write('.')
) you should see two fields in the json object: sources
and sourceRoot
, there are two things you need to be sure of: 如果检查生成的源映射(这仅在输出到映射文件时有效,例如
sourcemaps.write('.')
),您应该在json对象中看到两个字段: sources
和sourceRoot
,有两件事你需要确定的:
sourceRoot
should be an absolute path. sourceRoot
应该是一个绝对路径。 sources
should combine with sourceRoot
to form the absolute path to your source file. sources
每个路径都应与sourceRoot
组合以形成源文件的绝对路径。 If #1 isn't true the path will work in some cases and not in others (some tools resolve relative paths relative to source map file, others based on your workspace root, cwd, or some other path). 如果#1不成立,则路径在某些情况下会起作用而在其他情况下不起作用(某些工具会解析相对于源映射文件的相对路径,其他工具则基于工作区根目录,cwd或其他路径)。
If #2 isn't true your tools will be looking in the wrong place for the source files. 如果#2不成立,您的工具将在错误的位置查找源文件。
One other hint: Remember that changing your gulpfile doesn't trigger a rerun of watch mode or clear any file caches, since your source file didn't change. 另一个提示:请记住,更改gulpfile不会触发重新运行监视模式或清除任何文件缓存,因为源文件没有更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.