Search code examples
requirejsgruntjshandlebars.jsgrunt-contrib-uglify

using requirejs without main file nor config()


I'm building an app that will contain many js (jquery) modules (files) using the following setup;

  • The build is run using Grunt task runner.
  • I use handlebars templates, then generate the html from *.hbs files.
  • During the build, I uglify all the js files into one minified file.
  • I call the minified file in my application <script src="assets/js/app.min.js"></script>

Now, I want to use requirejs to organize my code and adhere to the AMD specifications..

But I got 3 problems with this approach:

  1. I need to have 1 single minified file for all the js; this keeps my code harder to "decode" thus to copy (since it is mixed with other dependencies; jquery, modernizer..) and also helps avoid extra http requests if scripts are called individually.. However, requirejs needs a main file to initialize the app and inside that main file It calls the other required files.. I don't have such configuration.
  2. Many of the dependencies I'm using are in a bower package (that I don't include in the distribution); this makes it not possible to call those files using the suggested requirejs method.
  3. I'm using jquery on this with some 3rd party plugins that don't call define(); to make them work I have to use shim config which again rises the problem #2!

So how am I supposed to take advantage of requirejs while keeping my code in modules and well organized?

Sorry for the long question and thanks for reading :)

ps: Feel free to change the title of the question as I couldn't find a better one!


Solution

  • I finally opted for AngularJS as it adheres to my setup above and allows me to split my app into manageable small modules.

    I have also the possibility to use the ease of jQuery (even though it is not a best practice among angular community) and much more.