Include a custom Jquery plugin in Backbone + Requirejs using shim

Question

I have a project in backbone and I am using require.js to modularize the code.

my main.js looks like this:

require.config({
    paths:{
        jquery:'../../../../core/js/external/jquery/jquery-1.8.2',
        underscore:'../../../../core/js/external/underscore/underscore',
        backbone:'../../../../core/js/external/backbone/backbone',
        text:'../../../../core/js/external/require/text',
        backbone_paginate:'../../../../core/js/external/backbone/backbone.pagination',
        'jquery.sprites':'../../../../core/js/sprites',
        'jquery.sprite_util':'../../../../core/js/util/spriteUtil'


    },
    shim:{
        'backbone':{
            deps:['underscore', 'jquery'],
            exports:'Backbone'
        },
        'underscore':{
            exports:'_'
        },
        'jquery.blades':{
            deps:['jquery']
        },

        'jquery.sprites':{
            deps:['jquery']
        },
        'jquery.sprite_util':{
            deps:['jquery.sprites']
        }
    }
    }
});
require(['../app'], function (AppView) {
    "use strict";
    new AppView();
});

So, here the jquery.sprites and jquery.utils are the plugins that I need to use without including them in my Views. Currently I have to include them everywhere wherever they are being used. For exaample:

define([
  'jquery',
  'underscore',
  'backbone',
  'views/SimpleNamedObjectView',
  'jquery.sprites',
  'jquery.sprite_util',


], function($, _, Backbone, SimpleNamedObjectView){
  "use strict";

Is there a way where I can access the jquery.sprites and jquery.sprite_util without including them in every view? Can it become global for all the views from main.js so that I can use the functions of these plugins without including them in all the views? For example this.$el.getSprites(); (where the getSprites is a method of jquery.sprites)

Answer 1

Once they're loaded, as they're "shimmed", they're going to be available globally.

So you could call them as dependencies in your bootstrapping require call inside main.js. This would work.

But! That's completely against the philosophy of Require.js and AMD. Each module should declare all their dependencies so they can all be loaded individually and work as is. This would also allow for easier unit testing.

So, yes you can, but you really shouldn't do this.