I moduli require.js non si caricano correttamente

Question

Ho il mio file bootstrap che definisce i percorsi require.js e carica i moduli app e config.

// Filename: bootstrap 

// Require.js allows us to configure shortcut alias 
// There usage will become more apparent futher along in the tutorial. 
require.config({ 
    paths: { 
     bfwd: 'com/bfwd', 
     plugins: 'jquery/plugins', 
     ui: 'jquery/ui', 
     jquery: 'jquery/jquery.min', 
     'jquery-ui': 'jquery/jquery-ui.min', 
     backbone: 'core/backbone.min', 
     underscore: 'core/underscore.min' 
    } 
}); 
console.log('loading bootstrap'); 
require([ 
    // Load our app module and pass it to our definition function 
    'app', 
    'config' 
], function(App){ 
    // The "app" dependency is passed in as "App" 
    // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function 
    console.log('initializing app'); 
    App.initialize(); 
}); 

app.js è caricato come dovrebbe e le sue dipendenze sono caricate. si definisce callback, con tutte le dipendenze corrette passate come argomenti. Nessun errore è stato generato. TUTTAVIA, nel richiamo del bootstrap, l'app non è definita! nessun argomento è passato. Cosa può causare questo? Ecco il mio file app (modificato per lo spazio)

// Filename: app.js 
define(
    'app', 
    [ 
     'jquery', 
     'underscore', 
     'backbone', 
     'jquery-ui', 
     'bfwd/core', 
     'plugins/jquery.VistaProgressBar-0.6' 
    ], 
    function($, _, Backbone){ 
     var initialize = function() 
     { 
      //initialize code here 
     } 
     return 
     { 
      initialize: initialize 
     }; 
    } 
); 

Answer 1

Questo è un semplice esempio che potrebbe aiutarti ad iniziare:

ho creato un semplice modulo:

https://gist.github.com/c556b6c759b1a41dd99d

define([], function() { 
    function my_alert (msg) { 
    alert(msg); 
    } 
    return { 
    "alert": my_alert 
    }; 
}); 

E usato in questo violino, con solo jQuery come dipendenza extra:

http://jsfiddle.net/NjTgm/

<script src="http://requirejs.org/docs/release/1.0.7/minified/require.js"></script> 
<script type="text/javascript"> 
    require.config({ 
    paths: { 
     "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min", 
     "app": "https://gist.github.com/raw/c556b6c759b1a41dd99d/20d0084c9e767835446b46072536103bd5aa8c6b/gistfile1.js" 
    }, 
    waitSeconds: 40 
    }); 
</script> 

<div id="message">hello</div> 

<script type="text/javascript"> 
    require(["jquery", "app"], 
    function ($, app) { 
     alert($.fn.jquery + "\n" + $("#message").text()); 
     app.alert("hello from app"); 
    } 
); 
</script> 

Answer 2

Ok ho avuto lo stesso problema, la chiave è l'alias percorso jquery si definisce. Risulta che RequireJS ha una gestione speciale per jquery. Se usi il nome del modulo jquery, farà un po 'di magia lì.

A seconda di ciò che si ha in jquery.min.js può causare alcuni problemi, anche il plugin jQuery che avete potrebbe essere un problema. Qui ci sono le linee rilevanti di codice dalla sorgente RequireJS:

if (fullName) { 
     //If module already defined for context, or already loaded, 
     //then leave. Also leave if jQuery is registering but it does 
     //not match the desired version number in the config. 
     if (fullName in defined || loaded[id] === true || 
      (fullName === "jquery" && config.jQuery && 
       config.jQuery !== callback().fn.jquery)) { 
      return; 
     } 

     //Set specified/loaded here for modules that are also loaded 
     //as part of a layer, where onScriptLoad is not fired 
     //for those cases. Do this after the inline define and 
     //dependency tracing is done. 
     specified[id] = true; 
     loaded[id] = true; 

     //If module is jQuery set up delaying its dom ready listeners. 
     if (fullName === "jquery" && callback) { 
      jQueryCheck(callback()); 
     } 
    } 

Per me ce l'ho messa a punto tale che ho un file chiamato /libs/jquery/jquery.js che restituisce l'oggetto jQuery (solo un wrapper per RequireJS). Quello che ho finito è stato semplicemente cambiare l'alias del percorso da jquery a $jquery. Questo aiuta a evitare il comportamento magico indesiderato.

Nel original tutorial ho letto che usano jQuery che funziona anche.

Answer 3

Per quanto ne so, probabilmente dovresti semplicemente eliminare la stringa "app" nel tuo metodo app.js define.

// Filename: app.js 
define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'jquery-ui', 
    'bfwd/core', 
    'plugins/jquery.VistaProgressBar-0.6' 
], function($, _, Backbone){ 
    ... 
); 

Answer 4

Questo è come lo faccio con requirejs e la spina dorsale:

primo, definire file principale o bootstrap con config:

// bootstrap.js 
require.config({ 
    paths: { 
     text: 'lib/text', 
     jQuery: 'lib/jquery-1.7.2.min', 
     jqueryui: 'lib/jquery-ui-1.8.22.custom.min', 
     Underscore: 'lib/underscore-1.3.3', 
     Backbone: 'lib/backbone-0.9.2' 
    }, 

    shim: { 
     'Underscore': { 
      exports: '_' 
     }, 

     'jQuery': { 
      exports: 'jQuery' 
     }, 

     'jqueryui': { 
      exports: 'jqueryui' 
     }, 

     'Zepto': { 
      exports: '$' 
     }, 

     'Backbone': { 
      deps: ['Underscore', 'Zepto'], 
      exports: 'Backbone' 
     } 
}); 

define(function (require) { 
    'use strict'; 

    var RootView = require('src/RootView'); 
    new RootView(); 
}); 

Poi, io uso this syntax a caricare i miei script. Trovo più semplice della notazione dell'array definire le mie dipendenze tramite le dichiarazioni var.

// rootview.js 
define(function (require) { 

    'use strict'; 

    var $ = require('Zepto'), 
    Backbone = require('Backbone'), 
    LoginView = require('./LoginView'), 
    ApplicationView = require('./ApplicationView'), 
    jQuery = require('jQuery').noConflict(); 



    return Backbone.View.extend({ 

     // append the view to the already created container 
     el: $('.application-container'), 

     initialize: function() { 
      /* .... */ 
     }, 

     render: function() { 
         /* .... */ 
     } 
    }); 
}); 

Spero che sia d'aiuto!

Answer 5

Questo è un po 'tardi, ma ho appena avuto questo problema. La mia soluzione può essere trovata qui: https://stackoverflow.com/questions/27644844/can-a-return-statement-be-broken-across-multiple-lines-in-javascript

Ho postato quella domanda per un motivo diverso, per chiedere perché la mia correzione ha funzionato in primo luogo.Elclanrs ha fornito la risposta perfetta. Per farla breve, probabilmente l'indefinito appare a causa dell'inserimento automatico del punto e virgola di javascript: Automatic semicolon insertion & return statements

Se provi a cambiare la posizione della parentesi graffa da sotto a subito dopo l'istruzione di ritorno, penso che il tuo problema scomparirà.

// Filename: app.js 
define(
. 
. 
. 

    function($, _, Backbone){ 
     var initialize = function() 
     { 
      //initialize code here 
     } 
     return { 
      initialize: initialize 
     }; 
    } 
);