Django + Django-Pipeline with Javascript "Require"

Question

I have a module that calls require on a Javascript library. I am trying to compress my .js files with Django-Pipeline but after collectstatic the web-page gives the error:

UncaughtReferenceError: require is not Defined

Normal testing/deployment works fine with collect-static if I don't use Django-Pipeline to compress the files. What is the correct setup for minifying my .js files without breaking dependencies - the documentation is kind of sparse. Is django-pipeline the right choice?

Edit: I've tried to make sure the 'required' models are compressed first in pipeline, but I can't seem to compress the module that require is called from at all without it returning an error.

Bryozoan

Answer 1

In my experience, it's difficult to combine both require.js and django-pipeline (even though they are both great projects).

I've worked on one project which used require.js for all its javascript. I tried to use django-pipeline but couldn't get it to work properly with require.js. We ended up working with https://github.com/etianen/django-require for the javascript, and django-pipeline for the css minification.

I would recommend either trying to remove require.js and manually including the library that it is importing using pipeline, or using require.js to build and minify all your javascript assets. You could do add a new step that builds all your javascript files, and link to those either directly in the templates or using pipeline.

Sorry, this may not be an actual 'solution' to your answer, but you did ask "Is django-pipeline the right choice?" :)

Georgie

Agreed. Handling CSS with django-pipeline is great, but in terms of JS we absolutely could use a more flexible solution like django-require. – Electra

Answer 2

This is because your JS compressor (YUGLIFY for example) is also minifying javascript variable names, so require might have been named to something like x or y . To overcome this set proper options in your JS compressor, to not minify the variable names.

http://django-pipeline.readthedocs.org/en/latest/compressors.html#pipeline-yui-js-arguments

For Yuglify, this argument would be mangle:False, which would stop mangling the names.

Reef

+1. You're correct that setting mange:false will fix the require break - but one still ends up minifying the entire library (350kb in this case), which is kind of a minus. So I think I'm going to have to try django-require. – Bryozoan

Answer 3

Maybe it's PIPELINE_DISABLE_WRAPPER. Try setting it to True.

See https://django-pipeline.readthedocs.org/en/latest/configuration.html#wrapped-javascript-output

Kofu

I do have PIPELINE_DISABLE_WRAPPER - True – Bryozoan

I guess Django-Pipeline can't process require correctly? Unless someone has an update for this. – Bryozoan