前端构建：Source Maps详解

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　

 当使用CoffeeScript、ClojureScript编写前端脚本时，当使用Less、Sacc编写样式规则时，是否觉得调试时无法准确找到源码位置呢？当使用jquery.min.js等经压缩后的工具库时，是否觉得连调试的门都不不知道在哪呢？

  针对上述问题，google为我们提供了Source Maps这一解决方案，以下内容为对Source Maps的学习记录，以便日后查阅。

  由于篇幅较长，特设目录一坨！

  二、示例

  三、Source Maps方案详解

       1. 方案结构

       2. 支持的浏览器和启动方式

　　 3. 生成器

　　 4. map文件详解

　　　　4.1. map文件格式

　　　　4.2. mappings属性

　　　　4.3. VLQ编码

  四、注意

  五、总结

 

二、示例　　　　　　　　　　　　　　　　　　　　　　　　　　

  首先我们使用ClojureScript写一段递归函数becomeGeek

(ns sample)
(defn becomeGeek [progress]
    (.log js/console progress)
    (if (> 100 progress)
        (becomeGeek (+ 1 progress))))

  预编译后得到如下js 

sample.becomeGeek = (function becomeGeek(process){
    console.log(process);

    if(((100) > process)){
        return becomeGeek.call(null,((1) + process));
    } else {
        return null;
    }
});

   当需要调试时我们的处境就是看着JS代码修改ClojureScript代码，对于这个becomeGeek函数来说没多大困难，但对于整个工程来说难度
不亚于看着二进制中间码来修改Java代码哦。下面我们通过lein+cljsbuild插件来生成source maps从而解决上述问题！

  project.clj配置信息

(defproject sample "0.1.0-SNAPSHOT"
  :dependencies [[org.clojure/clojure "1.6.0"]
                 [org.clojure/clojurescript "0.0-2411"
                  :exclusions [org.apache.ant/ant]]
                 [compojure "1.1.6"]]
  :plugins [[lein-cljsbuild "1.0.4"]]
  :cljsbuild {
    :builds [{:id "main"
              :source-paths ["src-cljs"]
              :compiler {:output-to "js/main.js"
                           :output-dir "out"
                         :optimizations :none
                         :source-map true}}]})

  执行lein命令 

$ lein cljsbulid once

 然后我们开启Chrome的devTools中js和css的source maps功能即可像在VS上调试C#一样爽快了。

在sample.cljs文件中设置断点，然后调用sample.becomeGeek调试即可！

Chrome的devTools：

FF的devTools：

三、Source Maps方案详解　　　　　　　　　　　　　　　　　　　　

  我想大家现在已经感受到Source Maps的威力了，有了它我们就可以安心的使用JS的超集语言（ClojureScript、CoffeeScript和TypeScript等），也可安心调试jquery.min.js等经过压缩混淆的库代码了。

  1. 方案结构

  　　Source Maps不仅仅是一个.map后缀的文件，而是由浏览器、.map文件生成器和.map文件组成的一套技术方案。

          .map文件，其实是一个关系映射文件，用于存放源码和编译后代码的文件、行号、列号和变量名的映射关系；

          .map文件生成器，每种预处理器(Lessc、Closure、cljsc等)都可通过可选项设置如何生成.map文件；

          浏览器，Chrome和FF均提供Source Maps支持（IE11依然不支持），浏览器实质上提供的是.map文件解析引擎，根据.map文件内容加载源文件和在调试模式中关联源码和编译后代码。

　　　另外编译后代码最后一行会追加一行指向.map文件语句，指向的方式有http uri scheme 和 data uri scheme两种。

           http uri scheme，格式为 //# sourceMappingURL=sample.js.map?rel=1420853090118 

           data uri scheme，就是通过对.map文件进行base64编码，然后编译后代码最后一行以data uri scheme的形式引入.map文件内容，格式为 //# sourceMappingURL=data:application/json;base64,Asdi....... 

  2. 支持的浏览器及启用方式

　　Chrome，devTools的Settings中开启JS和CSS的Source Maps功能。

　　

　　FF，默认已经开启JS和CSS的Source Maps功能。

  3. 生成器

      下面将介绍Lessc、GC(Google Closure Compiler)、UglifyJS、ClojureScript和CoffeeScript

      Less的生成器为lessc，通过可选项 --source-map 开启生成.map文件的功能，并通过如 --source-map-rootpath 等可选项配置.map文件的相关信息。具体请查看《前端构建：Less入了个门》

      GC，作为JS的编译器，不但提供去除空白、注释等功能，还会对代码进行语法分析并优化代码（函数内联、变量常量化、局部变量和属性名替换等

