前端构建：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))))

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 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 sample.js -o sample.min.js --source-map sample.min.map

ClojureScript，我们可以通过第二节的方式生成.map文件。

  CoffeeScript，通过下面的命令生成.map文件：

coffee -c sample.min.js sample.js -m

{"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"]}

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