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!
No, you don't even need to do it, the optimizer will do it for you.
RequireJS will not try to load any file because it will already have the module with the required ID, generated by the optimizer based on its URI unless you define it yourself.
If you have your model located in
models/Tweet
relatively to the config baseUrl, the optimizer will attribute it the IDmodels/Tweet
in the optimized file, so RequireJS will know that it has it already, no need to try to load any file.If you want to define multiple modules in a single file, it is possible and it would probably work after optimization, but it will not work before because RequireJS will not be able to load the file.