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!
Thank you @kud for your answer.
What about in production ? You said you do not use the single compiled
app.js
file on dev. Then I guess you can doon dev environment and it will work.
When your website is on production, you don't modify your code to remove this RequireJS instruction. But as you use Uglify in you optimize option, your application will serve serve the single compiled
app.js
file and your RequireJS instruction will answer a 404 error, am I right ? This is exactly in this case I don't understand how to use an uglifier and RequireJS at the same time.