SourceMaps on Mantri

Mantri generates Source Map v3 files.

To enable sourceMap file generation you only need to define the sourceMapFile key in the build options of your mantriConf.json file.

A mantriConf.json file with sourceMaps enabled:

{
  "baseUrl": "js/",

  "build": {
    "src": "js/app.js",
    "dest": "dist/app.min.js",
    "sourceMapFile": "dist/app.min.js.map",
    "sourceMappingURL": "/dist/app.min.js.map"
  }
}

The sourceMappingURL key is optional, if defined it will point your browser to the value you define.

Common Gotchas

Source file paths

The sourceMap file is generated by the Google Closure Compiler (GCC). GCC does not -yet- provide a way to mangle with the paths in the sources key of the sourceMap file. As a result the mappings will not work.

Suppose your Javascript application is under the folder js/ and the build output and sourceMap file is in the folder dist/. The generated sourceMap sources key will look like this:

{
  "version":3,
  "file":"dist/app.min.js",
  "lineCount":561,
  "mappings":"KAFJ,CAAR;",
  "names":["a","b"],
  "sources":[
    "js/vendor/jquery.min.js",
    "js/vendor/handlebars.min.js",
    "js/app.js"
  ]
}

As the paths are relative and the sourceMap file was accessed from the /dist/app.min.map location, your browser will be directed to look into /dist/js/app.js instead of /js/app.js.

Right now, there are three solutions to this problem, the following one:

The symbolic-link of shame

The quick and dirty solution would be to create a symbolink link in your dist/ folder pointing to the js/ folder.

Waiting on the other solutions

The other two possible solutions is to either implement a post-processor that will manipulate the generated sourceMap file (PRs welcome!), or waiting for the ultimate solution of GCC implementing the sourceRoot option.