Underscore.js - How to identify JavaScript dependencies?

Question

I'm using backbone.js and underscore.js for my mobile app project. My question is how to identify JavaScript dependencies for each files? I try using my code below but still not working in my browser.

require.config({
    waitSeconds: 0,
    //path mappings for module names not found directly under baseUrl
    paths: {
        jquery: 'vendor/jqm/jquery_1.7_min',
        jqm: 'vendor/jqm/jquery.mobile-1.4.0-rc.1',
        underscore: 'vendor/underscore/underscore_amd',
        backbone: 'vendor/backbone/backbone_amd',
        jqueryflexslider: 'vendor/lib/jquery.flexslider',
        shCore: 'vendor/lib/shCore',
        shBrushXml: 'vendor/lib/shBrushXml',
        shBrushJScript: 'vendor/lib/shBrushJScript',
        jqueryeasing: 'vendor/lib/jquery.easing',
        jquerymousewheel: 'vendor/lib/jquery.mousewheel',
        demo: 'vendor/lib/demo',
        text: 'vendor/require/text',
        plugin: 'plugin',
        main: 'main',
        messages: 'messages',
        templates: '../templates',
        modules: '../modules',
        model: '../model'
    },
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery': {
            exports: '$'
        },
        'jqm': {
            deps: ['jquery'],
            exports: '$'
        },
        'jqueryflexslider': {
            deps: ['jquery'],
            exports: '$'
        },
        'jqueryeasing': {
            deps: ['jquery'],
            exports: 'jQuery'
        },
        'jquerymousewheel': {
            deps: ['jquery'],
            exports: '$'
        },
        'demo': {
            deps: ['jquery'],
            exports: '$'
        },
        'main': {
            deps: ['jquery'],
            exports: '$'
        },
        'messages': {
            deps: ['jquery'],
            exports: '$'
        },
        'underscore': {
            exports: '_'
        },
    }
});
//1. load app.js, 
//2. configure jquery mobile to prevent default JQM ajax navigation
//3. bootstrapping application
define(['app', 'jqm-config'], function(app) {
    $(document).ready(function() {
        console.log("DOM IS READY"); // Handler for .ready() called.
    });
    app.initialize();
});

Reference: https://github.com/woothemes/FlexSlider/blob/master/demo/index.html

Answer 1

It really depends. I am new to JavaScript as well. I use Visual studio as my IDE. To install packages I use NuGet Package Manager in visual studio. It basically installs all dependency packages for you.

In other hand, you have two good websites where if you search for packages/libraries, it will give you the most up-to-date information about the package and its dependencies.

NPM - Search for the package you need ex:backbone

NuGet - Search for the package you need ex:DataTables

This way you can find the dependencies of the package to configure amd.

Hope this helps somebody if not you!

Happy Javascripting!!