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就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。

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

sourcemap用法.png

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

打开sourcemap支持.jpg

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

为例子生成了map文件:

打开sourcemap支持1.jpg

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还可以是一个函数,有兴趣的童鞋可以研究一下。