每天进步一点点——sourcemap

一、sourcemap是什么

首先,sourcemap是一个存储了转换前后位置信息的独立map文件,这个.map格式的文件与源文件在同一个目录下。

二、为什么用sourcemap

在开发完整之后,我们通常会对代码进行转换:
常见的几种代码转换:
1、压缩,减体积;
2、合并,少请求;(多个文件合并成一个文件,以减少http请求)
3、其他语言编译为javascript
毫无疑问,代码转换会导致运行代码和开发代码出现差异,从而导致debug困难,sourcemap的启用很好的解决了这种问题,它将运行代码和开发代码的位置对应起来,通过这个位置关系我们可以方便的debug。
这就是使用sourcemap的意义。

三、怎么用sourcemap

1、传统方式:只需在转换后的代码尾部添加//@ sourceMappingURL=map文件地址即可
2、Webpack中sourcemap的配置


sourcemap配置.png

从官网的这张截图可以发现虽然配置模式很多,但是都是以下几个项目的组合:
(1)eval:使用eval包裹模块代码
(2)cheap:不包含列信息
(3)source-map:产生.map文件
(4)module:包含loader的sourcemap
(5)inline:将.map作为DataURI嵌入,不单独生成.map文件(这个配置项比较少见)
(6)hidden:
(7)nosources:


参考文章:
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
https://segmentfault.com/a/1190000008315937

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,381评论 19 139
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,349评论 7 35
  • 小巷 又弯又长 没有门 没有窗 我拿把旧钥匙 敲着厚厚的墙
    纳木措94阅读 941评论 16 20
  • 黄昏染上阴翳 夏日的春城下起秋雨 二十岁的玩笑惹了你 江南何几佩玉与珊迹 时间是太美的过客 而我怀疑生活 阿野先生
    阿野先生阅读 212评论 0 0
  • 一直想画个头顶长角的女人,哈哈终于下手画了,但是一开始不太顺利,草图画的像个大头鬼哈哈 开始第一遍线稿,本来是想画...
    苹果jack阅读 1,006评论 14 23

友情链接更多精彩内容