javascript的source map

javascript的source map其实大家并不陌生，今天无意看到了阮一峰的JavaScript Source Map 详解，就自己看了一下，从jQuery 1.9发布开始，多的其中一个功能就是Source Map。

我们可以访问http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js，打开压缩后的版本，滚动到底部，你可以看到最后一行是这样的：

//@ sourceMappingURL=jquery.min.map

这就是Source Map。它是一个独立的map文件，与源码在同一个目录下，你可以点击进去，看看它的样子。

什么是Source map?

简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

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

如何生成这样一个map文件呢？grunt构建工具可以帮我们方便的实现，我拿我最近写的小组件doraPlugs

为例子生成了map文件：

grunt中只需要在uglify的时候加入如下配置就可以了：

uglify: {
            buildb:{//任务二：压缩b.js，输出压缩信息
                options: {
                    report: "min",//输出压缩率，可选的值有 false(不输出信息)，gzip
                    // 生成的map文件地址与源文件(src/1.js)的 相对路径
                    sourceMapRoot: './',
                    // 生成 map文件的地址
                    sourceMap: './dist/js/dora.min.js.map',
                    // 用于定义 map文件地址 并放在压缩文件底部， url相对于 压缩文件(dist/mix.js)
                    sourceMappingURL: 'dora.min.js.map'
                },
                files: {
                    './dist/js/dora.min.js': ['./js/index.js']
                }
            }
        }

另外 uglify插件option选项中的sourceMap、sourceMappingURL还可以是一个函数，有兴趣的童鞋可以研究一下。