您的位置:澳门新葡萄京娱乐网站 > web前端 > JavaScript Source Map 功效精解澳门新葡萄京888官网

JavaScript Source Map 功效精解澳门新葡萄京888官网

2019-12-22 02:30
java -jar compiler.jar  --js script.js  --create_source_map ./script-min.js.map  --source_map_format=V3  --js_output_file script-min.js
{ version : 3, file: "out.js", sourceRoot : "", sources: ["foo.js", "bar.js"], names: ["src", "maps", "are", "fun"], mappings: "AAgBC,SAAQ,CAAEA" }
//@ sourceMappingURL=/path/to/file.js.map

那正是Source Map。它是叁个独门的map文件,与源码在同叁个索引下,你可以点击踏入,看看它的楷模。那是三个很有用的效果,本文将详细讲授这一个作用。后生可畏、从源码调换讲起JavaScript脚本正变得尤为复杂。大部分源码都要通过转变,手艺投入生产条件。听而不闻的源码调换,重假如以下三种情景:压缩,减小体积。比方jQuery 1.9的源码,压缩前是252KB,压缩后是32KB。五个公文合併,收缩HTTP央浼数。别的语言编写翻译成JavaScript。最广大的事例就是CoffeeScript。这两种状态,都使得实际运作的代码差异于开采代码,除错变得繁重。平常,JavaScript的解释器会告诉你,第几行第几列代码出错。但是,那对于转变后的代码毫无用项。比如来讲,jQuery 1.9压缩后唯有3行,每行3万个字符,全数内部变量都改了名字。你瞅着报错音讯,认为毫无头绪,根本不理解它所对应的原本地点。那便是Source map想要解决的标题。二、什么是Source map综上可得说,Source map就是三个音信文件,里面储存着地方音讯。也正是说,转变后的代码的每叁个职位,所对应的转变前的地方。有了它,出错的时候,除错工具将直接显示原始代码,实际不是更换后的代码。那活脱脱给开荒者带给了比比较大方便。方今,一时半刻唯有Chrome浏览器扶持这些意义。在Developer Tools的Setting设置中,确认当选"Enable source maps"。三、如何启用Source map正如前文所提到的,只要在调换后的代码尾巴部分,加上风流潇洒行就足以了。

全体文件正是三个JavaScript对象,能够被解释器读取。它至关心爱护要有以下几天个性:- version:Source map的本子,前段时间为3。- file:调换后的文书名。- sourceRoot:转变前的文本所在的目录。如果与转移前的公文在一直以来目录,该项为空。- sources:调换前的文件。该项是三个数组,表示或者存在七个文本合并。- names:调换前的全体变量名和属性名。- mappings:记录地点新闻的字符串,下文详细介绍。六、mappings属性上面才是的确风趣的风流倜傥对:七个文件的逐一岗位是怎么样生龙活虎一相应的。关键便是map文件的mappings属性。那是三个相当短的字符串,它分为三层。第生龙活虎层是行对应,以分行表示,各种子公司对应转换后源码的一站式。所以,第二个子公司前的原委,就对应源码的第意气风发行,依此类推。第二层是岗位对应,以逗号表示,各种逗号对应转换后源码的一个岗位。所以,第二个逗号前的源委,就对相应行源码的首先个职位,就那样推算。第三层是岗位调换,以VLQ编码表示,代表该地方对应的转换前的源码地点。举例来讲,假定mappings属性的内容如下:

澳门新葡萄京888官网 1

正文转发自阮风姿罗曼蒂克峰的博客。原作内容如下:前一周,jQuery 1.9公布。那是2.0版以前的最后叁个新本子,有广大新效用,在那之中三个正是永葆Source Map。访谈 ,打开压缩后的本子,滚动到底层,你能够见见最终生机勃勃行是那样的:

种种参数的意义如下:- js: 转变前的代码文件- create_source_map: 生成的source map文件- source_map_format:source map的本子,这两天一律使用V3。- js_output_file: 转变后的代码文件。别的的变通方法能够参见这篇小说。五、Source map的格式开拓Source map文件,它大概是这几个样子:

mappings:"AAAAA,BBBBB;CCCCC"

map文件能够献身网络上,也得以放在地面文件系统。四、如何生成Source map最常用的不二诀要是运用谷歌(Google卡塔尔(قطر‎的Closure编写翻译器。生成命令的格式如下:

就代表,调换后的源码分成两行,第风流倜傥行有三个任务,第二行有贰个职位。七、地方对应的规律各样岗位采纳八位,表示七个字段。从左侧算起,- 第壹人,表示这些任务在的第几列。- 次之位,表示那么些职位归属sources属性中的哪叁个文本。- 第四个人,表示这些地方归属转变前代码的第几行。- 第四位,表示那些职责归于转变前代码的第几列。- 第伍个人,表示那么些职位属于names属性中的哪贰个变量。有几点须要证实。首先,全部的值都是以0作为基数的。其次,第陆位不是必备的,假如该职务并未有对症用药names属性中的变量,能够简简单单第伍位。再一次,每一人都应用VLQ编码表示;由于VLQ编码是变长的,所以每一位能够由五个字符构成。倘诺有些地点是AAAAA,由于A在VLQ编码中表示0,由此这些职位的四个位实际上都以0。它的意思是,该岗位在改换后代码的第0列,对应sources属性中第0个文本,归于调换前代码的第0行第0列,对应names属性中的第0个变量。八、VLQ编码最后,谈谈怎么样用VLQ编码表示数值。这种编码最先用于MIDI文件,后来被多种格式选取。它的风味正是能够足够轻便地意味着一点都不小的数值。VLQ编码是变长的。假如数值在-15到 15里头,用二个字符表示;超过那几个界定,就须要用多个字符表示。它规定,每一个字符使用6个两进制位,刚巧能够借用Base 64编码的字符表。在此6个位中,侧面的第一人表示是还是不是"一而再延续"。假设是1,代表那6个位后边的6个位也归于同三个数;借使是0,表示该数值到这6个位甘休。Continuation | Sign | | V V 101011那6个位中的左侧最终壹个人的意义,决计于这6个位是还是不是是有个别数值的VLQ编码的率先个字符。就算是的,这几个位表示"符号",0为正,1为负;若是不是,这几个位尚未分外意义,被当成数值的一片段。九、VLQ编码:实例下边看一个事例,怎么样对数值16进展VLQ编码。第一步,将16改写成二进制情势10000。第二步,在最右边补充符号位。因为16大于0,所以符号位为0,整个数成为100000。第三步,从侧面的最低位开头,将总体数每间距5位,实行分层,即成为1和00000两段。若是最高位所在的段不足5位,则前边补0,由此两段产生00001和00000。第四步,将两段的次第倒过来,即00000和00001。第五步,在每生龙活虎段的最前头增加一个"三番五次位",除了最后后生可畏段为0,其余都为1,即成为100000和000001。第六步,将每生龙活虎段转成Base 64编码。查表可以预知,100000为g,000001为B。由此,数值16的VLQ编码为gB。上边包车型地铁进度,看上去好像很复杂,做起来其实十分轻松,具体的兑现请看官方的base64-vlq.js文件,里面有详尽的申明。十、参照他事他说加以考查链接Introduction To JavaScript Source MapsSource Map Revision 3 Proposal

//@ sourceMappingURL=jquery.min.map

本文由澳门新葡萄京娱乐网站发布于web前端,转载请注明出处:JavaScript Source Map 功效精解澳门新葡萄京888官网

关键词: