Typescript gulp-sourcemaps生成地图,但浏览器DevTools无法识别它

前端之家收集整理的这篇文章主要介绍了Typescript gulp-sourcemaps生成地图,但浏览器DevTools无法识别它前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用Typescript 1.8,Gulp 3.9.0,gulp-sourcemaps 1.6.0和tsconfig.json文件.

在一段时间以前,这是很好的.最近(我无法确定什么时候),Chrome和Firefox都不会真正使用sourcemap.

我已经在Chrome上启用了源代码映射,并认识到有一个源代码映射,在控制台中告诉我:

“源映射检测到相关文件应该添加文件树中,您可以将这些解析的源文件作为常规JavaScript文件进行调试,相关文件可通过文件树或Ctrl P”

但是,源文件不能通过任一方法使用.

在本地构建上构建文件结构(仅使用Login作为示例):

  1. build
  2. |- resources
  3. |- js
  4. |- app.js
  5. |- app.js.map
  6. |- typescript
  7. |- app.ts
  8. |- sections
  9. |- login
  10. |- LoginService.ts
  11. |- LoginDirective.ts
  12. |- LoginController.ts

但是,Chrome只会在文件树中显示

  1. build
  2. |- resources
  3. |- js
  4. |- app.js

而已.没有Typescript文件夹,没有文件. Ctrl-P也没有找到它们.所以当我调试时,我只能调试编译的app.js文件,而不是看到Typescript代码.

我的gulp文件相关部分:

  1. var ts = require( 'gulp-typescript' ); // compiles typescript
  2. var tsProject = ts.createProject( 'tsconfig.json' );
  3.  
  4. gulp.task( 'compile:typescript',function () {
  5. var tsResult = tsProject
  6. .src() // instead of gulp.src(...)
  7. .pipe( sourcemaps.init() )
  8. .pipe( ts( tsProject ) );
  9.  
  10. return tsResult.js
  11. .pipe( sourcemaps.write( '.',{
  12. includeContent: false,sourceRoot: 'typescript'
  13. })
  14. )
  15. .pipe( './build' )
  16. ;
  17. } );

我已经查看了类似情况的各种文档和解决方案,但我仍然没有让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/’.

猜你在找的JavaScript相关文章