Question

I develop an iPad/iPhone App web app. Both share some of the resources. Now I wanna build a bootstrap js that looks like this:

requirejs(['app'], function(app) {
 app.start();
});

The app resource should be ipadApp.js or iphoneApp.js. So I create the following build file for the optimizer:

{
  "appDir": "../develop",
  "baseUrl": "./javascripts",
  "dir": "../public",
  "modules": [
    {
      "name": "bootstrap",
      "out": "bootstrap-ipad.js",
      "override": {
        "paths": {
          "app": "ipadApp"
        }
      }
    },
    {
      "name": "bootstrap",
      "out": "bootstrap-iphone.js",
      "override": {
        "paths": {
          "app": "iphoneApp"
        }
      }
    }
  ]
}

But this doesn’t seems to work. It works with just one module but not with the same module with different outputs.

The only other solution that came in my mind was 4 build files which seems a bit odd. So is there a solution where i only need one build file?

Answer 1

AFAIK the r.js optimizer can only output a module with a given name once – in your case you are attempting to generate the module named bootstrap twice. The author of require.js, @jrburke made the following comment on a related issue here:

…right now you would need to generate a separate build command for each script being targeted, since the name property would always be “almond.js” for each one.

He also suggests:

…if you wanted just one build file to run, you could create a node program and drive the optimizer multiple times in one script file. This example shows using requirejs as a module and calling requirejs.optimize().

I took a similar approach in one of my projects – I made my build.js file an ERB template and created a Thor task that ran through my modules and ran r.js once for each one. But @jrburke’s solution using node.js is cleaner.