2012-06-02 12 views
31

Sto sperimentando un po 'con RequireJS 2.0.1. Il mio obiettivo è caricare correttamente jQuery, Underscore e Backbone. Dall'originale RequireJS doc ho scoperto che l'autore J. Burke ha aggiunto (a questa nuova versione) uno new config option called shim.Caricamento jQuery, Underscore e backbone utilizzando RequireJS 2.0.1 e shim

Poi mi ha scritto questa roba qui:

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Testing time</title> 
     <script data-main="scripts/main" src="scripts/require.js"></script> 
    </head> 
    <body> 
     <h1>Testing time</h1> 
    </body> 
</html> 

scripts/main.js

requirejs.config({ 
    shim: { 
     'libs/jquery': { 
      exports: '$' 
     }, 
     'libs/underscore': { 
      exports: '_' 
     }, 
     'libs/backbone': { 
      deps: ['libs/underscore', 'libs/jquery'], 
      exports: 'Backbone' 
     } 
    } 
}); 


define(
    ['libs/jquery', 'libs/underscore', 'libs/backbone'], 

    function (jQueryLocal, underscoreLocal, backboneLocal) { 
     console.log('local', jQueryLocal); 
     console.log('local', underscoreLocal); 
     console.log('local', backboneLocal); 
     console.log('global', $); 
     console.log('global', _); 
     console.log('global', Backbone); 
    } 
); 

Tutto sembra funzionare abbastanza bene, ma ho la sensazione che mi manca qualcosa , So che ci sono AMDed versione di jQuery e Underscore ma se il se tup è così semplice che non capisco perché dovrei usarli.

Quindi, questa configurazione è corretta o mi manca qualcosa?

+0

come circa 'json2'? Ne abbiamo bisogno anche noi? – Henry

risposta

32

È necessario utilizzare la configurazione "shim" solo se la libreria non chiama già define() per dichiarare un modulo. jQuery lo fa già, quindi puoi rimuoverlo dalla configurazione dello shim. Il codice sopra funzionerà così com'è, ma la configurazione dello shim delle esportazioni per jQuery verrà ignorata poiché jQuery chiamerà lo define() prima che il lavoro dello shim venga eseguito.

Gli aspetti negativi con lo spessore vs avere la chiamata di script define() per definire un modulo:

  1. E 'meno portatile/affidabile: ogni sviluppatore deve fare la configurazione spessore, e tenere traccia delle modifiche di libreria. Se l'autore della libreria lo fa in linea nella libreria, ognuno ottiene i benefici in modo più efficiente. I modelli di codice a umdjs/umd possono aiutare con tale modifica del codice.

  2. Meno caricamento del codice ottimale: shim config funziona caricando gli shim deps prima di caricare la libreria effettiva. Quindi è un caricamento un po 'più sequenziale rispetto al parallelo. È più veloce se tutti gli script possono essere caricati in parallelo, il che è possibile quando si utilizza define(). Se si esegue una build/ottimizzazione per la distribuzione finale e si combinano tutti gli script in uno script, non si tratta di uno svantaggio.

8

Quello che state facendo è corretto, ma jQuery non ha bisogno di essere nella configurazione spessore perché esporta un modulo AMD (Asynchronous Module Definition). Underscore ha rimosso il suo supporto per AMD/Require.js rapidamente dopo averlo aggiunto, vedi: Why underscore.js removed support for AMD

Shim è inteso come comodità per l'utilizzo di librerie che non esportano un modulo AMD. Se la libreria che stai utilizzando supporta AMD, o ha 2 versioni (una che supporta AMD e una che è una variabile globale) dovresti usare la versione di AMD. Dovresti utilizzare la versione di AMD per gli stessi motivi per cui utilizzerai AMD in primo luogo e anche perché la libreria potrebbe includere require.js (o Almond) nella sua origine e aggiungerebbe al tuo progetto una dimensione di file non necessaria.

0

È possibile evitare jquery "shimming" nell'esempio originale (dove il percorso di jquery è impostato su 'libs/jquery'), poiché jquery aggiunge il nome "jquery" nella definizione del modulo amd?

define ("jquery", [], function() {return jQuery;});

La mia esperienza è che è necessario inserire jquery.js nella directory baseurl per ottenere il modulo jQuery amd definito come previsto, o "shim" come nell'esempio originale.

Problemi correlati