2016-01-25 33 views
6

Utilizzo di SystemJS, come si specifica che una libreria dipende da un'altra? Ad esempio, la libreria JavaScript Bootstrap dipende da jQuery. Sulla base del SytemJS docs, ho pensato vorrei specificare questa dipendenza utilizzando System.config.meta proprietà:Come posso specificare le dipendenze della libreria usando SystemJS?

System.config({ 
    baseUrl: './scripts', 
    defaultJSExtensions: true, 
    map: { 
     jquery: './lib/jquery-2.2.0.min.js', 
     bootstrap: './lib/bootstrap.min.js' 
    }, 
    meta: { 
     bootstrap: { 
      deps: ['jquery'] 
     } 
    } 
}); 
System.import('./scripts/app.js'); 

Ma questo sembra non avere alcun effetto. Quando eseguo la mia applicazione, la libreria Bootstrap genera un errore Bootstrap's JavaScript requires jQuery - il che significa che Bootstrap viene caricato prima di jQuery.

Come posso garantire che jQuery sia sempre caricato prima di Bootstrap?

+0

jQuery deve essere aggiunto esplicitamente a 'window'. –

+0

@StephanBijzitter: puoi fornire un esempio? Non sono sicuro di cosa significhi nel contesto di SystemJS. –

+0

'window. $ = Window.jQuery = require ('jQuery')', metti quel codice ovunque prima dell'inclusione dei file bootstrap. È brutto, ma è così che piace a Twitter. –

risposta

4

Dopo aver cambiato ciecamente le cose, mi sono imbattuto in una configurazione che sembra funzionare. Ecco la mia configurazione:

System.config({ 
    defaultJSExtensions: true, 
    paths: { 
     jquery: './scripts/lib/jquery-2.2.0.min.js', 
     bootstrap: './scripts/lib/bootstrap.min.js' 
    }, 
    meta: { 
     bootstrap: { 
      deps: ['jquery'] 
     } 
    } 
}); 

System.import('./scripts/app.js'); 

Penso che la chiave stava cambiando da map a paths.

EDIT

Nota a margine: dopo aver appreso un po 'di più su SystemJS, sto scoprendo che è molto più più facile lasciare che jspm fare il duro lavoro di gestire la mia configurazione SystemJS.

+0

Questo non funziona con me. Sto cercando di risolvere questo: http://stackoverflow.com/questions/39528718/how-to-globally-import-javascript-library-in-angular2-typescript-project – smartmouse

+0

Se 'jquery' è in' node_modules', allora funziona => '... percorsi: {jquery: 'node_modules/jquery/dist/jquery.js'} ...' – Akash