Question

I am trying to optimize a significant number of javascript files with RequireJS, but I am having trouble wrapping my head around how to properly build the scripts with the optimizer and load them in the browser in the desired way.

While the following description is rather specific, I would imagine quite a few other people are encountering the same challenges. (Or they have made wiser choices in their requirements!)

I am using bower to download a catalog of scripts, and I would like to include those scripts (or parts of them) in my web-page.

Additionally, while testing I essentially never want to have the browser retrieve the individual bower scripts. The local test framework responds to requests serially, so this is quite slow. I would like to use the RequireJS optimizer, or some other method, to combine all the downloaded bower scripts into one file.

In contrast, my own code been broken out into a long list of Coffeescript files, and I would like to use the RequireJS CS plugin to compile them for the browser.

When developing then, I would expect my browser to load something like the following:

• components.js
• main.js
  • csmain.coffee
  • my_module.coffee

The components.js would consist of the following files from bower’s components directory e.g.

• jquery: jquery/jquery
• jqueryui:
  • jquery-ui/ui/jquery.ui.core
  • jquery-ui/ui/jquery.ui.datepicker
• amplify:
  • amplify/core/amplify.core
  • amplify/request/amplify.request
• bootstrap:
  • bootstrap/js/bootstrap-transition
  • bootstrap/js/bootstrap-alert
  • bootstrap/js/bootstrap-button
  • bootstrap/js/bootstrap-carousel
  • bootstrap/js/bootstrap-collapse
• lodash: lodash/lodash

In production, the browser would load one file, say all.js.

So my question is: if I use RequireJS what goes into the browser main.js and build script to achieve the partial and completely optimized builds. I have spent a disproportionate amount of time on this problem, and the number of inexplicable and arcane errors from RequireJS has been tragically lengthy – to the point where I could not identify severable prohibitive issues. It just doesn’t seem to be the tool for the job, but I would be happy to be corrected.

What I have for an optimization script resembles the following (in YAML notation):

baseUrl: "../media/my-scripts/"
optimize: none
out: build/all.js
stubModules:
 - cs
 - coffee-script
paths:
  cs: "../../scripts/components/require-cs/cs"
  'coffee-script': "../../scripts/components/require-cs/coffee-script"
  usf: "./main"
  components: "../compiled/components"
name: usf
logLevel: 0
shim: # ...

It seems that the problem I wish to solve is rather straightforward, yet the solution not forthcoming. RequireJS, albeit brilliant, is dramatically more complex than what I need. Almond.js is an alternative for loading the modules – but the problem rests with the lack of an alternative suitable optimizer.

I would be grateful for any thoughts on what options may be available for using r.js to achieve the above, or alternatively what suitable alternative optimization solutions may exist.

Answer 1

Not having found an answer, I wrote YAMDO to solve this problem EDIT I have since deprecated that project and come to rest upon the awesome Browserify project.