Cordova 2.4.0または2.5.0または2.6.0およびrequirejs

Question

Cordova 2.4.0以降では、AMDがjavascriptにロードするためのAMDをサポートしています。私は特に、RequireJS、バックボーン、jquery、jquery mobileの最新バージョンでCordova 2.5.0を使用することを検討しています。

私はまだ、requirejsでCordovaの新しいバージョンを正しく使用する方法に関するチュートリアルや投稿を見ていません。私はCordovaを組み込む方法と、CordovaがAMD（2.3.0以前）をサポートしていなかったときに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 
    }; 
}); 

をapp.js私はrequire.jsプロジェクトを最適化する前に、すべてが正常に動作します。 r.js（require.jsの一部）を使用してプロジェクトを最適化しようとすると、オプティマイザは以下のエラーをスローします。

私がされてchannel.jsかわからないですし、なぜそれがそれを求めているが、私はそれがあるサブディレクトリを作成したら、私はここに https://github.com/apache/cordova-js/tree/master/lib/common

githubの上でそれを見つけることができました探して、私はそれにchannel.jsファイルを配置します。私はもはやそのエラーを得ることはできませんが、今は別のものです。

私はまた、コルドバ-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" 
}) 

編集4/11/13を実行するために使用していますファイルです。 Answer SAユーザasgeo1のおかげで、私は私の問題を解決しました。 main.js 'cordova'の変数名は、 'cordova'という内部変数と衝突するため、名前を付けることはできません。

解決策は次のとおりです。

メイン。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 
    }; 
}); 

このソリューションは、動作し、遅延ロードを使用するにはコルドバ2.5.0および2.6.0で

Answer 1

私も同じ問題がありました。それはあなたが見つけたとおり、彼らはコルドバ2.4/2.5

と、彼らが配布cordova.ios.jsファイルを構築する方法に問題があるように思われる、cordova/channelとcordova/utilsのセクションでは、cordova.ios内の正しい順序ではありません.jsファイル。

RequireJSはまだ個々のファイルがcordova.ios.jsファイルでまだ発生していないため、ロードしようとします。

残念ながら、あなたのプロジェクトにchannel.jsファイルとutils.jsファイルを置くと、実際に問題の根本的な原因は解決されませんでした。

確かに、ビルドが可能でしたが、RequireJSがcordova.ios.jsの内容の残りの部分にutils.js/channel.jsの内容を入れるため、ReferenceError: Can't find variable: exportsエラーが発生します。 cordova.ios.js内で設定されているエクスポートのものに依存します。あなたは今だけでなく、あなたの建てファイル内channel.js/utils.jsコードののコピーを持って言及しないように

...

ソリューションは、あなた自身cordova.ios.js変更する必要があります。あなたが、私はここで自分のために調製したものを得ることができます

をcordova.ios.jsの先頭にコルドバ/チャネルとコルドバ/ utilsパッケージを移動します（ただし、輸出/ requirejsものが定義された後）：https://gist.github.com/asgeo1/5361227

ももう1つのヒント - あなたのmain.jsで、cordova.ios.jsを 'cordova'と呼ぶことはありません。 cordova.ios.jsはすでに内部的にこのモジュール名を使用しているため、衝突します。代わりに

使用 'cordova.ios'：

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

Answer 2

を試験した、一つの選択肢であるにrequireJSのdomReadyプラグインを使用してください（cf. http://requirejs.org/docs/api.html#pageload参照）。

DOMが準備完了であることをrequireJSが確認したら、通常のデバイスリスナを使用してデバイスを準備するのを待つことができます。

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 
} 

私のために働きました！