a = new Object    => a = {}
a = new Array     => a = []
if (a) b()        => a && b()
return 2 * 3;     => return 6;

GC提供三种调用方式，分别为网页版、网络API版和独立应用程序。由于GC使用Java编写，因此我们需要安装JRE。（若不想安装JRE那么可参考@赵劼通过IKVM.NET来将clojure-compiler.jar转码为.Net版）然后通过下面的命令生成.map文件：

$ java -jar compiler.jar --js sample.js --create_source_map ./sample-map --js_output_file sample.min.js

      UglifyJS，由于jQuery改用UglifyJS作为其预编译工具令其声名远播，通过下面的命令生成.map文件：

$ uglifyjs sample.js -o sample.min.js --source-map sample.min.map
ClojureScript，我们可以通过第二节的方式生成.map文件。  CoffeeScript，通过下面的命令生成.map文件：
coffee -c sample.min.js sample.js -m

  4. map文件详解

     到这里大家已经可以得心应手地使用Source Maps了，接下来的内容是为想再深入理解.map文件内容和Source Maps实现原理的朋友准备的。内容主要来自@阮一峰的《Javascript Source Map 详解》

     4.1. map文件格式

        以第二节生成的.map文件为例

{"version":3,
 "file":"/C:/lein/myapp/out/sample.js",
 "sources":["sample.cljs?rel=1420853090124"],
 "sourceRoot":"","mappings":
 ";AAAA;;AAEA,oBAAA,pBAAMA,yCAAYC;AAAlB,AACC,AAAMC,YAAWD;;AACjB,GAAI,CAAA,QAAOA;AACV,OAACE,qBAAW,CAAA,MAAKF;;AADlB",
 "names":["sample/becomeGeek", "process", "js/console", "becomeGeek"]}

         {Number} version，Source map的版本，目前为3；

         {String} file ，编译后的文件路径；

         {Array.<String>} sources ，源码文件路径数组；

         {String} sourceRoot ，源码文件的所在目录；

         {Array.<String>} names ，源码中的所有变量名和属性名；

         {String} mappings ，记录源码与编译后代码的位置信息。

     4.2. mappings属性

        首先mapping属性值分为三层含义

　　　　①以分号（;）标识编译后代码的每一行，即是分号间隔的内容代表编译后代码的一行；

　　　　②以逗号（,）标识编译后代码该行中的每一个映射位置，即是逗号间隔的内容代表一个映射位置；

　　　　③以5组VLQ编码字段标识源码和编译后代码的具体映射信息。从左至右每组表示如下：

              第1组，表示对应编译后代码的第几列；

              第2组，表示源码所属文件在sources数组中的索引值；

              第3组，表示对应源码的第几行；

              第4组，表示对应源码的第几列；

              第5组，表示在names数组中的索引值，若没有则可省略。

              注意：每组VLQ编码字段有0~N个VLQ编码字符组成，如qCAAUH。

     4.3. VLQ编码               

　　  VLQ编码最早用于MIDI文件，后来被多种格式采用。它的特点就是可以非常精简地表示很大的数值。

　　  VLQ编码是变长的。如果（整）数值在-15到+15之间（含两个端点），用一个字符表示；超出这个范围，就需要用多个字符表示。并且规定每6bit标识一个字符。



　Continuation
　　|　　　　　Sign
　　|　　　　　|
　　V　　　　　V
　　１０１０１１

 

        第一位（Continuation位）表示当前6个bit是否为当前编码段的最后一节，1表示不是，0表示是。

        最后一位（Sign位），当该节为当前编码段的第一节时，表示符号1为负号，0为正号；若不是第一节则表示数值位。

        下面对16进行VLQ编码，

           1. 将16转换为二进制10000；

           2. 在最右边补充符号位（Sign位）得到100000；

           3. 从最右边开始以5bit为一组对其进行分段，分段后不足5bit的在前面补0，得到00001、00000；

           4. 倒序得到00000、00001；

           5. 为每一段添加连续位（Continuation位）得到100000、000001；

           6. 对每段进行Base64编码，得到gB。（下图为Base64编码字符集）

                       

 

四、注意　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  

  通过Chrome和FF下devTools的network面板我们可以看到浏览器加载了.map文件和源代码文件，现在问题来了，那么在生产环境当中用户访问网页时岂不会多加载两个开发环境使用的文件吗？

  其实浏览器默认情况下（不打开devTools时）是不会加载.map文件和源代码文件的，所以大家可以放心了。假如你还是怕用户误操作打开了devTools，那么就在打包发布时不生成.map文件就好了！

 

五、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    　 　

  之前尝试过CoffeeScript，但由于编码速度虽然提高不少，但调试效率却降低更多（without source maps之痛），导致最终回归JS的怀抱了。现在我们终于可以安心使用CoffeeScript咯！

