RequireJS and general configuration

Question

Is it possible to have requirejs configuration in one place and reuse it in modules?

such as

main.js:

requirejs.config({ baseUrl: "static/js", paths: { "jquery": "http://code.jquery.com/jquery-1.9.1.js", "jquery-ui": "http://code.jquery.com/ui/1.10.2/jquery-ui.js" }, shim: { "jquery-ui": { deps: ["jquery"] } } }); 

and

public.js:

 define(["main", "jquery", function(main, $) { // do some public stuff }); 

client.js:

 define(["main", "jquery", function(main, $) { // do some client stuff }); 

And on my public part of the network there is

 <script type="..." src="js/require.js" data-main="js/public.js"></script> 

And on the client side of the website

 <script type="..." src="js/require.js" data-main="js/client.js"></script> 

And also I would like to have a module for each page. So, for example, to have an index module for the public

 <script ...> require('public/index'); </script> 

and

public / index.js:

 define(["jquery", "slideshow"], function($, s) { $( function() { s.init() } ); }); 

Is this possible with RequireJS?

Thanks for answers.

Answer 1

I edit my answer when you make the question clearer.

On any page you include require.js , you must also include main.js to define the RequireJS configuration.

You cannot do things like

 define(["main", "jquery", function(main, $) { // do some public stuff }); 

because ReuiqreJS loads dependencies asynchronously. Although "main" is placed before "jquery", it does not guarantee that RequireJS will load them in this sequence.

So your public / index.html might look like:

 <script type="..." src="js/require.js"></script> <script type="..." src="js/main.js"></script> <script ...> require('public/index'); </script> 

Answer 2

data-main is a useful shortcut in a very simple case, but I do not think it is more useful, in addition, the solution is to completely reset it.

Download your basic information on each page, then use the callback to load scripts specific to your view.

So, you have in public.html:

 <script src="/Scripts/require.js"></script> <script> require('main', function(){ require('public'); }) </script> 

and in client.html:

 <script src="/Scripts/require.js"></script> <script> require('main', function(){ require('client'); }) </script> 

I wrote a blog post explaining this idea here.