Callback before RequireJS "define" function is called?

Question

I'm new to Backbone, and i'm helping to maintain an app that has lots of Backbone and RequireJS code that does something like so:

define(

    ['backbone', 'underscore'],

    function(Backbone, _) {
      // some code here
    }
);

I'd like to configure Underscore in each of these pages... In the most simple sense, I could just do something like so:

define(

    ['backbone', 'underscore'],

    function(Backbone, _) {

      // do some stuff to configure underscore
      configureUnderscore(_);

    }
);

but I'd like to leave each page's define function alone, and just inject a callback that's called before the define callback is called.

How can this be done with Backbone or RequireJS?

score 1 · Answer 1 · answered Mar 05 '14 at 14:58

1

The simplest would probably to define a requireJS module named (e.g.) rawUnderscore which returns Undercore without any configuration.

Then, create a new module named underscorewhich requires rawUnderscore and configures it before returning its value.

answered Mar 05 '14 at 14:58

David Sulc

25,946
3
52
54

Hmmm... This sounds really close. After thinking about it a bit more I think my "configure underscore" example was a bit too simple. I'd like to be able to configure all the loaded modules in one place. So if I had 10 modules that were loaded, then I'd like to go and configure them all at once. I know I could do this if I added my 'configureModules' module to the end of the require list, but I'd prefer not to have to do that. I'll edit the question and add this as a note. – Brad Parks Mar 05 '14 at 15:44
For my purposes, this is close enough! Thanks for the answer. I've added some detail on how I actually got it to work to the question above, but since this is what got me moving in the right direction, this is marked as the answer... Thanks! – Brad Parks Mar 06 '14 at 16:17
A way to do this as described can be found at [this StackOverflow answer](http://stackoverflow.com/a/22395869/26510) – Brad Parks Mar 14 '14 at 12:48

score 1 · Accepted Answer · edited May 23 '17 at 12:13

Here's how to make this work as suggested in another answer on this page, and copied from this StackOverflow answer to a similar question:

main.js

requirejs.config({
    paths: {
        'underscore': 'underscoreConfig',
        'originalUnderscore': 'underscore'
    },
    shim: {
        'originalUnderscore': {
            exports: '_'
        }
    }
});

underscoreConfig.js

define(['originalUnderscore'], function(_) {
    _.templateSettings =
    {
        evaluate    : /<%([\s\S]+?)%>/g,
        interpolate : /<%cleanHtml([\s\S]+?)%>/g,
        escape      : /<%[=-]([\s\S]+?)%>/g
    };
    return _;
});

Brad Parks · Answer 3 · 2014-03-18T13:01:29.860

Another approach (completely untested) may be to define a "require" variable before require.js is included, as detailed here in the Require.JS docs, and here as well

<script>
    var require = {
        deps: ["some/module1", "my/module2", "a.js", "b.js"],
        callback: function(module1, module2) {
            //This function will be called when all the dependencies
            //listed above in deps are loaded. Note that this
            //function could be called before the page is loaded.
            //This callback is optional.
        }
    };
</script>
<script src="scripts/require.js"></script>

Callback before RequireJS "define" function is called?

3 Answers3

main.js

underscoreConfig.js

Linked