Question

Cordova 2.4.0及更高版本支持AMD加载到javascript中。我特别希望将Cordova 2.5.0与最新版本的RequireJS，backbone，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();
});

app.js

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

要清楚，在优化require.js项目之前，一切正常。当我尝试使用r.js（require.js的一部分）优化项目时，优化器会抛出一个错误，可以在下面看到。

Error channel.js

我不确定channel.js是什么，为什么要求它，但我能在github上找到它 https://github.com/apache/cordova-js/tree/master/lib/common

一旦我创建了它正在查找的子目录，我将channel.js文件放入其中。我不再得到那个错误，但现在是另一个错误，见下文。

enter image description here

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

现在，当我尝试使用单个优化的js文件运行应用程序时，我在javascript控制台中收到此错误，并且只是设备上的空白屏幕。

“ReferenceError：找不到变量：exports”

这是我用来运行优化的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"
})

编辑4/11/13： 的应答感谢SA用户asgeo1的帮助，我解决了问题。事实证明你不能在main.js'cordova'中命名变量，因为它与名为'cordova'的内部变量冲突。

解决方案如下。

main.js

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();
});

app.js

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进行了测试

Answer 1

我也遇到过同样的问题。他们如何构建他们使用Cordova 2.4 / 2.5分发的cordova.ios.js文件似乎是一个问题

正如您所发现的那样，cordova/channel和cordova/utils部分在cordova.ios.js文件中的顺序不正确。

这就是为什么RequireJS尝试加载单个文件，因为尚未在cordova.ios.js文件中发生这些模块。

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

当然，这允许它构建，但是ReferenceError: Can't 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的顶部（但是在定义了exports / requirejs之后）

你可以在这里找到我为自己准备的：https://gist.github.com/asgeo1/5361227

另外，另一个提示 - 在你的main.js中，不要将cordova.ios.js称为'cordova'。这将发生冲突，因为cordova.ios.js已在内部使用此模块名称。

请改用'cordova.ios'：

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

Answer 2

要使用延迟加载，一个选项是使用requireJS中的domReady插件（参见http://requirejs.org/docs/api.html#pageload）。

一旦requireJS确认DOM已准备就绪，您就可以使用常规设备监听器等待设备准备就绪。

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.0或2.5.0或2.6.0和requirejs

2 个答案: