Dynamic requirejs configuration extending

Question

I'm using requirejs for multipage project. Each page is an App. All of the apps have some common dependencies, i.e. jquery, backbone, underscore etc.

I want to move all this dependencies to the one single file.

That's how the js folder structure looks like:

js
- base-app-require-configuration.coffee
- app
  - homepeage
    - init.coffee
    - build.js
    - application.coffee
  - app1
    - init.coffee
    - build.js
    - application.coffee
  - app2
    - init.coffee
    - build.js
    - application.coffee

Homepage application example:

js/base-app-require-configuration.coffee

define ->
  requirejs.config
    urlArgs: "bust=#{ new Date().getTime() }"

    # yep, tricky paths here
    paths: 
      jquery: '../../jquery.min' 
      underscore: '../../underscore-min'
      backbone: '../../backbone.min'

js/app/homepage/init.coffee

define [
  '../../base-app-require-configuration'
], (
  baseRequireConfig
) ->
  requirejs.config
    paths:
      'jquery.alphanum': '../../jquery.alphanum'
    shim:
      'jquery.alphanum':
        deps: ['jquery']

  require [
    'jquery'
    'application'
  ], (
    $
    Application
  ) ->
    $ -> new Application

js/app/homepage/build.js

({
mainConfigFile: ['../../base-app-require-configuration.js', 'init.js'],
wrapShim: 'true',
baseUrl: './',
name: 'init',
findNestedDependencies: true,
out: 'init.js'
})

My data-name is init.js

The thing works pretty well for multiple apps with the common dependencies moved to one sigle file - base-app-require-configuration.coffee, except one thing: the only way to compress/optimize this using r.js is to set the flag findNestedDependencies to true, because otherwise r.js won't see requirejs.config calls nested into define/require.

My questions are:

Is using findNestedDependencies a good practice?
Is there a prettier way to organize my dependencies without repeating?
If there is such a way - will it be compatible with r.js?

Danwin Danwin · Accepted Answer · 2015-11-12T10:15:54

Let me share this solution with you.

I'm also looking for the similar solution with requirejs (how to organize the multipage project without repetitions of a long configuration, with a "shim" feature), and I have found the following one (I would be glad if this snippet can help you):

Inside 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 requirejs calls here instead of
    //a separate file so after a build there are only 2 HTTP
    //requests instead of three.
    requirejs(['./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'
        requirejs(['app/main1']);
    });
</script>

...

where "common.js" contains the common configuration of requirejs for your project. This sample is from: https://github.com/requirejs/example-multipage-shim/blob/master/www/page1.html.

The full code of a sample project is here: https://github.com/requirejs/example-multipage-shim. The sample "build.js" file also providen, I see there is no necessity in "findNestedDependencies" in this case.

Sure, there is a bit more code inside HTML, but I think this is not significant downside.

Dynamic requirejs configuration extending

2 Answers