文档章节

javascript source map 的使用

粒子数反转
 粒子数反转
发布于 10/18 23:31
字数 868
阅读 5
收藏 0

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大意义。

从源码转换讲起

JavaScript脚本正变得越来越复杂。大部分源码(尤其是各种函数库和框架)都要经过转换,才能投入生产环境。
常见的源码转换,主要是以下三种情况:

  1. 压缩,减小体积。
  2. 多个文件合并,减少HTTP请求数。
  3. 其他语言编译成JavaScript。最常见的例子就是CoffeeScript。
    这三种情况,都使得实际运行的代码不同于开发代码,除错(debug)变得困难重重。

通常,JavaScript的解释器会告诉你,第几行第几列代码出错。但是,这对于转换后的代码毫无用处。你看着报错信息,感到毫无头绪,根本不知道它所对应的原始位。
这就是Source map想要解决的问题。

sourcemap

什么是Source map

简单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。
有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。

sourcemap-result

目前,暂时只有Chrome浏览器支持这个功能。在Developer Tools的Setting设置中,确认选中"Enable JavaScript source maps"。

sourcemap-settings

如何启用Source map

只要在转换后的代码尾部,加上一行就可以了。
  
  //@ sourceMappingURL=/path/to/file.js.map
  
map文件可以放在网络上,也可以放在本地文件系统。

如何生成Source map

Source map 可以通过javascript 压缩工具在压缩之后直接生成就行了。在VS.NET中是默认生成的,要使source map有效的唯的条件就是不能将压缩前的js原文件删除,否则浏览器同样会报出找不到源码错误。

如果我们是在纯javascript 的开发环境如 chrome apps / nodejs 下比较推荐使用 grunt 的 uglify 任务插件在完成压缩的同时直接生成source map 并且将source map的引用加入到加压后的js文件中。此功能在 uglify 0.6.0 后得到好很好的支持,在Gruntfile中的具体设置如下:

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
        uglify: {
            build: {
                options: {
                    sourceMap: true,
                    sourceMapIncludeSources: true,
                    sourceMapName: 'js/runtime.min.js.map'
                },
                files: {
                    'js/runtime.min.js': [
                        'app/services.js',
                        'app/directives.js',
                        'app/controllers.js'
                    ]
                }
            }

        }
    });

只需要加入 sourceMapsourceMapIncludeSources 和 sourceMapName 就可以很好地控制source map的生成了。

结语

我比较重视实用性,至于source map的文件格式也是一篇极长的理论,我想一般程序不会摆着工具不用闲得蛋疼去自己写source map的。如果想了解关于source map的构成和source map中的VLQ编码可以参考HTML5 Rocks 上的这篇 Introduction to JavaScript Source Maps 英文长文。

本文转载自:https://www.cnblogs.com/Ray-liang/p/4018162.html

共有 人打赏支持
粒子数反转
粉丝 0
博文 65
码字总数 16689
作品 0
闵行
前端工程师
私信 提问
jquery-1.10.2.min.map is triggering a 404 (Not Found)问题的解决

当我们使用jquery.min.js时经常会出现 jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)的错误(主要是使用chrome的开发者) mini.map是什么? min.map文件是在js为压缩文件时,...

coldlemon
2013/11/25
0
0
【javascript】source map

最近在学webpack,遇到一个从未见过的名词source map。便跑去百度了一番,对其有了一些了解。好记性不如烂笔头,在此记录一下,方便以后查询。 一:source map长啥样? 之前下载Jquery的时候...

小草先森
2017/10/26
0
1
[译] 论 Rust 和 WebAssembly 对源码地址索引的极限优化

原文地址:Oxidizing Source Maps with Rust and WebAssembly 原文作者:Nick Fitzgerald 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:D-kylin Tom Tromey 和我尝...

LeviDing
07/16
0
0
如何利用Grunt生成对应的Source Map文件,线上代码压缩使用

如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提供方便,比如线上的...

tinderfang
2015/03/30
0
0
JavaScript Source Map 详解

作者: 阮一峰 日期: 2013年1月23日 上周,jQuery 1.9发布。 这是2.0版之前的最后一个新版本,有很多新功能,其中一个就是支持Source Map。 访问 http://ajax.googleapis.com/ajax/libs/jqu...

i33
2013/02/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

码云项目100,水一发

简单回顾一下: 早期构想最多的,是希望能将PHP一些类和编码分区做得更细,所以很多尝试。但不得不说,PHP的功能过于单一,是的,也许写C/C++扩展,可以解决问题,那我为什么不用C#或者Golan...

曾建凯
13分钟前
1
0
Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
4
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
3
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
4
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部