Ios Cordova 2.4.0或2.5.0或2.6.0和requirejs

Cordova 2.4.0及以上版本支持AMD加载到javascript中。我特别希望将Cordova 2.5.0与最新版本的RequireJS、主干网、jquery、jquery mobile一起使用

我还没有看到任何关于如何在requirejs中正确使用新版本Cordova的教程或帖子。当Cordova不支持AMD（2.3.0及之前版本）时，我确实看到了大量关于如何合并Cordova和requirejs的帖子

如果有人能给我发一个简单的例子，我将不胜感激

编辑： 具体来说，我的目标是开发iOS

编辑： 我想更具体一点，包括我遇到的确切问题

main.js

require.config({
    paths: {
        cordova: 'libs/cordova/cordova.ios',//cordova-2.5.0',//2.5.0*/
        jquery: 'libs/jquery/jquery.min',//1.9.1
        text: 'libs/require/text',
        domReady: 'libs/require/domReady',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        'jquery.mobile-config': 'libs/jquery-mobile/jqm-config',
        'jquery.mobile': 'libs/jquery-mobile/jquery.mobile.min'
    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        'jquery.mobile': {
            deps: ['jquery', 'jquery.mobile-config']
        }
    }
});


require(['app'], function(App){
    App.initialize();
});

define([
    'cordova',
    'jquery',
    'underscore',
    'backbone',
    'router'
], function(cordova, $, _, Backbone, Router){
    var initialize = function(){
        Router.initialize();
    }
    return {
        initialize: initialize
    };
});

require.config({
    paths: {
        'cordova.ios': 'libs/cordova/cordova.ios',//cordova-2.5.0' THIS IS CHANGED
        jquery: 'libs/jquery/jquery.min',//1.9.1
        text: 'libs/require/text',
        domReady: 'libs/require/domReady',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        'jquery.mobile-config': 'libs/jquery-mobile/jqm-config',
        'jquery.mobile': 'libs/jquery-mobile/jquery.mobile.min'
    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        'jquery.mobile': {
            deps: ['jquery', 'jquery.mobile-config']
        }
    }
});


require(['app'], function(App){
    App.initialize();
});

define([
    'cordova.ios',//THIS IS CHANGED
    'jquery',
    'underscore',
    'backbone',
    'router'
], function(cordova, $, _, Backbone, Router){
    var initialize = function(){
        Router.initialize();
    }
    return {
        initialize: initialize
    };
});

app.js

require.config({
    paths: {
        cordova: 'libs/cordova/cordova.ios',//cordova-2.5.0',//2.5.0*/
        jquery: 'libs/jquery/jquery.min',//1.9.1
        text: 'libs/require/text',
        domReady: 'libs/require/domReady',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        'jquery.mobile-config': 'libs/jquery-mobile/jqm-config',
        'jquery.mobile': 'libs/jquery-mobile/jquery.mobile.min'
    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        'jquery.mobile': {
            deps: ['jquery', 'jquery.mobile-config']
        }
    }
});


require(['app'], function(App){
    App.initialize();
});

define([
    'cordova',
    'jquery',
    'underscore',
    'backbone',
    'router'
], function(cordova, $, _, Backbone, Router){
    var initialize = function(){
        Router.initialize();
    }
    return {
        initialize: initialize
    };
});

require.config({
    paths: {
        'cordova.ios': 'libs/cordova/cordova.ios',//cordova-2.5.0' THIS IS CHANGED
        jquery: 'libs/jquery/jquery.min',//1.9.1
        text: 'libs/require/text',
        domReady: 'libs/require/domReady',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        'jquery.mobile-config': 'libs/jquery-mobile/jqm-config',
        'jquery.mobile': 'libs/jquery-mobile/jquery.mobile.min'
    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        'jquery.mobile': {
            deps: ['jquery', 'jquery.mobile-config']
        }
    }
});


require(['app'], function(App){
    App.initialize();
});

define([
    'cordova.ios',//THIS IS CHANGED
    'jquery',
    'underscore',
    'backbone',
    'router'
], function(cordova, $, _, Backbone, Router){
    var initialize = function(){
        Router.initialize();
    }
    return {
        initialize: initialize
    };
});

