Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RequireJS order of dependencies

if you have a RequireJS module like so:

define(
    [
        '#patches',
        'backbone',
        'underscore',
        'react',
        '#allCollections',
        '#allModels',
        'app/js/routers/router',
        '#allTemplates',
        '#allControllers',
        '#allRelViews'
    ],

function(){

   var patches = arguments[0];

});

is there any way to know which dependency gets loaded first? In my case, '#patches' is a few window.X utility functions that I want to load before anything else. Do I need to configure this a different way to ensure this?

(in my case "#' is just my own notation to denote a module whose path is predefined in my main config file)

like image 480
Alexander Mills Avatar asked Aug 07 '15 01:08

Alexander Mills


People also ask

Is RequireJS obsolete?

RequireJS has been a hugely influential and important tool in the JavaScript world. It's still used in many solid, well-written projects today.

Is RequireJS synchronous?

So, RequireJS doesn't support it. From your use case it seems that you don't need synchronous RequireJS, you need to return result asynchronously. AMD pattern allows to define dependencies and load them asynchronously, but module's factory function must return result synchronously.

What is the difference between RequireJS CommonJS and AMD loaders?

AMD is more suited for the browser, because it supports asynchronous loading of module dependencies. RequireJS is an implementation of AMD, while at the same time trying to keep the spirit of CommonJS (mainly in the module identifiers).

What is Shim RequireJS?

shim: Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value. Here is an example. It requires RequireJS 2.1. 0+, and assumes backbone. js, underscore.


1 Answers

From the documentation : http://requirejs.org/docs/api.html#mechanics

"RequireJS waits for all dependencies to load, figures out the right order in which to call the functions that define the modules, then calls the module definition functions once the dependencies for those functions have been called. Note that the dependencies for a given module definition function could be called in any order, due to their sub-dependency relationships and network load order."

I think this may help: http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/ (see "Managing the Order of Dependent Files")

RequireJS uses Asynchronous Module Loading (AMD) for loading files. Each dependent module will start loading through asynchronous requests in the given order. Even though the file order is considered, we cannot guarantee that the first file is loaded before the second file due to the asynchronous nature. So, RequireJS allows us to use the shim config to define the sequence of files which need to be loaded in correct order. Let’s see how we can create configuration options in RequireJS.

requirejs.config({
  shim: {
    'source1': ['dependency1','dependency2'],
    'source2': ['source1']
  }
});

Hope it helps

EDIT: As said in comments, using Shim for AMD module is a bad idea, use only shim for non AMD modules and manage dependencies order there. For AMD module requirejs will manage the order of loading. A good link from the comments (thanks Daniel Tulp) ==> Requirejs why and when to use shim config

like image 200
François Richard Avatar answered Oct 18 '22 23:10

François Richard