时间： 2025-01-11 01:42:06

前端构建：Source Maps详解的相关文章

JAVA Eclipse使用Maven构建web项目详解(SSM框架)

tips: 启动项目后,welcome-file的链接即为测试用例 https://github.com/sheep0704/JAVA-SSM-Spring 部署maven web项目 Eclipse使用Maven构建web项目详解 pom.xml添加webapp依赖: <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId>

MySQL 数据库 source 命令详解及实例

MySQL 数据库 source 命令详解及实例 MySQL 数据库 source 命令,该命令是数据库导入命令.source 命令的用法非常简单,首先你需要进入 MySQL 数据库的命令行管理界面,然后选择需要导入的数据库,执行 source 命令.如下图所示. MySql 数据库 source 命令 mysql> use test Database changed mysql> set names utf8; Query OK, 0 rows affected (0.00 sec) mys

[Canvas前端游戏开发]——FlappyBird详解

一直想自己做点小东西,直到最近看了本<HTML5游戏开发>,才了解游戏开发中的一点点入门知识. 本篇就针对学习的几个样例,自己动手实践,做了个FlappyBird,源码共享在度盘 :也可以参考github,里面有更多的游戏样例. 游戏截图 HTML5之Canvas Canvas是Html5中用于绘图的元素,它可以绘制各种图形,比如长方形,多边形,圆形等等.如果想要了解Canvas的使用可以参考: http://www.w3school.com.cn/tags/html_ref_canvas.a

JavaScript Source Map 详解

这是2.0版之前的最后一个新版本,有很多新功能,其中一个就是支持Source Map. 访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js,打开压缩后的版本,滚动到底部,你可以看到最后一行是这样的: //@ sourceMappingURL=jquery.min.map 这就是Source Map.它是一个独立的map文件,与源码在同一个目录下,你可以点击进去,看看它的样子. 这是一个很有用的功能,本文将详细讲解这

gradle构建android项目详解

1.用Gradle构建 1.1 工程结构 如图所示,这是一个不能更普通的Android的Gradle工程了. 根目录下面的settings.gradle当中主要是用来include子模块的,比如我们这个工程有一个叫作app的子模块,那么settings.gradle的内容如下: include ':app' 根目录下面的build.gradle包含一些通用的配置,这些配置可以在各个子模块当中使用. gradle.properties文件包含的属性,会成为project的properties的成员

Zend Framework教程之前端控制器Zend_Controller_Front用法详解_php实例

本文实例讲述了Zend Framework教程之前端控制器Zend_Controller_Front用法.分享给大家供大家参考,具体如下: 主要功能 ZendFramework的MVC实现的核心机制是通过Zend_Controller_Front前端控制器,用于初始化请求环境,处理请求,路由分发,完成响应操作,Zend_Controller_Front采用的单例模式,所以一个应用只有一个前端控制器.如果需要前端控制器提供一些特殊功能,可以继承Zend_Controller_Front自定义前端控

Ubuntu/Debian 自有软件包构建私有源详解_Linux

Ubuntu/Debian 自有软件包构建私有源   linux在自建私有yum源方面,我们熟知redhat系列的createrepo命令,配合rpmbuild命令,使我们创建私有yum真是相当简单了,如果切换到debian系列下面呢?前面的文件讲解了怎么制作debian系列的deb包,但是没有讲怎么制作apt-get私有源,其实debian也有类似的createrepo命令.下面我们看看制作私有apt源的过程 安装制作工具: apt-get install dpkg-dev 创建deb文件目录

前端构建：Less入了个门

一.前言 说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scss.Sass.Stylus和Less.(最近还听说出现了Autoprefixer等CSS后处理器,可参考@一丝的PPT) 众多CSS预处理器中Less的语法最接近原生CSS,因此相对来说更容易上手,假如有JS.C#等编程经验的话,其实上述的几种预处理器的学习成本也不会特别高.下面是我们这阵子的学习笔记,以便日后查阅. 最好的入门教程--官网地址:http://lesscss.org/ 最佳实践之一--

《开源容器云OpenShift：构建基于Kubernetes的企业应用云平台》一3.2　核心组件详解

3.2 核心组件详解 OpenShift的核心组件及其之间的关联关系如图3-2所示.OpenShift在容器编排层使用了Kubernetes,所以OpenShift在架构上和Kubernetes十分接近.其内部的许多组件和概念是从Kubernetes衍生而来,但是也存在一些在容器编排层之上,OpenShift特有的组件和概念.下面将详细介绍OpenShift内部的核心组件和概念. 3.2.1 Master节点 在介绍Master节点前,我们先补充一些内容.OpenShift集群可以由一台或多台主