Bootstrapping RequireJS app with jQuery as a module without data-main attribute

Question

In the app working with, I don't have a way of specyfing attributes on the tag for requirejs. I can specify the script tag in the form of

<script type="text/javascript" src="scripts/require.js"></script>

I can append another tag before or after this one and include code to bootstrap my app (main module). I am using jQuery 1.7.1 and would like to load it as dependency in other modules. I also want to do that without the requirejs-jquery bundle, so jQuery seperate of requirejs. I am looking for the right way to do that. I am fairly new to requirejs so an explanation of how the modules are loaded and a code sample would be great. Thanks!

have you read the jquery tutorial on require.js's documentation? It's very helpful - requirejs.org/docs/jquery.html — Will Stern
– Will Stern, Commented Feb 17, 2012 at 16:00
I have. The examples there do use the data-main attribute and that is where I am getting a little lost. I am hoping that someone has figured out THE right way to do this 'alternative configuration' and is willing to share here. — tstojecki
– tstojecki, Commented Feb 17, 2012 at 16:15

Andreas · Accepted Answer · 2012-02-17 16:32:31Z

3

include another javascript file after requirejs.

<script type="text/javascript" src="scripts/require.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>

In this file you have to configure requirejs so it finds jquery.

main.js

require.config({
    paths: {
        "jquery": "js/jquery-1.7.1.min"//edit this path so it suits your needs.
  } 
});

From now on you'll be able to load jquery into your Modules by

require(['jquery'], function ($) {
    $('#foo').show();
});

answered Feb 17, 2012 at 16:32

Andreas

1,62214 silver badges13 bronze badges

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

5 Comments

tstojecki Over a year ago

Could you explain where that last require belongs? Is that in main.js or another module? If latter, how do you tell it to load that in main.js?

Andreas Over a year ago

After requirejs is loaded, you can use require() wherever you want to. This can be the main.js or any other js you load.

tstojecki Over a year ago

Thanks! I ended up renaming main.js to requirejs-config.js with require(["main"]) call at the end. That way requirejs-config.js configures the paths and tells requirejs which file to load first. The main file then has no bootstrapping/configuration logic.

Linus Norton Over a year ago

This does open up the possibility of errors - main.js depends on require.js and occasionally you may find that main.js is loaded before require.js which results in a define is not defined error.

Andreas Over a year ago

Loading scripts is synchronous. If you don't add a async attribute to the script element loading requirejs, it will be there.

Collectives™ on Stack Overflow

Bootstrapping RequireJS app with jQuery as a module without data-main attribute

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related