dimk dimk - 1 year ago 86
jQuery Question

Setting up require.js for a static website and loading custom code as if it was a library

I am new to stack overflow and I was actually curious about my require.js setup, cause it is the first time I 'm using it and having seen many different approaches/examples, I am not sure if what I 've done so far is correct.
So, on my index I have on the "head"

<script data-main="js/app" src="js/vendor/require-2.2.0-min.js"></script>

and at the end of my 'body' I have the Google Analytics snippet. No other script is loaded directly from index.

On app.js that is inside my $projectroot/js folder I have:

"baseUrl": "js/vendor",
"paths": {
"app": "..",
"jquery" : ['//code.jquery.com/jquery-1.12.4.min','jquery-1.12.4.min'],
"modernizr" : 'modernizr-2.8.3-respond-1.4.2.min',
"bootstrap" : ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min','bootstrap.min'],
"plugins": '../plugins'
"shim": {
"bootstrap": ["jquery"],
"plugins": ["bootstrap"]


Also, my main.js which is on the same folder with app.js contains:

], function($)
console.log('required plugins loaded...');

Finally, my plugins.js is NOT a library, but some custom js code that I need to be loaded last. Is this ok so far? Any drawbacks with this approach? Would it be ok to add the rest of my custom js code on a similar manner? Thank you very much for your responses!!

Answer Source

To answer your question, the one thing I would change is by putting the global dependecies in your main.js file:


into your app.js file like so:


This means that your global dependencies will get shared across all of your modules, instead of just in your main.js file. This means you won't have do include them in every file that you want to use them.

Apart from that, it looks good

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download