load javascript file before onload with requirejs

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?) ?

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.

来源：https://stackoverflow.com/questions/21188571/load-javascript-file-before-onload-with-requirejs

标签

javascript

requirejs