Cordova 2.4.0 or 2.5.0 or 2.6.0 and requirejs

Question

Cordova 2.4.0 and up supports AMD for loading into javascript. I am specifically looking to use Cordova 2.5.0 with the latest version of RequireJS, backbone, jquery, jquery mob

Answer 1

To use the lazy loading, one option is to use the domReady plugin from requireJS (cf. http://requirejs.org/docs/api.html#pageload).

Once requireJS has confirmed that the DOM was ready, you can then wait for the device to be ready using the regular deviceready listener.

require(['require/domReady','cordova/cordova-ios-2.5.0'], function (domReady) {
    domReady(function () {
    console.log("The DOM is ready - waiting for the device");
    document.addEventListener("deviceready", startWhenReady, false);
    }
 });

function startWhenReady()
{
  console.log("dom and device ready : we can start...");
  // your app
}

Worked for me!

Answer 2

I have had this same problem too. It appears to be an issue in how they are building the cordova.ios.js file they distribute with Cordova 2.4 / 2.5

As you found out, the cordova/channel and cordova/utils sections are not in the correct order within the cordova.ios.js file.

That why RequireJS tries to load the individual files since those modules hadn't occurred yet in the cordova.ios.js file yet.

Unfortunately when you put the channel.js and utils.js files in your project, you weren't actually solving the root cause of the issue.

Sure, that allowed it to build, but the ReferenceError: Can't find variable: exports error then occurs because RequireJS will put the contents of utils.js/channel.js above the rest of the cordova.ios.js contents - which is not good because they depend on the exports stuff being setup inside of cordova.ios.js.

Not to mention you now have two copies of the channel.js/utils.js code in your built file as well...

The solution is you must modify cordova.ios.js yourself. Move the cordova/channel and cordova/utils to the top of cordova.ios.js (but after the exports/requirejs stuff is defined)

You can get one that I prepared for myself here: https://gist.github.com/asgeo1/5361227

Also, another tip - in your main.js, don't refer to cordova.ios.js as 'cordova'. That will clash, because cordova.ios.js already uses this module name internally.

Use 'cordova.ios' instead:

require.config({
    paths: {
        'cordova.ios': 'libs/cordova/cordova.ios',
        ...