Question

I am interested in creating a single configuration object for all the JavaScript code on my Web site. I found https://github.com/requirejs/example-multipage-shim which is an example of this setup.

From https://github.com/requirejs/example-multipage-shim (emphasis
mine): Since the shim config requires dependencies to be in the page,
instead of using data-main=”js/page1″ for page1.html, this example
inlines the require calls in the HTML page. If data-main was used
instead, then ‘js/page1’ could not have any dependencies inlined,
and instead still rely on the ‘common’ and ‘app/main1’ build layers to
hold the modules, due to the restrictions shim config places on the
build.

I do not understand the bolded sentence. Does it mean that “js/page1” if it existed could not declare dependencies? What does it mean to have a dependency inlined? Inlined into what? The HTML file or the JavaScript file?

I read the API doc about shim config, but the limitations that it puts on the optimizer is not clear.

From https://github.com/requirejs/example-multipage-shim/blob/master/www/page1.html:

    <script src="js/lib/require.js"></script>
    <script>
        //Load common code that includes config, then load the app
        //logic for this page. Do the require calls here instead of
        //a separate file so after a build there are only 2 HTTP
        //requests instead of three.
        require(['./js/common'], function (common) {
            //js/common sets the baseUrl to be js/ so
            //can just ask for 'app/main1' here instead
            //of 'js/app/main1'
            require(['app/main1']);
        });
    </script> 

Why is the following wrong? Why does “app/main1” have to be in a separate module from the bootstrap (data-main) code?

    <script src="js/lib/require.js"></script>
    <script>
        require(['js/common'], function (common) {
            var underscore = require('underscore');
            // ...
        });
    </script> 

Answer 1

It is a good practice to define (with define) each module in a separate javascript file. Otherwise it doesn’t make sense to load the several modules asynchronuously, because the are in the same physical location. In most cases, you’ll only need to use function define. Only in your bootstrapping module, you’ll need to use function require.

When I’m using require.js, I have 1 module (bootstrap.js), which contains my require.config object and the initial bootstrapping. In the html page you only need to include 1 script: require.js with bootstrap as data-main attribute value:

HTML:

<script src="js/lib/require.js" data-main="bootstrap"></script>

bootstrap:

require.config = {
   baseUrl: 'js',
   paths: {
     ...
   },
   shim: {
   }
   ...
};

// initial bootstrap
require(['jquery', 'angular', 'app'], function($, angular) {
   // do bootstrap
});

Modules:

define(['jquery'], function($) {
   // do sth with app
});

Edit: misunderstood the question a bit.

The reason that you cannot use inline dependencies in the html page when using the data-main attribute is that it like likely fail to load them. Which code block will be executed first? The data-main bootstrapping js or the inline code? If your bootstrapping js file will load first and set the baseUrl to 'js', the inline code should use require('common') instead of require('js/common'). But if the inline code loads first, it has to be require('js/common').

The reason why require('app/main1') is inside the other require block is the same: module ‘common’ will change the baseUrl to 'js'. Also ‘app/main’ probably needs some of the shim config from ‘common’. This is the only way to make sure the common module (with the shim config) is loaded first.