明确地说，在我优化require.js项目之前，一切都正常。 当我尝试使用r.js（require.js的一部分）优化项目时，优化器抛出一个错误，如下所示

我不知道channel.js是什么，以及它为什么要求它，但我在github上找到了它

创建它要查找的子目录后，我将channel.js文件放入其中。我不再得到那个错误，但现在一个不同的错误，如下所示

我还能够在cordova js github网站上找到该文件。一旦我将该文件放入子目录，我就不会收到任何错误消息，并且项目构建成功

现在，当我尝试使用单个优化的js文件运行应用程序时，我在javascript控制台中得到了这个错误，在设备上只有一个空白的白色屏幕

“ReferenceError:找不到变量：导出”

这是我用来运行优化的build.js文件

({
    baseUrl: "../js",
    mainConfigFile: "../js/main.js",
    name: "../js/main",
    out: "../js/big.js",
    preserveLicenseComments: false,
    paths: {
        requireLib: "../js/libs/require/require"
    },
    include: "requireLib"
})

2013年11月4日编辑： 回答 多亏SA用户asgeo1的帮助，我的问题得以解决。事实证明，您无法在main.js中命名变量“cordova”，因为它与名为“cordova”的内部变量冲突

解决方案如下

main.js

require.config({
    paths: {
        cordova: 'libs/cordova/cordova.ios',//cordova-2.5.0',//2.5.0*/
        jquery: 'libs/jquery/jquery.min',//1.9.1
        text: 'libs/require/text',
        domReady: 'libs/require/domReady',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        'jquery.mobile-config': 'libs/jquery-mobile/jqm-config',
        'jquery.mobile': 'libs/jquery-mobile/jquery.mobile.min'
    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        'jquery.mobile': {
            deps: ['jquery', 'jquery.mobile-config']
        }
    }
});


require(['app'], function(App){
    App.initialize();
});

define([
    'cordova',
    'jquery',
    'underscore',
    'backbone',
    'router'
], function(cordova, $, _, Backbone, Router){
    var initialize = function(){
        Router.initialize();
    }
    return {
        initialize: initialize
    };
});

require.config({
    paths: {
        'cordova.ios': 'libs/cordova/cordova.ios',//cordova-2.5.0' THIS IS CHANGED
        jquery: 'libs/jquery/jquery.min',//1.9.1
        text: 'libs/require/text',
        domReady: 'libs/require/domReady',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        'jquery.mobile-config': 'libs/jquery-mobile/jqm-config',
        'jquery.mobile': 'libs/jquery-mobile/jquery.mobile.min'
    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        'jquery.mobile': {
            deps: ['jquery', 'jquery.mobile-config']
        }
    }
});


require(['app'], function(App){
    App.initialize();
});

define([
    'cordova.ios',//THIS IS CHANGED
    'jquery',
    'underscore',
    'backbone',
    'router'
], function(cordova, $, _, Backbone, Router){
    var initialize = function(){
        Router.initialize();
    }
    return {
        initialize: initialize
    };
});

app.js

require.config({
    paths: {
        cordova: 'libs/cordova/cordova.ios',//cordova-2.5.0',//2.5.0*/
        jquery: 'libs/jquery/jquery.min',//1.9.1
        text: 'libs/require/text',
        domReady: 'libs/require/domReady',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        'jquery.mobile-config': 'libs/jquery-mobile/jqm-config',
        'jquery.mobile': 'libs/jquery-mobile/jquery.mobile.min'
    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        'jquery.mobile': {
            deps: ['jquery', 'jquery.mobile-config']
        }
    }
});


require(['app'], function(App){
    App.initialize();
});

define([
    'cordova',
    'jquery',
    'underscore',
    'backbone',
    'router'
], function(cordova, $, _, Backbone, Router){
    var initialize = function(){
        Router.initialize();
    }
    return {
        initialize: initialize
    };
});

