Skip to content

Bundler Source Map Support

sospirited edited this page Nov 20, 2013 · 2 revisions

The composite js-bundler supports a tag like this:

<@js.bundle@>

which is actually just another way of saying:

<@js.bundle dev-minifier="none" prod-minifier="combined"@>

Alternatively, if you want minfication in prod, you might choose to say something like this:

<@js.bundle prod-minifier="closure-simple"@>

This is made possible, by the minifier plugin interface:

MinifierPlugin:
	List<String> getMinifierLevels()
	void minify(String minifierLevel, List<InputSource> inputSources, Writer writer)
	void generateSourceMap(String minifierLevel, List<InputSource> inputSources, Writer writer)

where InputSource is given as:

InputSource:
	String getRequestName()
	String getSource()
	String getSourceMap()

The getSource() method will return the source as returned by the bundler, but with any sourceMappingURL comment stripped from the end, so that source-map ignorant minifiers don't accidentally forward them. The getSourceMap() method will search the underlying source string to see if it contains a trailing sourceMappingURL comment, and then either make a request to the bundler to produce that source map, or return null if there was no such comment. Minifiers that support source maps will add a trailing sourceMappingURL comment to the entire bundle, and minifiers that source multi-level source maps will use the getSourceMap() method to feed any additional source-maps into the minifier where these are available.

Bundlers that produce source-maps mustn't advertise them via their generateRequiredDevRequestPaths() and generateRequiredProdRequestPaths() methods, since these methods are intended for advertising source code only, and these request paths will instead be discovered by the browser or a composite bundler if one is being used. This has the side effect that source-maps won't be created in production, which is probably fine anyway since the source code will never be available in production anyhow. Instead, a better strategy is probably to re-point the source-map to http://localhost:7070/<app>/<source-map-url>. Provided requests for the source are relative to the source-map url (this needs to be confirmed), then a developer that wants to debug an issue in production will be able to get source-map support by running a local brjs instance configured to serve the same code as has been deployed to production.

The exact same strategy outlined here can be used by the composite css bundler so that we can get sourcemap support for the CSS content too.

Clone this wiki locally