Getting source maps working with evaluated code

Question

I have a build script that runs all my code through uglifyjs, does a bunch of fancy caching stuff, and ultimately runs eval( code ) on some JavaScript files.

Answer 1

Here is a setup using Grunt to compile javascript to single file using uglify with a source map

package.json

"src": {
    "js": "src/js"
},
"dest": {
    "js": "bin/js"
}

Gruntfile.js

grunt.initConfig({
    /**
     * Loading in the package file to read source and destination directories
     */
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
    options: {
        banner: '/* all.min.js <%= grunt.template.today("dd-mm-yyyy") %> */\n',
        sourceMap: '<%= pkg.dest.js %>/all.min.js.map',
        sourceMappingURL: 'all.min.js.map',
        sourceMapRoot: '../../',
        mangle: false
        /*mangle: {
            except: ['jQuery']
        }*/
    },
    js: {
        src: [
            '<%= pkg.src.js %>/**/*.js'
        ],
        dest: '<%= pkg.dest.js %>/all.min.js'
    }
    }
};

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('min', ['uglify']);

Which creates the following files:

all.min.js

/* all.min.js 04-10-2013 */
angular.module("App",[])
//# sourceMappingURL=all.min.js.map

all.min.js.map

{"version":3,"file":"bin/js/all.min.js","sources":["src/js/App.js"],"names":["angular","module"],"mappings":"AAeAA,QAAQC","sourceRoot":"../../"}

Answer 2

I had a similar problem and the solution seem to be using an inlined SourceMaps (DataURL of a SourceMap).

Here is an example:

eval("blah blah\n//@ sourceMappingURL=data:application/json;base64,...");

Seems like you can't reference external resources from an eval.

I think you also need to use sourcesContent to insert the source code into the SourceMap.

Tested with Chrome 32.