I have a bit experience in JavaScript development but I'm quite new in modern development tools such as Yeoman, Grunt or Bower. But I can create webapps with RequireJS, separate logic with Backbone.js and use templating with Handlebars. I am aware of what's going on.
I saw that these tools leads you to concat files, which is great, in my case I want to speak about JavaScript files. I can't understand how it works.
With RequireJS, I can separate files, for example if I'm using Backbone.js, every model, every view can be a file. If my application is big enough, some pages will need some models and some other pages will need some other models. And thanks to RequireJS I can load only the models (I mean the files, then) I need.
So, how can RequireJS work with modern tools ? Grunt will make me a single application.js file which content all the concatenated and minified JavaScript files in my scripts
directory. In these scripts are some RequireJS instructions like :
require(['my-model'], function (MyModel) {/* some code here */})
But know I have one single JavaScript file and my application is serving only this one. I got a 404 error answer from my my-model
RequireJS instruction. Moreover, all my application's JavaScript code is now loaded in every pages, even models I don't need.
I can see how powerful these tools are and how the JavaScript (and generally develoment) community is active on them, so I guess I missed something. I guess something is wrong with what I just said because I can find blog articles speaking of "Grunt using RequireJS" but I never find in these articles part of what I'm saying. So I guess I ask wrong questions.
I'm looking for someone to explain me why I'm wrong and how to use these wonderful tools. I want Grunt to manage my projects and I want RequireJS to load only code I need and work in develoment and production.
Thank you to all and let's talk!
Hey Remy!
Thing is RequireJS references modules IDs, not URIs, it falls back to trying to load by URI only if the ID is not already defined.
The optimizer will create these IDs for you if you have not set them, so the modules in the compiled app.js will work as expected.