弄懂 SourceMap，前端开发提效 100%

一、什么是 Source Map

通俗的来说， Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系。关于 Source Map 的解释可以看下 Introduction to JavaScript Source Maps[7]。

我们线上的代码一般都是经过打包的，如果线上代码报错了，想要调试起来，那真是很费劲了，比如下面这个例子：

使用打包工具 Webpack ，编译这一段代码

console.log('source map!!!')
console.log(a); //这一行肯定会报错

浏览器打开后的效果：

点击进入报错文件之后：

这根本没法找到具体位置以及原因，所以这个时候， Source Map 的作用就来了， Webpack 构建代码中，开启 Source Map ：

然后重新执行构建，再次打开浏览器：

可以发现，可以成功定位到具体的报错位置了，这就是 Source Map 的作用。需要注意一点的是， Source Map 并不是 Webpack 特有的，其他打包工具同样支持 Source Map ，打包工具只是将 Source Map 这项技术通过配置化的方式引入进来。关于打包工具，下文会有介绍。

二、Source Map 的作用

上面的案例只是 Source Map 的初体验，现在来说一下它的作用，我们为什么需要 Source Map ?

阮一峰老师的JavaScript Source Map 详解[8]指出，JavaScript 脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。

常见的源码转换，主要是以下三种情况：

• 压缩，减小体积

• 多个文件合并，减少 HTTP 请求数

• 其他语言编译成 JavaScript

这三种情况，都使得实际运行的代码不同于开发代码，除错（ debug ）变得困难重重，所以才需要 Source Map 。结合上面的例子，即使打包过后的代码，也可以找到具体的报错位置，这使得我们 debug 代码变得轻松简单，这就是 Source Map 想要解决的问题。

三、如何生成 Source Map

各种主流前端任务管理工具，打包工具都支持生成 Source Map 。

3.1 UglifyJS

UglifyJS 是命令行工具，用于压缩 JavaScript 代码

安装 UglifyJS ：

npm install uglify - js - g

压缩代码的同时生成 Source Map ：

uglifyjs app.js - o app.min.js--source - map app.min.js.map

Source Map 相关选项：

--source - map Source Map的文件的路径和名称
    --source - map - root 源文件的路径
    --source - map - url //#sourceMappingURL的路径。 默认为--source-map指定的值。
    --source - map - include - sources 是否将源代码的内容添加到sourcesContent数组
    --source - map - inline 是否将Source Map写到压缩代码的最后一行
    -- in -source - map 输入Source Map， 当源文件已经经过变换时使用

3.2 Grunt

Grunt 是 JavaScript 项目构建工具

配置 grunt-contrib-uglify 插件以生成 Source Map ：

grunt.initConfig({
    uglify: {
        options: {
            sourceMap: true
        }
    }
});

使用 grunt-usemin 打包源码时， grunt-usemin 会依次调用grunt-contrib-concat[9]与grunt-contrib-uglify[10]对源码进行打包和压缩。因此都需要进行配置：

grunt.initConfig({
    concat: {
        options: {
            sourceMap: true
        }
    },
    uglify: {
        options: {
            sourceMap: true,
            sourceMapIn: function(uglifySource) {
                return uglifySource + '.map';
            },
        }
    }
});

3.3 Gulp

Gulp 是 JavaScript 项目构建工具

使用gulp-sourcemaps[11]生成 Source Map :

var gulp = require('gulp');
var plugin1 = require('gulp-plugin1');
var plugin2 = require('gulp-plugin2');
var sourcemap