Cordova 2.4.0或2.5.0或2.6.0和requirejs [英] Cordova 2.4.0 or 2.5.0 or 2.6.0 and requirejs

问题描述

Cordova 2.4.0及更高版本支持AMD加载到JavaScript。我特别希望使用Cordova 2.5.0与最新版本的RequireJS，骨干，jquery，jquery手机。

我还没有看到任何教程或发布关于如何以便与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'，
下划线：'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'
}，
下划线：{
 exports：'_'
}，
'jquery .mobile'：{
 deps：['jquery'，'jquery.mobile-config'] 
} 
} 
}）; 
 
 
 require（['app']，function（App）{
 App.initialize（）; 
}）; 
  

app.js

  define（[
'cordova'，
'jquery'，
'underscore'，
'backbone'，
 $ b'router'
]，function（cordova，$，_，Backbone，Router）{
 var initialize = function（）{
 Router.initialize（）; 
} 
 return {
 initialize：initialize 
}; 
}）; 
  

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

img src =https://i.stack.imgur.com/oiEdq.pngalt =错误channel.js>

我不知道什么频道.js是，为什么它要求它，但我能够在github上找到它

此外，在main.js中的另一个提示，没有将cordova.ios.js称为cordova。这将会冲突，因为cordova.ios.js已经在内部使用此模块名称。

使用'cordova.ios'替代：

  require.config（{
 paths：{
'cordova.ios'：'libs / cordova / cordova.ios'，
 ... 
  

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 mobile.

I have yet to see any tutorial or posting about how to use the new version of Cordova properly with with requirejs. I do see tons of posts about how to incorporate Cordova and requirejs back when Cordova did not support AMD (2.3.0 and prior).

If anyone can post or point me to a simple example of this, it would be greatly appreciated.

Edit: Specifically I am targeting development for iOS.

Edit: I want to be more specific and include the exact problem I am running into.

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

To be clear, everything works fine before I optimize the require.js project. When I try to optimize the project with r.js (part of require.js), the optimizer throws an error which can be seen below.

I am not sure what channel.js is, and why it is asking for it, but I was able to find it on github here https://github.com/apache/cordova-js/tree/master/lib/common

Once I create the subdirectory it is looking for, I place the channel.js file into it. I no longer get that error, but now a different one, seen below.

I was also able to find that file on the cordova-js github site. Once I place that file into the subdirectory, I don't get any error messages and the project builds successfully.

Now when I try to run the application using the single optimized js file, I get this error in the javascript console, and just a blank white screen on the device.

"ReferenceError: Can't find variable: exports"

Here is my build.js file I am using to run the optimization

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

Edit 4/11/13: Answer Thanks to the help of SA user asgeo1, I got my problem solved. It turns out you cannot name the variable in main.js 'cordova' because it conflicts with an internal variable named 'cordova'.

The solution is below.

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

This solution works and was tested with Cordova 2.5.0 and 2.6.0

解决方案

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',
        ...

这篇关于Cordova 2.4.0或2.5.0或2.6.0和requirejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！