<commit_before>---
title: source maps 简介
---

source maps是什么，有什么用
===
web开发过程中，为了兼顾开发和生产两个环境的利益诉求，通常同一个文件在不同的环境下就有不同的形态。比如，在开发过程中我们页面引用hello.js，代码易读、易调试，在生产环境下，就需要压缩混淆后的hello.min.js，代码小传输快。  
source map就是一个包含了hello.js和hello.min.js之间的对应关系的文件。有了这个对应关系，我们就可以像调试hello.js一样来调试hello.min.js了。如果你有过调试*.min.js代码的经历，你就明白那是个头疼的活。  
source map不仅停留在js范畴，它还可以用于css（sass到css的对应）。将来某一天，它存在于markdown和html之间我也不会奇怪。  
总而言之，正如其名，source map就是帮助浏览器把开发者不友好的格式映射成其源码（source）。

source map使用场景
===
- 首先提一下sourcemap的工具
- 用于javascript
- 用于css
source map原理
===

小结
===
source maps是个不错工具，但是随着web开发流程的进化，它的出场机会越来越少。诸如Grunt、Gulp之类的工具，让开发和产品环境间的切换变得随心所欲，相比而言，source map带给开发者的在产品环境下的代码友好就不那么稀有珍贵了。

参考链接
---
- [introduction to javascript source maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/)
- [an introduction to source maps](http://blog.teamtreehouse.com/introduction-source-maps)<commit_msg>Update 2015-3-22-source-maps-101.md<commit_after>---
title: source maps 简介
---

source maps是什么，有什么用
===
web开发过程中，为了兼顾开发和生产两个环境的利益诉求，通常同一个文件在不同的环境下就有不同的形态。比如，在开发过程中我们页面引用hello.js，代码易读、易调试，在生产环境下，就需要压缩混淆后的hello.min.js，代码小传输快。  
source map就是一个包含了hello.js和hello.min.js之间的对应关系的文件。有了这个对应关系，我们就可以像调试hello.js一样来调试hello.min.js了。如果你有过调试*.min.js代码的经历，你就明白那是个头疼的活。  
source map不仅停留在js范畴，它还可以用于css（sass到css的对应）。将来某一天，它存在于markdown和html之间我也不会奇怪。  
总而言之，正如其名，source map就是帮助浏览器把开发者不友好的格式映射成其源码（source）。

source map使用场景
===
- javascript的suorce map  
    javascript的source map工具有很多，这里我们使用[uglifyjs](https://github.com/mishoo/UglifyJS2)做一个简单的例子来说明source map是如何工作的。具体命令为：`uglifyjs hello.js --source-map hello.js.map --output hello.min.js`。
    - the source, `hello.js`
        ```js
            var hello = function(message){
                print(message);
            };
            
            function print(text){
                var messageBox = document.getElementById("message-box");
                messageBox.innerText = messageBox.innerText + "\n" + text;
            };
            
            hello('Gimm');
        ```
    
    - the map, `hello.js.map`  
        ```js
            {
              "version": 3,
              "file": "hello.min.js",
              "sources": ["hello.js"],
              "names": [
                "print",
                "text",
                "document",
                "getElementById",
                "innerText",
                "hello",
                "message"
              ],
              "mappings": "AAOA,QAASA,OAAMC,GACXC,SAASC,eAAe,eAAeC,UAAYH,EALvD,GAAII,OAAQ,SAASC,GACjBN,MAAMM,GAOVD,OAAM"
            }
        ```
    
    - the output, `hello.min.js`  
        ```js
        function print(e){document.getElementById("message-box").innerText=e}var     hello=function(e){print(e)};hello("Gimm");
    //# sourceMappingURL=hello.js.map
        ```
    可以看到，最终生成的min.js里有一条注释：`//# sourceMappingURL=hello.js.map`,它告诉了浏览器对应的source map文件。在map文件里有`file`和`sources`属性，这样就有了min.js -> js.map -> js的映射关系。  
    通过上面的描述，心细一点的话，你会发现source map文件里的`sources`属性是复数，没错，一个min.js可以对应多个源文件。我们经常需要把多个js源文件合并，就是这个情景。同时，source map这个特性也是需要浏览器支持的。当前chrome和firefox都默认支持source map。
- 用于css

source map原理
===

小结
===
source maps是个不错工具，但是随着web开发流程的进化，它的出场机会越来越少。诸如Grunt、Gulp之类的工具，让开发和产品环境间的切换变得随心所欲，相比而言，source map带给开发者的在产品环境下的代码友好就不那么稀有珍贵了。

参考链接
---
- [introduction to javascript source maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/)
- [an introduction to source maps](http://blog.teamtreehouse.com/introduction-source-maps)
{'fraction_non_alphanumeric': 0.1290135956031241, 'fraction_numerical': 0.00404975412207116, 'mean_word_length': 3.3661616161616164, 'pattern_counts': {'":': 5, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 1, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6941272', 'n_tokens_mistral': 1777, 'n_tokens_neox': 1889, 'n_words': 135}