Cordova 2.4.0 lub 2.5.0 lub 2.6.0 i requirejs

Question

Cordova 2.4.0 i nowsze obsługuje AMD do ładowania do javascript. Szczególnie chcę używać Cordova 2.5.0 z najnowszą wersją RequireJS, szkieletu, jquery, jquery mobile.

Nie widziałem jeszcze żadnego samouczka ani wpisu o tym, jak poprawnie używać nowej wersji Cordova z wymaganiami dla requirejs. Widzę mnóstwo postów o tym, jak włączyć Cordova i requirejs z powrotem, gdy Cordova nie obsługiwała AMD (2.3.0 i wcześniejszych).

Jeśli ktoś może opublikować lub wskazać mi prosty przykład tego, byłoby to bardzo cenne.

Edytuj: W szczególności kierujemy się na rozwój dla iOS.

Edytuj: Chcę być bardziej szczegółowy i uwzględnić dokładny problem, na który napotykam.

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

Żeby było jasne, wszystko działa prawidłowo przed zoptymalizować projekt require.js. Kiedy próbuję zoptymalizować projekt za pomocą r.js (część require.js), optymalizator zgłasza błąd, który można zobaczyć poniżej.

Nie jestem pewien, co channel.js jest i dlaczego jest on z prośbą o to, ale udało mi się go znaleźć na github tutaj https://github.com/apache/cordova-js/tree/master/lib/common

Raz utworzyć podkatalog jest szukając, umieszczam w nim plik channel.js. Nie dostaję już tego błędu, ale teraz jest inny, przedstawiony poniżej.

byłem też w stanie znaleźć tego pliku na stronie github Cordova-js. Po umieszczeniu tego pliku w podkatalogu nie dostaję żadnych komunikatów o błędach, a kompilacja projektów przebiega pomyślnie.

Teraz, gdy próbuję uruchomić aplikację przy użyciu pojedynczego zoptymalizowanego pliku js, pojawia się ten błąd w konsoli javascript i po prostu biały pusty ekran na urządzeniu.

"ReferenceError: Nie można odnaleźć Zmienna: eksport"

Tutaj jest złożyć moje build.js używam do uruchomienia funkcji optymalizacji

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

Edycja 4/11/13: Odpowiedź Dzięki pomocy użytkownika SA asgeo1, mój problem został rozwiązany. Okazuje się, że nie można nazwać zmiennej w pliku main.js "cordova", ponieważ jest ona sprzeczna z wewnętrzną zmienną o nazwie "cordova".

Rozwiązanie znajduje się poniżej.

główny.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 
    }; 
}); 

to rozwiązanie działa i był testowany z Cordova 2.5.0 i 2.6.0

Answer 1

Miałem ten sam problem. Wydaje się to być problemem, w jaki sposób budują plik cordova.ios.js oni rozpowszechniać z Cordova 2,4/2,5

Jak dowiedział się sekcje cordova/channel i cordova/utils nie są w odpowiedniej kolejności w obrębie cordova.ios plik .js.

To dlatego RequireJS próbuje załadować poszczególne pliki, ponieważ te moduły jeszcze nie wystąpiły w pliku cordova.ios.js.

Niestety, gdy umieściłeś pliki channel.js i utils.js w projekcie, w rzeczywistości nie rozwiązałeś głównej przyczyny problemu.

Oczywiście, to pozwoliło na kompilację, ale wystąpił błąd ReferenceError: Can't find variable: exports, ponieważ RequireJS umieści zawartość utils.js/channel.js nad resztą zawartości cordova.ios.js - co nie jest dobre, ponieważ zależy od ustawień eksportu w pliku cordova.ios.js.

Nie wspominając masz teraz dwa kopie kodu channel.js/utils.js w wybudowanym pliku, jak również ...

Rozwiązanie to należy zmodyfikować cordova.ios.js siebie. Przesuń Cordova/kanał i Cordova/utils do góry cordova.ios.js (ale po eksporcie/requirejs rzeczy jest uwzględniany)

można dostać jeden, że przygotował dla siebie tutaj: https://gist.github.com/asgeo1/5361227

także , kolejna wskazówka - w main.js nie odwołuj się do cordova.ios.js jako "cordova". To się koliduje, ponieważ cordova.ios.js używa już tej nazwy modułu wewnętrznie.

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

Answer 2

Aby użyć leniwy załadunku, jedną z opcji jest użyj wtyczki domReady z requireJS (porównaj http://requirejs.org/docs/api.html#pageload).

Po tym, jak requireJS potwierdzi, że DOM był gotowy, można następnie poczekać, aż urządzenie będzie gotowe przy użyciu zwykłego odbiornika 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 
} 

Pracowałem dla mnie!