Support for js source maps

[polmuz]

Source maps are a very nice tool for debugging something on compressed code using Chrome Dev Tools. There are lots of tools that generate them including Google closure that is already supported by django-compressor.

Here's some info: https://github.com/ryanseddon/source-map/wiki/Source-maps%3A-languages,-tools-and-other-info

[polmuz]

I'm willing to implement it but I'd like to know if there's any interest about this feature.

So far I've been reading the code to get an idea of what is needed to accomplish this.

First, on the template tags side, there are at least two options to turn on source maps, a parameter for the compressor or a different compressor: {% compress js sourcemap %} or {% compress js-sourcemaps %}

Then, if source maps option is on, the compressor should check that all the hunks are files because you can't generate source maps for inline (I think, not completely sure).

Finally, maybe the trickiest part, a compressor backend that can handle a list of files and output the compressed js and the source map file is needed.

I'd love to get some feedback on this to know if I'm on track or I got everything wrong.

[Nagyman]

This may be possible with the existing toolchain. I've managed to get basic sourceMapURL support for CSS via SASS.

e.g. https://gist.github.com/Nagyman/6542739

This is very preliminary; some known limitations are mentioned in the comments.

[davisein]

I am interested. It would easy fast debugging staging code.
Any advance on this feature?

[sicarrots]

Yes, i'm currently working on this feature.

[agriffis]

@sicarrots I'm using source maps when settings.DEBUG since compressor just passes through the original tags, but it seems pretty tricky to make them work after concatenation and relocation. How are you approaching it?

[Kos]

I'm having some success experimenting with Compressor and uglify.js. For now I've subclassed the JsCompressor and overridden output to work around the whole filter/concat/filter chain and only use Uglify for all activities (concat, compress, generate source maps).

[fetzig]

source maps are used by sentry too https://www.getsentry.com/docs/sourcemaps/

[Kos]

@fetzig Exactly my rationale behind doing that

[jpic]

@Kos Would you kindly paste some code for inspiration purposes ? Thanks B)

[Kos]

This is what I ended up using: https://gist.github.com/Kos/9270494 (I have offline compression on production and no compression in development)

Next step would be to allow using {% compress js %} for the normal JsCompressor (because the filter/concat/filter chain sometimes does get helpful) and set up something like {% compress uglify %} to use my custom class, but I haven't figured out a way to do that by configuration.

edit: 🍻 :-)

[iknite]

🍻 @Kos!

[spinus]

+1 for that feature!

[spinus]

For JS sourcemaps I found that:
http://roverdotcom.github.io/blog/2014/05/28/javascript-error-reporting-with-source-maps-in-django/
with corresponding django-compressor plugin
https://github.com/roverdotcom/django-compressor-sourcemaps/

[vladlep]

+1 I would like this feature also. It is very handy to be able to debug JS compressed files in production. Sentry errors do not make much sense if not.

[woile]

+1 for the feature, absolutely required for Sentry errors :)

[wtayyeb]

+1 for js and css source maps

[ace-han]

I would like to see js/ES6/coffee(even TypeScript) and css/sass/less source map
🍻

[travijuu]

Does Compress still not support source maps feature?

[diox]

No, it still does not support that feature. You're welcome to submit a PR implementing this.

[imposeren]

It's still possible to implement some "hackish" solution, for example:
https://bitbucket.org/imposeren/tabletop-planning/src/7d551806cfee2c5493b7273e40c5448aec480544/tabletop_tools/compressor_filters.py?at=master

Better solution is required to make PR...