require.config({
    paths: {
        'cordova.ios': 'libs/cordova/cordova.ios',//cordova-2.5.0' THIS IS CHANGED
        jquery: 'libs/jquery/jquery.min',//1.9.1
        text: 'libs/require/text',
        domReady: 'libs/require/domReady',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        'jquery.mobile-config': 'libs/jquery-mobile/jqm-config',
        'jquery.mobile': 'libs/jquery-mobile/jquery.mobile.min'
    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        'jquery.mobile': {
            deps: ['jquery', 'jquery.mobile-config']
        }
    }
});


require(['app'], function(App){
    App.initialize();
});

define([
    'cordova.ios',//THIS IS CHANGED
    'jquery',
    'underscore',
    'backbone',
    'router'
], function(cordova, $, _, Backbone, Router){
    var initialize = function(){
        Router.initialize();
    }
    return {
        initialize: initialize
    };
});

---

该解决方案可以工作，并使用Cordova 2.5.0和2.6.0进行了测试。要使用延迟加载，一个选项是使用来自requireJS的domReady插件（参见）

一旦requireJS确认DOM已经就绪，您就可以使用常规deviceready侦听器等待设备就绪

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
}

---

为我工作

我也有同样的问题。这似乎是他们如何构建与cordova 2.4/2.5一起分发的cordova.ios.js文件的问题

正如您所发现的，cordova.ios.js文件中的

cordova/channel

和

cordova/utils

部分顺序不正确

这就是为什么RequireJS尝试加载单个文件，因为cordova.ios.js文件中还没有出现这些模块

不幸的是，当您将channel.js和utils.js文件放在项目中时，实际上并没有解决问题的根本原因

当然，这允许它构建，但是

ReferenceError:not find variable:exports

错误随后发生，因为RequireJS会将utils.js/channel.js的内容放在cordova.ios.js内容的其余部分之上-这不好，因为它们依赖于cordova.ios.js内部设置的导出内容

更不用说，您现在在构建的文件中也有两个channel.js/utils.js代码副本

解决方案是您必须自己修改cordova.ios.js。将cordova/channel和cordova/utils移到cordova.ios.js的顶部（但在定义了导出/requirejs内容之后）

你可以在这里买到我为自己准备的：

另外，还有一个技巧——在main.js中，不要将cordova.ios.js称为“cordova”。这会产生冲突，因为cordova.ios.js已经在内部使用了这个模块名

改用“cordova.ios”：

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

---

我曾经在requirejs中使用过cordova 2.2.0。我不知道它是否仍然适用于较新的版本，但它可能会帮助您：正如我在我的作品中提到的，cordova 2.4.0和更高版本现在能够使用requirejs延迟加载。这就是我想要做的。尽管如此，我还是尝试了你的方法，但没有成功。我主要是在用r.js优化代码时遇到问题。它抛出了几个错误，表示cordova所依赖的2.js文件丢失。我在github上找到了这两个文件，当我将它们放在结构中时，它会进行优化，但代码会抛出错误，应用程序不会在设备/sim上运行。在优化代码之前，我根本没有遇到任何错误。哇，我猜你帮我节省了数小时的搜索时间。同样的问题：-）欢迎光临！请投票表决我的问题，让其他人更容易找到这个解决方案！非常感谢您的回复。我明天试试这个。不过还是有个简单的问题。您是否能够使用您的方法优化（和缩小）您的项目？我只是在优化所有必需的js文件期间和之后才遇到问题。在优化代码之前，一切正常。（不过我尝试的方式与你的方式略有不同。）再次感谢你的回复。不客气。我在使用jquery-require.js和cordova-2.5.0.js的小型（w/YUICompressor）版本时没有遇到任何问题。我想你误解了我的评论。我在使用这些库的预构建缩小版本时也没有问题。当我使用require js的一部分r.js优化（合并和丑陋）我的整个项目时，我遇到了问题。在我运行优化之前，一切正常。在我运行优化之后，我开始遇到问题。今天早上我尝试了你的解决方案，但我仍然遇到以前遇到的问题。我更新了我的OP，更全面地描述了我面临的问题。非常感谢您的回复。我将在接下来的几个小时内尝试这个。非常感谢，我现在一切都正常了。我测试了