2013-06-27 14 views
14

sto avendo abbastanza semplice struttura di directory per gli script:Richiede JS sta ignorando la mia configurazione

/js/  <-- located in site root 
    libs/ 
     jquery-1.10.1.min.js 
     knockout-2.2.1.js 
     knockout.mapping.js 
    models/ 
     model-one.js 
     model-two.js 
     ... 
    require.js 
    config.js 

Dato che il motore sito utilizza gli URL semplificati che sto utilizzando percorsi assoluti in <script>:

<script type="text/javascript" data-main="/js/config.js" src="/js/require.js"></script> 

RequireJS config:

requirejs.config({ 

    baseUrl: "/js/libs", 

    paths: { 
     "jquery":  "jquery-1.10.1.min", 
     "knockout":  "knockout-2.2.1", 
     "komapping": "knockout.mapping" 
    } 

}); 

Da qualche parte in HTML:

Quindi il problema è che RequireJS ignora completamente baseUrl e paths definito nel file di configurazione. Ottengo 404 errori per ogni modulo richiesto nel codice qui sotto. Vedo in console browser RequireJS tenta di caricare questi moduli da /js/ senza traduzioni percorso:

404: http://localhost/js/jquery.js 
404: http://localhost/js/knockout.js 
404: http://localhost/js/komapping.js 

Tuttavia dopo che la pagina viene caricata e gli errori sono mostrati digito console e ...

> require.toUrl("jquery") 
    "/js/libs/jquery-1.10.1.min" 

Perché così? Come risolvere questo problema?

È la mia prima esperienza con RequireJS, quindi mi sento come se avessi saltato qualcosa di molto semplice e ovvio. Aiuto per favore.

Aggiornamento

appena scoperto questa domanda: Require.js ignoring baseUrl

E 'sicuramente il mio caso. Vedo nel pannello Rete che config.js non è stato caricato completamente prima che require(...) attivi il caricamento della propria dipendenza.

Ma non voglio posizionare il mio require(...) in configurazione perché è molto specifico per la pagina che lo chiama. Non ho mai notato un tale problema con l'asincronicità in nessun esempio visto prima. Come fanno gli autori di questi esempi a farli funzionare?

+0

Hai provato a rimuovere il primo finali oblique 'js/librerie /'? – paka

+0

@paka Ho appena provato. Nessun cambiamento. –

+0

funziona con percorsi assoluti? – paka

risposta

22

Risolto.

Il problema era che il file di configurazione definito nell'attributo data-main viene caricato in modo asincrono come le altre dipendenze. Quindi il mio config.js per errore non è mai stato completamente caricato ed eseguito prima della chiamata require.

La soluzione è descritta nel RequireJS API ufficiale: http://requirejs.org/docs/api.html#config

... Inoltre, è possibile definire l'oggetto config come variabile globale richiedere prima require.js viene caricato, e hanno i valori applicati automaticamente.

così ho appena cambiato la mia config.js per definire globale require hash con una corretta configurazione:

var require = { 
    baseUrl: "/js/libs", 
    paths: { 
     "jquery":  "jquery-1.10.1.min", 
     "knockout":  "knockout-2.2.1", 
     "komapping": "knockout.mapping" 
    } 
}; 

e comprendeva poco prima require.js:

<script type="text/javascript" src="/js/config.js"></script> 
<script type="text/javascript" src="/js/require.js"></script> 

Questo approccio consente di controllare lo script ordine di esecuzione, quindi config.js verrà sempre caricato prima delle successive chiamate require.

Tutto funziona perfettamente ora.

+2

Sarà say require non è definito – CodeGuru

+1

Grazie, funziona ma ha causato un piccolo problema in un altro script che diceva: require non è una funzione. (Pensa che abbia qualcosa a che fare con l'ambito delle variabili) Per evitare ciò puoi usare requirejs = {...} invece di require = {...}. Sembra fare la stessa cosa ma senza il problema. Inoltre, potresti voler creare un tag script nel template per definire una variabile es. var webroot = 'http: // percorso/a/webroot' prima della config include e imposta "baseUrl: webroot," nel file config.js per evitare problemi di routing causati dagli URL seo. –

+0

Questa soluzione è brutta, si assegna una variabile globale che verrà sostituita dopo la dichiarazione della libreria. Metti la tua configurazione in un tag script separato, subito dopo require.js. Maggiori informazioni: https://github.com/jrburke/requirejs/wiki/Patterns-for-separating-config-from-the-main-module –

2

risolto il problema.

La mia configurazione veniva caricata in modo asincrono e quindi i percorsi di configurazione non venivano impostati prima che venisse chiamata la mia richiesta.

Come per i documenti RequireJS Link here, ho aggiunto una chiamata di script alla mia configurazione prima della chiamata require.js. E rimosso l'attributo data-main.

var require = { 
    baseUrl: '/js', 
    paths: { 
     'jquery':  'vendor/jquery/jquery-2.0.3.min', 
     'picker':  'vendor/pickadate/picker.min', 
     'pickadate': 'vendor/pickadate/picker.date.min' 
    }, 
    shim: { 
     'jquery': { 
      exports: '$' 
     }, 
     'picker': ['jquery'], 
     'pickadate': { 
      deps: ['jquery', 'picker'], 
      exports: 'DatePicker' 
     } 
    } 
} 

Tutto sta ora lavorando

+2

Molto grato per questo - Stavo ricevendo tutti i tipi di problemi con script non caricati correttamente e non potrei mai trovare la risposta. – Valerie

Problemi correlati