closure-compiler

closure-compiler copied to clipboard

It is not clear how to generate source maps that can be used to debug code on localhost, which is arguably a very common use case.

What is certain, is that it is necessary to use a combination of compiler flags. One combo that works is the following:

--create_source_map=%outname%.map \
--source_map_include_content=true \
--output_wrapper="%output%//# sourceMappingURL=bundle.js.map"

The compiler flags create_source_map and source_map_include_content are documented here, but there is no mention of the fact that you should also use the output_wrapper flag.

In order to find out how to generate sourceMappingURL, you have to look through the FAQ.

Btw, the FAQ links to an external page http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ but this link does not work anymore. However, this is beside the point.

The point is, ideally there would be a small section in the wiki about configuring source maps - with all the details in one place - and this could be referenced from the compiler flags page.

You could add on the point that most/all of these flags have no effect with --compilation_level=BUNDLE, and that this isn't always told to the end user, the flags are just ignored. There is presently no way to produce BUNDLEd code with functional sourcemaps using the command line utility, though if you write your own wrapper over ClosureBundle it is quite easy to do - all the required features to achieve this are in closure-compiler already, they are just left unset if you use BUNDLE.

(In our fork we have fixed that, and further made it possible to use --define statements with BUNDLEd output, though we are phasing out usage of the command line tool in favor of something that can skip parsing unchanged files, akin to typed_ast or the old PersistentInputStore, but for the JsFileRegexParser to only find dependency info.)

As an extra side note, source maps in general are needlessly complicated, as the compiler must know how the JS will be deployed and used - two different html files in different paths cannot both use the same JS file with a relative path to source maps, since source maps are defined in the spec to load relative to the HTML host file, not the JS file to which they map sources. This results in needing to already know that your sourceMappingURL= must point to the absolute path of the eventually deployment server if you plan on supporting loading the JS from more than one html page in different directories.