JavaScript Source Map 简介

libxd 发布于2019-08-19 14:27 / 966人阅读

摘要：为了提高性能，通常需要通过压缩和合并之后才能投入生产环境。多方便使用生成使用家的格式格式简单明了是的版本，是生成的文件，是原始代码所在的目录，留空表示同一目录。是原始代码，是转换前的所有变量名和属性名。其中，是默认开启的。

为了提高性能，JavaScript通常需要通过压缩和合并之后才能投入生产环境。如果使用CoffeeScript，还需要进行编译。

这就意味着，编辑的代码和运行的代码不一样。JavaScript的解释器的报错信息的行数是针对生成的代码的，行数与原来的代码不对应，内部变量也改了名字。于是调试的时候我们就会感到茫然无措。

如果转换代码的时候，我们能记录原始代码和生成的代码行数间对应的关系，那该有多好啊。

Source map就是干这个。

有了它，调试的时候将直接显示原始代码，而不是生成的代码。多方便！

使用Source map 生成

使用Google家的closure compiler：

java -jar compiler.jar  
     --js script.js 
     --create_source_map ./script-min.js.map 
     --source_map_format=V3 
     --js_output_file script-min.js

格式

Source map格式简单明了：

{
　version : 3,
　file: "out.js",
　sourceRoot : "",
　sources: ["foo.js", "bar.js"],
　names: ["src", "maps", "are", "fun"],
　mappings: "AAgBC,SAAQ,CAAEA"
}

version是 Source map 的版本，file是生成的文件，sourceRoot是原始代码所在的目录，留空表示同一目录。sources是原始代码，names是转换前的所有变量名和属性名。mappings决定原始文件和生成文件是如何对应的，看上去不太直白，因为它使用了Base64 VQL编码。

启用

只要在生成的代码的尾部加上指向source map文件位置的一行就可以了：

//@ sourceMappingURL=/path/to/script-min.js.map

如果你喜欢在代码尾部加注释，你也可以为生成的JavaScript指定一个特别的header：

X-SourceMap: /path/to/script-min.js.map

调试

新版的Google Chrome的Developer tools和Firefox的Firebug都支持。其中，Firefox是默认开启的。

CoffeeScript

CoffeeScript 1.6.1以上版本支持 source map。只需在编译时加上-m参数即可。

海外云主机私有云 source-map javascript简介 javascript语言简介 javascript技术简介

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77984.html

webpack@4.32.2研究笔记【03】- devtool

摘要：简介选项用于控制是否需要生成，以及如何生成。表示把每一个模块文件都转换为字符串，并且在每一个模块代码的尾部添加文件名，并使用执行。通过来处理已有的。优点是不需要建立和部署内网的服务器，缺点是无法直接线上源码。简介 devtool选项用于控制是否需要生成source map，以及如何生成source map。源码地址什么是source map？ source ma...

wangtdgoodluck 2019-08-23 18:01 评论0 收藏0
萌新误入vue-loader洞穴 -- sourcemap

摘要：今天的主线任务是，稍微了解下的这里简单记录下打怪经历故事背景大祭司布鲁梅尔，跟玩家说在杰罗瓦镇的西北方有一个迷宫，里面有个被关闭了年的魔物，我们需要把这个魔物干掉，正好以此来测试下玩家是否具备开启者的资格，也就是战斗系转职资格。今天的主线任务是，稍微了解下vue-loader的sourcemap 这里简单记录下打怪经历故事背景大祭司布鲁梅尔，跟玩家说在杰罗瓦镇的西北方有一个迷宫，...

Atom 2019-08-21 11:24 评论0 收藏0
WebPack+React.Js+BootStrap 实现进制转换工具

摘要：的作用是获取用户输入的数据，当输入框的值发生改变时，对应的事件响应会被调用也就是函数，其对进行了设置，并内部有回调函数告诉父级组件有属性发生变化。于是我们就在这个函数中调用进制转换的函数并把结果呈现出来，这样就实现了数据的传递功能了。一.WebPack入门 1.WebPack简介 WebPack是模块打包机：分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的...

Y3G 2019-08-20 11:40 评论0 收藏0
【翻译】PostCSS简介

摘要：许多开发人员花时间在使用的预处理器上如和。传统的预处理器的问题不能扩展。有些预处理器提供诸如的功能，可以彻底不使用它们。每个预处理器已经有了自己的标准。如下它被翻译成嗯我从来没有说过所有的插件都是有用的结束语和预处理器是伟大的。许多开发人员花时间在使用CSS的预处理器上如less,sass和stylus。这些工具已经成为Web开发的重要组成部分。写一个网站的样式，不使用嵌套，变量或混...

Lsnsh 2019-08-30 12:59 评论0 收藏0
babel插件入门-AST

摘要：是一个对象，它表示两个节点之间的连接。接着返回一个对象，其属性是这个插件的主要节点访问者。所以上面的执行方式是运行引入了自定义插件的打包文件现在为明显减小，自定义插件成功插件文件目录觉得好玩就关注一下欢迎大家收藏写评论目录 Babel简介 Babel运行原理 AST解析 AST转换写一个Babel插件 Babel简介 Babel 是一个 JavaScript 编译器,它能将es...

sanyang 2019-08-22 15:53 评论0 收藏0