RequireJS - What is the purpose of the export property in a pad

Question

What is the purpose of the export property in the gasket below? Is it really necessary?

requirejs.config({ shim: { 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } }); 

I ask because this seems redundant - when the module is included in the dependency list, we will again specify the exported name as an argument to the function:

 define(['backbone'], function (Backbone) { return Backbone.Model.extend({}); }); 

Answer 1

If shim not used in your example, then the Backbone object that you pass as a parameter will be undefined, since Backbone is not AMD compatible and does not return an object for using RequireJS.

 define(['backbone'], function (Backbone) { // No shim? Then Backbone here is undefined as it may // load out of order and you'll get an error when // trying to use Model return Backbone.Model.extend({}); }); 

To give a little context, I will use code that optimizes the r.js optimizer, but I will simplify it for this example. It helped me understand the essence of this by reading what the optimizer produces.

An agreed trunk would be something like this:

 // Create self invoked function with the global 'this' // passed in. Here it would be window define("backbone", (function (global) { // When user requires the 'backbone' module // as a dependency, simply return them window.Backbone // so that properites can be accessed return function () { return global.Backbone; }; }(this))); 

The point is to provide RequireJS with something to return to you when you ask for the module, and it will guarantee that it will be loaded first before doing this. In the case of the optimizer, he simply inserts the library into his hands.

Answer 2

If you are not using the “export” Backbone, you cannot get a link to the locale in the Backbone module (window.Backbone), which is defined in backbone.js.

 //without export Backbone shim : { 'bbn':{ //exports:'Backbone', deps:['underscore'] }, 'underscore': { exports: '_' } }; require(['bbn'], function(localBackbone) { //localBackbone undefined. console.log('localBackbone:,' localBackbone); }); 

RequireJs explains the following:

 //RequireJS will use the shim config to properly load 'backbone' and give a local //reference to this module. The global Backbone will still exist on //the page too. define(['backbone'], function (Backbone) { return Backbone.Model.extend({}); }); 

RequireJS will use shim configuration to get global backbone

 function getGlobal(value) { if (!value) { return value; } var g = global; each(value.split('.'), function (part) { g = g[part]; }); return g; } 

Answer 3

Also note that you can use the actual export of the plugin in "export". For example,

 requirejs.config({ shim: { 'jquery.colorize': { deps: ['jquery'], exports: 'jQuery.fn.colorize' }, 'jquery.scroll': { deps: ['jquery'], exports: 'jQuery.fn.scroll' }, 'backbone.layoutmanager': { deps: ['backbone'] exports: 'Backbone.LayoutManager' }, "jqueryui": { deps: ["jquery"], //This is because jQueryUI plugin exports many things, we would just //have reference to main jQuery object. RequireJS will make sure to //have loaded jqueryui script. exports: "jQuery" }, "jstree": { deps: ["jquery", "jqueryui", "jquery.hotkeys", "jquery.cookie"], exports: "jQuery.fn.jstree" }, "jquery.hotkeys": { deps: ["jquery"], exports: "jQuery" //This plugins don't export object in jQuery.fn }, "jquery.cookie": { deps: ["jquery"], exports: "jQuery" //This plugins don't export object in jQuery.fn } } }); 

More details: https://github.com/jrburke/requirejs/wiki/Upgrading-to-RequireJS-2.0#wiki-shim

Answer 4

The Shim export is designed to let requirejs know how to handle modules other than AMD. Without it, the dependencies in the definition block will still be loaded, and the module will start. It signals that it has stopped loading the resource and that the modules can start using it.

At least as I see it.