使用Typescript 1.8,Gulp 3.9.0,gulp-sourcemaps 1.6.0和tsconfig.json文件.
在一段时间以前,这是很好的.最近(我无法确定什么时候),Chrome和Firefox都不会真正使用sourcemap.
我已经在Chrome上启用了源代码映射,并认识到有一个源代码映射,在控制台中告诉我：
“源映射检测到相关文件应该添加到文件树中,您可以将这些解析的源文件作为常规JavaScript文件进行调试,相关文件可通过文件树或Ctrl P”
但是,源文件不能通过任一方法使用.
在本地构建上构建文件结构(仅使用Login作为示例)：
build
|- resources
|- js
|- app.js
|- app.js.map
|- typescript
|- app.ts
|- sections
|- login
|- LoginService.ts
|- LoginDirective.ts
|- LoginController.ts
但是,Chrome只会在文件树中显示：
build
|- resources
|- js
|- app.js
而已.没有Typescript文件夹,没有文件. Ctrl-P也没有找到它们.所以当我调试时,我只能调试编译的app.js文件,而不是看到Typescript代码.
我的gulp文件相关部分：
var ts = require( 'gulp-typescript' ); // compiles typescript
var tsProject = ts.createProject( 'tsconfig.json' );
gulp.task( 'compile:typescript',function () {
var tsResult = tsProject
.src() // instead of gulp.src(...)
.pipe( sourcemaps.init() )
.pipe( ts( tsProject ) );
return tsResult.js
.pipe( sourcemaps.write( '.',{
includeContent: false,sourceRoot: 'typescript'
})
)
.pipe( './build' )
;
} );
我已经查看了类似情况的各种文档和解决方案,但我仍然没有让Chrome使用源代码图.
https://www.npmjs.com/package/gulp-sourcemaps
https://github.com/ivogabe/gulp-typescript/issues/201
https://github.com/floridoo/gulp-sourcemaps/issues/89#issuecomment-73184103
gulp-typescript: Problems using createProject …“还有更多！”
不知道为什么这不能正常工作.任何见解,堆垛机？
解决方法
我相信你的问题在于你如何定义sourceRoot.尝试像sourceRoot：’./typescript/’.