Question

In the RequireJS example, it shows that you can reference a app.js (or whatever you want to call the starter file) from the script tag like so:

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

For reasons beyond my control, I can’t do this. There are several dynamic variables generated in the template layer that need to be preserved. So, I created an inline ‘config’ module that other modules can read.

<script type="text/javascript">
        define('config', function() { 
            return {
                markup_id: {
                    "content": "search",
                    "page": "index",
                    "media": "mobile"
                },
                page_context: {
                    "siteconfig": {
                        "mobile_video_player_id": /* */,
                        "mobile_video_player_key": /* */,
                        "mobile_ad_site": /* */,
                        "omniture_mobile_env": /* */,
                        "searchserver": /* */,              
                    },
                    "omniture": {
                        "gn": /* */,

                    }
                }
            }
        });
    </script>       

What I have done is for each template, I placed an inline require.config. As an example (specific path information removed):

<script type="text/javascript">
/* This code is on a template page inside a script tag. */
require.config({
            baseUrl: /* */,
            paths: {
                'jquery': /* */,
                'jquery-mobilead': /* */,
                'jquery-photogalleryswipe': /* */
            },
            /* Enforce ordering of jQuery plugins - which require jquery */
            shim: {
                'jquery-mobilead': {
                    deps: ['jquery'],
                    exports: 'jQuery.fn.mobileAd'
                },
                'jquery-photogalleryswipe': {
                    deps: ['jquery'],
                    exports: 'jQuery.fn.photoGallerySwipe'
                },
                'gallery': {
                    deps: ['jquery-photogalleryswipe', 'jquery-mobilead']
                }
            },
            urlArgs: 'buildlife=@buildlife@'
        });

        require( ['jquery', 'site', 'gallery', 'jquery-photogalleryswipe', 'jquery-mobilead'], function($, site, gallery) {
                //This function will be called when all the dependencies
                //listed above are loaded. Note that this function could
                //be called before the page is loaded.
                //This callback is optional.

                /* Initialize code */
                $(document).ready(function() {
                    /* sitewide code - call the constructor to initialize */
                    site.init();
                    /* homepage contains a reference to a function - execute the function */
                    gallery.initGallery();
                });
            }
        );
</script>

I presume the Optimizer has no way of optimizing code inside a template.

However I do have module JS files in accordance to the RequireJS API documentation.
/modules/gallery.js
/modules/channel.js
/modules/site.js
/* etc. */

These modules do have dependencies to other modules, but these modules are dependent on the ‘config’ module, which is defined inline with the template. If I ran the Optimizer against these files, will the optimizer work properly, since one of the modules, config, in is the template?

Answer 1

I think I solved my own problem based on reading
How to load bootstrapped models in Backbone.js while using AMD (require.js)

I’ve restructured the template variables into a require global object and declared it before require.js. Now, the template can still generate those values, but since the require.config and require code can be put into an external JS file, the optimizer should be able to see those files now. I haven’t tried running the optimizer yet.

<script>
        /* This script block is in the template */
        var require = {
            config: {
                markup_id: {
                "content": "search",
                "page": "index",
                "media": "mobile"
                },
                page_context: {
                   "siteconfig": {
                    "mobile_video_player_id": /* */,
                    "mobile_video_player_key": /* */,
                    "mobile_ad_site": /* */,
                    "omniture_mobile_env": /* */,
                    "searchserver": /* */,              
                  },
                "omniture": {
                    "gn": /* */,

                }
            }
        };
    </script>
 <script data-main="/m/j/main-search" src="/m/j/require.js"></script>