Home/ Questions/Q 9257265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T12:08:31+00:00

Here is how I would do it using plain HTML script tags per this

  • 0

Here is how I would do it using plain HTML script tags per this SO Question on CDN suggestions. This would be a serial load (underscore->jquery->backbone) that holds up the rest of the page.

 <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>

How would I load these libraries using require.js or a similar non-blocking method?

References ( links to the API )

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    jquery is AMD Friendly so you can just require it in your require.js config

    Backbone and underscore are no longer AMD Friendly so you have these options:

    1. You can either include them as “externals”, with shim assigning the correct dependencies (see here the docs and a tutorial )

    2. Or you can use slightly altered versions of both libraries that are AMD enabled. You can find them in this repository.

    3. Use an older version of backbone and underscore. (not recommended)

    Note: If you opt for the shimming route, keep in mind that those libraries will not be load asynchronously.

    Here’s a working example using the ALTERED VERSIONS of the library:

    require.config({
    enforceDefine: true, //Only libraries AMD Friendly will be loaded
    urlArgs: "bust=" + (new Date()).getTime(), //for development, forces browser to clear the cache
    paths: { // relative paths (to the current file main.js)
        "es5":               'libs/es5-shim/es5-shim',
        "jquery":            'libs/jquery/jquery',
        "jqueryThreeDots":   'libs/jquery/plugins/jquery.ThreeDots',//A jquery plugin
        "underscore":        'libs/underscore/underscore.amd',
        "underscore.string": 'libs/underscore/underscore.string',
        "backbone":          'libs/backbone/backbone.amd',
        "text":              'text',
        "mediator":          'libs/backbone/plugins/backbone.mediator',
        "bootstrap":         'libs/bootstrap/bootstrap.min',
        "rangy":             'libs/rangy/rangy-core.amd',
    },
    shim: {
        "bootstrap": {
            deps: ["jquery"],
            exports: "$.fn.popover"
        }
    }
});

    An example with shim:

    require.config({
    enforceDefine: true,
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        "jquery": 'http://code.jquery.com/jquery-1.9.1.min.js'
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"], // Backbone dependencies
            exports: "Backbone" // variable exported
        },
        underscore: {
            exports: "_"
        }
    }
});
    • 0