load javascript file before onload with requirejs

Question

I would like to use requireJS. However, I have a lib that needs to be loaded before the DOM. However, this is not what happens with requireJS

<html>
    <head>
        <script data-main="/app" src="/require.js"></script>
    </head>

    <body>
        <bar-foo/>
    </body>
</html>

With app.js

require.config({
    paths: {
        'customElement': '/customElement',
        'barfoo': '/barfoo'
    },
    shim: {
        barfoo: {
            deps: [ 'customElement' ]
        }
    }
});
define(['barfoo'], function() {
    ....
}

For example, if I simply load this script directly in the head (without requireJS) it works fine. Is there a require-config-option so I can load a specific file immediately (synchronously?) ?

If you need to load it synchronously, just don't use require.js. Why would you want to use it if you don't want async loading? — Pointy
– Pointy, Commented Jan 17, 2014 at 14:44
You could as well ask: why use requirejs at all (using, for example the 'defer' attribute instead). Anyway, I've updated the example and added a dependency. In this case I think it makes more sense to use requirejs — Jeanluca Scaljeri
– Jeanluca Scaljeri, Commented Jan 17, 2014 at 15:30
Well OK, but I'm pretty sure the answer is "no". You can declare dependencies, so maybe that'd help. I'm not a requirejs expert so hopefully somebody else knows a trick. — Pointy
– Pointy, Commented Jan 17, 2014 at 15:41

Alex Shilman · Accepted Answer · 2014-01-17 15:53:06Z

1

Requirejs is known for it's asynchronous power. However when you need some sort of an order in which you want files to be loaded due to dependencies, in require.config there is a shim config:

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.

So let's say you have a backbone app that depends on Underscore and jQuery, and you want them to load in that order then your would:

require.config({
paths: {
    'Backbone': '/Backbone',
    'Underscore': '/Underscore',
    'jQuery': '/jQuery'
},
shim: {
    'Backbone': [ 'Underscore', 'jQuery' ]
}
});

require(['Backbone'], function(Backbone){
  //.....
});

So, RequireJS allows us to use the shim config to define the sequence of files which need to be loaded in correct order.

edited Jan 17, 2014 at 15:53

answered Jan 17, 2014 at 15:44

Alex Shilman

1,5471 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jeanluca Scaljeri Over a year ago

true (I've update my example because it was incorrect). The problem with this is that, still, nothing is forced to be loaded synchronous (before the DOM)

Alex Shilman Over a year ago

You can just hardcode the script src into the dom or take a look at this: github.com/scriptfoundry/require-synchronous/blob/master/…

Jeanluca Scaljeri Over a year ago

the project you mention doesn't seem to be very up2date

Collectives™ on Stack Overflow

load javascript file before onload with requirejs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related