Shim command working in RequireJS

Question

I'm working with RequireJs and i'm quit new to it. I have an existing project and JavaScript code and now I'm changing that code into the Modules to be used in RequireJS. There are many third party APIs being used in my project like Bootstrap , JQuery & slickgrid etc. which are non-AMD(Asynchronous module definition). I know non-AMD Js files are required to load with shim command like

requirejs.config({
baseUrl: 'js/lib',
paths: {
    app: '../app'
},
shim: {
    backbone: {
        deps: ['jquery', 'underscore'],
        exports: 'Backbone'
    },
    underscore: {
        exports: '_'
    }
  }
});

but I dont know how does shim works and its benefit. Can't we simply include these js files conventional way like tag? can anyone please explain me how does it works. Also I want to load my non-AMD files with shim command how can I load them? My js files have dependencies on eachother so do i need to write the command

 deps: ['file1', 'file2']

for eachfile within shim command? It would be much complex as i have over 20 JS files. Is there any better way to do this ? Please let me know if i'm missing something or i'm Wrong. I'll be very thankful for any kind support.

Answer 1

It is a very Common doubt, in your case you need to have Jquery, Underscore and Backbone inside the paths configuration to use specify from where require will load the JS files. Then inside the Shim block, you can specify your dependecies and how you'd like to use it in your app(exports).

To understand how shim works, I suggest you to read this article - http://aaronhardy.com/javascript/javascript-architecture-requirejs-dependency-management/

Or the require JS web site.

http://requirejs.org/docs/api.html#config-shim

Hope it helps.