Make source maps a link to original files on the remote machine
Using the Google Closure compiler to minify the javascripts heap. Now I would like to add the source maps to those as well, in order to debug them in the wild.
Thing is, I want to store the original (and preferably the map files) in a completely different location like a different server. I was looking for a solution to this and found out about the parameter sourceRoot
. But it looks like it's not supported?
Also found this parameter --source_map_location_mapping
, but no documentation at all. It looks like it wants a pipe delimited ( filesystem-path|webserver-path
) argument . Tried several different approaches to this, for example local filename|remote url
, but no overriding. It just gives me No such file or directory
and java.lang.ArrayIndexOutOfBoundsException
.
Has anyone succeeded in putting the raw data minifiles on a remote machine?
Or does anyone know any documentation for --source_map_location_mapping
?
source to share
The flag should be formatted like this:
--source_map_location_mapping=foo/|http://bar
The flag should be repeated if you need multiple places:
--source_map_location_mapping=foo/|http://bar --source_map_location_mapping=xxx/|http://yyy
But I expect that you are faced with the fact that "|" can be interpreted by your shell. For example:
echo --source_map_location_mapping=foo/|http://bar
-bash: http://bar: No such file or directory
(The choice to use "|" was unfortunate). Make sure it is properly shielded. as:
--source_map_location_mapping="foo/|http://bar"
I submitted a pull request to report a bug for poorly formatted flag values:
https://github.com/google/closure-compiler/pull/620
which at least you know your flag value is wrong (so you won't see an exception out of bounds).
source to share
I suspect a lot of people have the same problem as mine:
-
Source map urls are generated relative to your current directory
-
they do not necessarily match the relative urls of your website / server
-
Even if they match directly, the oddly defined pseudo-spec found here means that Chrome / Firefox are going to try loading your paths relative to your original map. that is, the browser loads /assets/sourcemaps/main.map, sees the assets /js/main.js and loads /assets/sourcemap/assets/js/main.js(yay). (Or it could be relative to the original js file actually, I just ended up in the same directory).
Use the example above. Let's say we have the assets /js/main.js in our source map and we want to make sure mywebsite.com/assets/js/main.js loads. To do this, you must pass an option:
--source_map_location_mapping="assets|/assets"
As John mentioned, quotes are important and repeat multiple arguments multiple times for multiple parameters. The / prefix will let Firefox / Chrome know that you want it relative to your root site. (If you do it with something like grunt-closure-tools , you need to escape more:
config:{
source_map_location_mapping:"\"assets|/assets\"",
}
Thus, we can essentially map any given sourcemap path to any given website path. It's really not a perfect replacement for some kind of closure source root, but it allows you to map each part of your sources individually to their own roots, so it's not a bad trade-off and gives some additional flexibility (i.e. you can specify some cdn paths for some of your assets, but not others).
Additional information you may find helpful, you can automatically add the sourceMappingURL via output_wrapper. (Although, if you want to be able to debug in production, you should probably prefer some ability to get the server to return X-Sourcemap: blah.js.map headers not publicly available)
--output_wrapper="(function(){%output%}).call(this); //# sourceMappingURL=/assets/js/my_main_file.js.map"
source to share
Fortunately, the source code for the Google Closure compiler is publicly available.
https://gist.github.com/lydonchandra/b97b38e3ff56ba8e0ba5
REM --source_map_location_mapping is case SENSITIVE !
REM need extra escaped double quote --source_map_location_mapping="\"C:/tools/closure/^|httpsa://bla/\"" as per http://stackoverflow.com/a/29542669
java -jar compiler.jar --compilation_level=SIMPLE_OPTIMIZATIONS --create_source_map=C:\tools\closure\latest\maplayer.js.map --output_wrapper "%output%//# sourceMappingURL=maplayer.js.map" --js=C:\tools\closure\mapslayer.js --js_output_file=maplayer.min.js --source_map_location_mapping="\"C:/tools/closure/^|httpsa://bla/\""
source to share