understanding requirejs paths

Question

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?

Answer 1

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>

Answer 2

Maybe you put the config statement before require js being loaded.

You should load require.js first, put your config code after, then call require(['jquery'], ...);

The reason it searches /javascript/ is because your require.js file is located there and it is the default base url.

Your config may never be used by require.js.

See this tutorial about require config.

Answer 3

You have to rename define to require

require(['common'], function () {
    loadFonts();
});

Answer 4

I'd recommend using map instead of paths to configure specific module locations.

paths is intended more for shortcuts/prefixs to simplify/configure includes, rather than full module paths.

Bear in mind: you'll need to place mappings you want to apply globally under an asterisk (*) key in the map object.

Answer 5

The reason is you put require(['jquery']... immediately after loading require.js module. As the result, it tries to load ['jquery'] before reading your config settings.

And why it tries to find jquery in /javascript/jquery.js? that is because of your data-main attribute.

RequireJS loads all code relative to a baseUrl. The baseUrl is normally set to the same directory as the script used in a data-main attribute for the top level script to load for a page.

This link clarifies require.js module loading procedure: http://requirejs.org/docs/api.html#jsfiles

Answer 6

i think you can embed the full url in the require block. like:

require(['http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'], function ($) {
   //code
});

btw, your jquery link is invalid.