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

such as

main.js:

requirejs.config({
    baseUrl: "static/js", 
    paths: {
         "jquery": ".9.1.js",    
     "jquery-ui": ".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 web have

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

And on client part of web

<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 a index module on public

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

and

public/index.js:

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

Is that possible with RequireJS?

Thank you for answers.

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

such as

main.js:

requirejs.config({
    baseUrl: "static/js", 
    paths: {
         "jquery": "http://code.jquery./jquery-1.9.1.js",    
     "jquery-ui": "http://code.jquery./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 web have

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

And on client part of web

<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 a index module on public

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

and

public/index.js:

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

Is that possible with RequireJS?

Thank you for answers.

• javascript
• requirejs
• config

• You forgot the closing brackets in your public.js and client.js code. – ryechus Commented Nov 22, 2015 at 19:25

2 Answers 2

data-main is a useful shortcut in the very simple case but I don't find it terribly useful beyond that, the solution is to dump it entirely.

Load your main explicitly on each page, then use the callback to load your view-specific scripts.

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've written a blog post expounding on this idea here.

I edit my answer as you make the question clearer.

In any page you include require.js, you should also include main.js to define your RequireJS config.

You can't do things like

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

because ReuiqreJS load dependencies asynchronously. Although "main" is placed before "jquery", it's not guaranteed RequireJS will load them in that sequence.

So your public/index.html can be like:

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