当 badjs 遇上 sourcemap

本文作者：IMWeb 九月 原文出处：IMWeb社区 未经同意，禁止转载

在开始之前，如果你不知道 sourcemap 是什么，希望你能先了解，可以看看 阮博士的文章，或者 Google 搜一下。并且，已知的构建工具都已经支持 生成 sourcemap 了。同时也希望你了解一下badjs是什么。

在实际项目中，不管出于什么原因的考虑，一般很少将 sourcemap 文件发布到外网，甚至很多项目根本没有生成 sourcrmap 文件。但是，基于 sourcemap 用源码调试应该是一件很 nice 的事情，让 sourcemap 发布到内网的服务器不就好了？

为了解决这个问题，我们在内网搭建了一个 sourcemap 的文件服务器，并在构建的时候将生成的 sourcemap 文件通过badjs-sourcemap发布到该文件服务器。

到此，如果你希望项目生成 sourcemap 并通过源码进行调试，只需要在构建的时候加入一个这个：

// 以 grunt 为例
grunt.registerTask('publish:sourcemap', 'publish sourcemap', function() {
    var done = this.async(); // 异步
    var options = {
        from: 'dist/', // 需要同步的文件路径
        to: '7.url.cn/edu/', // 服务器保存的路径
        match: '**/*.map', // 需要同步的文件
        server: 'http://10.208.138.222:443/upload.map' // badjs-sourcemap-server 部署的服务器
    };
    require('badjs-sourcemap')(options, done);
});

// 再比如 gulp 接入
gulp.task('publish:sourcemap', ['uglify'], function(callback) {
    var options = {
        from: 'dist/',
        to: '7.url.cn/edu/',
        match: '**/*.map',
        server: 'http://10.208.138.222:443/upload.map'
    };
    require('badjs-sourcemap')(options, callback);
});

如果想要更流畅的体验， 只需要在服务器转发 以.map结尾 的请求，同时在 js 文件的末尾添加

//# sourceMappingURL=xxx.map

当你打开控制台的时候, sourcemap 文件将自动加载，如图：

这里留一个问题给大家思考：为什么通过 sourcemap 生成的源码文件是在 dist 目录下的，或者说 sourcemap 文件为什么必须指定 sourceRoot 且不能为空或指向当前目录?

到此好像跟 badjs 都没什么关系，但是，结合 badjs 的上报，我们拿到的都是压缩后的文件名行号和列号，通过 sourcemap，就可以直接定位到源码的位置了。

接下来的问题是：让 badjs 通过 hash 将 错误信息带到页面且打印到 console。 首先，badjs 管理后台页面查看时将 错误信息通过 hash 带到页面，如图（可以右键打开新tab查看大图）：

并且让 badjs-report 自动获取该 hash 并通过 console.error 打印到控制台，如图：

此外，你应该知道，在 Chrome 开发者工具的控制台输出 一个带行号和列号的的链接且该链接指向的资源可以在 Sources 面板找到, 比如:

最后，放一张整个过程的 Gif（图片有点大，可以右键打开新tab查看大图）：

脑图: http://naotu.baidu.com/file/5830485fa2e5feb9c00eb313083bc82a?token=4265220a399b713a