Alex Rivera | Logout

understanding requirejs paths

Asked 2012-06-05T09:47:41.703
15

Using requirejs my main.js looks like this

requirejs.config({
    baseUrl: '/javascript/',
    paths: {
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
        async: 'requirePlugins/async',
            hbs: 'hbs'
    },
    waitSeconds: 7
});
define(['common'], function () {
    loadFonts();
});

The main.js is included in the page with a script call

<script data-main="/javascript/main.js" src="/javascript/require-2.0.1.js"></script>

Common is the basic function for the website, jquery doc ready function etc. wrapped in a define call:

define(['jquery'], function() {
    //jQuery dependant common code
});

This works fine, jQuery is loaded from the google CDN and the code is executed. But when i add a require call after the load of main.js

<script data-main="/javascript/main.js" src="/javascript/require-2.0.1.js"></script>
require(['jquery'], function ($) {
    //code
});

jquery is requested from /javascript/jquery.js instead of the defined path to the google cdn. I'm still a rookie at requirejs but it would seem to me that the path should be defined before any of the other requests are fired, can somebody please help me understand what I'm doing wrong?

Edit
Report

1 Answer

7

I think this could be due to using the data-main attribute on the RequireJS script tag; for that to be parsed, RequireJS itself has to load and parse. In my testing (specifically for IE9), the browser would download and execute any script tags directly following the RequireJS script tag before parsing the RequireJS config file (the one specified by the data-main attribute).

To get around this, I simply quit using the data-main attribute and instead placed the config file as a normal script tag directly after the RequireJS script tag, and everything seems to be happy now.

Specifically, this is what it looks like (using your sample):

<script src="/javascript/require-2.0.1.js"></script>
<script src="/javascript/main.js"></script>
answered 2012-10-15T20:56:20.803

Your Answer