RequireJs asynchron loading, synchrones loading differences between requirejs and require

Question

Good evening,

im new with requireJs and hope my questions are not stupid, its my first :).

Why the guy is using in the code above require and requirejs, whats the difference?

    require(["config"], function(config){
        requirejs.config(config);
        require(["App", "ember"], function(App, Ember){
            var app_name = config.app_name || "App";
            root[app_name] = App = Ember.Application.create(App);
            App.deferUntilDOMReady();
        });
    });

Is there a differences beetween the different code spellings?
Will the script ressources are loaded asynchon or synchron in both cases?
If i use requirejs-jquery are jquery (the $) than global or only local scope (amd scope)?

    require(['script1','script2'], function() {}

    require(function(require) {
      require('script1');
      require('script2');
}

Is it possible to have several require configs? For example i have a bunch of nested structures like /modules/helper/example/js/example. At the moment i have all required shims,paths inside the main.js config. I want to place a main.js or config.js inside each helper module, which configer the required shims, pathes, etc.

Than i no longer need places all configs, pathes inside the main.

ddotsenko ddotsenko · Accepted Answer · 2013-02-15T18:31:52

1.1 RequireJS registers TWO instances of itself in global scope - require and requirejs - really just for one reason - if one (most likely require) is overriden with another require that is different in scope or implementation, you still have requirejs - usually always a global. This separation is important when you plan to consume resources that are relative to the module you are in now.

// contents of 'a/b/c.js' module file
define(['require'], function(require){

    // "local scope" require call
    // resolves to 'a/b/d.js' file
    require(['./d'], function(d){})

    // "global scope" require call
    // resolves to 'd.js' file
    requirejs(['./d'], function(d){})
})

Note that asking for local require only makes sense in define calls. As define call is what establishes the "module" and it's ID. The above is equivalent to this named define:

// contents of whatever file
define('a/b/c', ['require'], function(require){

    // "local scope" require call
    // resolves to 'a/b/d.js' file
    require(['./d'], function(d){})

    // "global scope" require call
    // resolves to 'd.js' file
    requirejs(['./d'], function(d){})
})

The other, secret, reason why James put requirejs in there is to force you to keep using require in local scope because his build tool looks for that specific string require to find the require calls. You do this, and r.js suddenly cannot follow you dependency tree because myLocalRequire is not what r.js expects:

// contents of 'a/b/c.js' module file
define(['require'], function(myLocalRequire){

    // "local scope" require call
    // resolves to 'a/b/d.js' file
    myLocalRequire(['./d'], function(d){})

    // "global scope" require call
    // resolves to 'd.js' file
    require(['./d'], function(d){})
})

1.2 RequireJS does NOT do sync loading at all. The only place where you think that "it must be sync!" - the CommonJS style call like var a = require('a') it's still not. It yanks the resource out of cache. In other words, it never loads anything sync.

1.3 Don't use bundled RequireJS+jQuery. It makes an already huge jQuery more huge and interferes with browser cache. (Instead of using cached jQuery from CDN you force user to download same jQuery again - 100k of trash).

See this instead: Use jQuery as a dependency without loading jQuery with RequireJS?

2.0 Don't. separate configs is a trap. It's hell that you willingly enter once you start "building" your apps. I dare you to give me one example of a separate sane config that I cannot express as either named defines group or "packages" where main module loads relative resource.

The only thing that must be in your RequireJS config is 'baseUrl' and 2-5 globally-used 'paths' definitions. That's it.

RequireJs asynchron loading, synchrones loading differences between requirejs and require

1 Answers