CODEWITHSUNDEEP
javascriptrequirejsconfig
Douglish
Douglish

Reputation: 293

RequireJS and common config

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.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 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.

Upvotes: 4

Views: 2780

Answers (2)

George Mauer
George Mauer

Reputation: 122042

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.

Upvotes: 8

Jia
Jia

Reputation: 395

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>

Upvotes: 0

Related Questions