richiedono bootstrap e jquery nell'app aurelia

Question

Sono nuovo ad Aurelia, quindi non sono sicuro di come dovrebbe funzionare. Ho creato un nuovo progetto Aurelia e installato anche bootstrap semplicemente facendo jspm install bootstrap. Ho visto in console che anche questo ha tirato in jquery 3.0.0.

Ora la mia domanda è: come utilizzare bootstrap.css, bootstrap.js e jquery.js nel mio progetto?

Primo tentativo:

In app.html ho cercato di fare thhe seguente:

<require from="bootstrap"></require> 

ho provato perché ho la seguente riga nel mio config.js:

map: { 
    ... 
    "bootstrap": "github:twbs/bootstrap@3.3.6", 
    ... 
} 

Questo tipo di funziona nel senso che carica bootstrap.js, ma poi dà un errore nel browser che manca jquery.js. Quindi non sta caricando automaticamente jquery per me. È normale?

Secondo tentativo:

ho cambiato require a questo in app.html:

<require from="jquery/dist/jquery.js"></require> 
<require from="bootstrap/css/bootstrap.css"></require> 
<require from="bootstrap/js/bootstrap.js"></require> 

Non sono sicuro di come si sa dove cercare il file bootstrap.js e bootstrap.css, dal momento che sono trova in: jspm_packages/github/twbs/bootstrap@3.3.6/css/bootstrap.css ecc. Ma sa come trovare i file di bootstrap. Ma non il file jquery.

ho questo nel mio config.js per jQuery:

map: { 
    ... 
    "github:twbs/bootstrap@3.3.6": { 
     "jquery": "npm:jquery@3.0.0" 
    }, 
    .... 
} 

Quindi, in pratica la mia domanda è, come dovrebbe questo lavoro? Dovrebbe require caricare automaticamente tutti i file necessari quando I <require from="bootstrap">. O dovrei caricarli ancora come singoli file? In tal caso, come faccio quindi a caricare jquery in questo caso?

Answer 1

L'elemento require serve per inserire componenti Aurelia, modelli html (che sono componenti Aurelia) o file css. Non è per il caricamento di file javascript.

L'Aurelia scheletro mostra come caricare Bootstrap nel suo file main.js:

import 'bootstrap'; 

è la prima riga del file. Questo inizializzerà il codice javascript di Bootstrap.

In app.html un elemento require viene utilizzato per caricare css di Bootstrap:

<require from="bootstrap/css/bootstrap.css"></require> 

Importazione jQuery in un file è abbastanza semplice così:

import $ from 'jquery'; 

quindi è possibile utilizzare la funzione $ tuttavia ti piacerebbe.

Answer 2

Ho avuto questo problema quindi installato ultimo nodo e NPM, e poi dalla pagina tutorial sul sito aurelia: -

Per ottenere l'installazione Bootstrap, cominciamo con l'installazione stessa biblioteca con NPM. Eseguire la seguente nella riga di comando per fare questo:

npm install bootstrap --save 

Avanti, perché Bootstrap utilizza jQuery, vogliamo installare jQuery così, in questo modo:

npm install jquery@^2.2.4 --save 

poi riavviato l'applicazione come pacchetti erano aggiornato e eseguito di nuovo ... FISSO!

Answer 3

dopo l'aggiunta di importazione 'bootstrap'; in main.js, potrebbe essere necessario interrompere l'applicazione (Ctrl + c) ed eseguirlo di nuovo con au run --watch per farlo funzionare.