Question

I’m fairly new to Backbone and just started trying to learn AMD today. I installed the RequireJS-jQuery library from RequireJS’s website. So this is my script tag, which has Laravel path calls in it:

<script data-main="{{ path('js/main') }}" 
src="{{ path('js/libs/requirejs/require-jquery.js') }}"></script>

I’m trying to make sure everything loads correctly, so I’m trying to console.log my dependencies. Backbone returns an object just fine. Underscore and jQuery do not. Here is my main.js file:

  require.config({
    baseUrl: '../js/',
    paths: {
        jquery: 'libs/jquery/jquery-1.8.3.min',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min'
    }
});

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
  define( 'jquery', [], function () { return jQuery; } );
}

//the "main" function to bootstrap your code
require(['jquery', 'underscore', 'backbone', 'app'],
    function () {  
        var App = require('app');
        //App.initialize();
        console.log($);
        console.log(_);
        console.log(Backbone);
});

I have a couple of questions, do I need the path for jQuery, since it’s part of the RequireJS-jQuery library? Two, what is this about shimming? Do I need to shim this to get it work? I’m using v 2.1.4 of RequireJS-jQuery.

I tried following this post but couldn’t get it working. I’m using AMD versions of Backbone and Underscore. Why won’t Underscore and jQuery console.log?

Answer 1

When requiring any file via require.js, it must conform to the standard AMD definition in order for the IIFE to have an argument defined.

For example, in the jQuery library, they have added an export definition:

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
  define( "jquery", [], function () { return jQuery; } );
}

Which allows you to reference $ in the IIFE.

Shimming adds an export definition (similar to what jQuery has above), so if you wanted to you could have _, $ and Backbone point to the appropriate references… but personally, instead of relying on the arguments, I just rely on the evaluation globally, setup necessary shims for dependencies and otherwise, for all my own modules (where I do define each file as an AMD module), I use the inline require definition.

For example:

require(['jquery','underscore','backbone', 'my-module'],function(){
    var MyModule = require('my-module');
});

Hopefully the above made sense.

~ Based on your code above, try:

require(['jquery', 'underscore', 'backbone', 'app'],
    function () {  
        var App = require('app');
        //App.initialize();
        console.log($);
        console.log(_);
        console.log(Backbone);
});