Question

I'm having a hard time here, I'm trying to load non-AMD modules jquery / lodash / underscore before any of my AMD modules will be loaded. I know that I should use 'shim' and I do. Evertyghing seems to work in every browser except IE8 and less. Is there some kind of workaround for IE7/8 ?

I've took a look at 'use' plugin / 'order' plugin and wrapping global variables into AMD modules (http://tbranyen.com/post/amdrequirejs-shim-plugin-for-loading-incompatible-javascript). Everything faild. Any ideas of how should it be done?

EDIT

require.config({
use: {
    backbone: {
        deps: ["underscore", "jquery"],
        attach: "Backbone"
    },

    underscore: {
        attach: "_"
    },

    jquery : {
        attach: 'jquery'
    }
},
paths: {
    'underscore': 'lodash-1.3.1.min',
    'backbone': 'backbone-1.0.0.min',
    'jquery': 'jquery-1.10.2.min',
}
});

require([
'use',
'jquery',
'underscore',
'backbone',
'app',
], function($) {
'use strict';
});

'use' is the use.js plugin. I've also used 'shim' before.

EDIT 2

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

my shim config. REQUIREJS VERSION IS 2.1.10.

Edit 3:

require.config({
paths: {
    'underscore': '//cdn.vgc.no/js/libs/lodash/lodash-1.3.1.min',
    'backbone': '//cdn.vgc.no/js/libs/backbone/backbone-1.0.0.min',
    'jquery': '//cdn.vgc.no/js/libs/jquery/jquery-1.10.2.min'
},
enforceDefine : true
});

require([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone) {
'use strict';

console.log($);
console.log(_);
console.log(Backbone);
})

does this should work under IE8 ?

Was it helpful?

Solution

The shim for jquery is superfluous.

Also, if app is an actual RequireJS module, you do not need a shim for it. The define call for app should be define(['backbone'], function (Backbone) {....

Asgoth pointed out that lodash and Backbone are AMD-compliant so you should not have a shim for underscore or Backbone. You use lodash for underscore. Lodash has not needed a shim in a while (maybe ever). Backbone used to need a shim but it now has support for AMD-style loaders.

So at the moment, none of the shims in your configuration seem necessary. You should still use enforceDefine.

In case this was the source of confusion, let me clarify that the basic rule for using shims is this: if a module uses define to define itself, then it must not have a shim; if a module does not use define, then it must have a shim. The documentation that talks about using enforceDefine and making sure that all shims have exports set does not change this rule. What it is saying is that if a shim is required (according to the rule above), then this shim should have an exports field.

Edit: I'm able to get it to load in IE8 with the following code. You'll see a shim for Backbone there, despite my earlier comments. Why? Because you are using Backbone 1.0.0 which does not have AMD support. The latest version, Backbone 1.1.2, has support for AMD. So if you were to upgrade to this version, you would not need the shim. (This code prefixes the CDN paths with http: but I do not believe it is a factor in your problem. It's just that I first loaded the test HTML from my local filesystem and to do this, the http: prefix was required.)

  require.config({
      paths: {
          'underscore': 'http://cdn.vgc.no/js/libs/lodash/lodash-1.3.1.min',
          'backbone': 'http://cdn.vgc.no/js/libs/backbone/backbone-1.0.0.min',
          'jquery': 'http://cdn.vgc.no/js/libs/jquery/jquery-1.10.2.min'
      },
      shim: {
          backbone: {
              deps: ["jquery", "underscore"],
              exports: "Backbone"
          }
      },
      enforceDefine : true
  });

  require([
      'jquery',
      'underscore',
      'backbone'
  ], function($, _, Backbone) {
      'use strict';

      console.log($);
      console.log(_);
      console.log(Backbone);
  });

Here's a screenshot of the console output in IE8:

Screenshot in SauceLab

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top