2014-04-09 6 views
9

Quindi sto cercando di capire come farlo? Ho scaricato bootstrap-sass via bower e aggiunto il bootstrap javascript in uno shim.Aggiunta di bootstrap.js per la navigazione?

Alcune cose mi hanno confuso, il file bootstrap.js ha questo aspetto.

//= require bootstrap/affix 
//= require bootstrap/alert 
//= require bootstrap/button 
//= require bootstrap/carousel 
//= require bootstrap/collapse 
//= require bootstrap/dropdown 
//= require bootstrap/tab 
//= require bootstrap/transition 
//= require bootstrap/scrollspy 
//= require bootstrap/modal 
//= require bootstrap/tooltip 
//= require bootstrap/popover 

Questa è una specie di auto esplicativo, ma ancora confusa, allo stesso tempo, posso lasciarlo ha commentato in questo modo? Quando aggiungo allo shim di bootstrap includo solo il file bootstrap.js, o dovrei collegarmi a tutti quelli di cui ho bisogno?

Solo per salvarmi dall'hacking away (cosa che farò nel frattempo), vorrei provare a ottenere alcune informazioni su come includere bootstrap.js in browserify.

Modifica: Penso che potrei semplicemente concatenare tutti i file di cui ho bisogno e includerlo, perché quando browserizzo il file bootstrap.js ho appena ottenuto quanto sopra.

Cercherò senza i commenti, quindi se fallisce io concat tutti gli script in un unico file e vedere cosa succede :)

Edit: Hmm sembra che le opere di teoria concat! L'unica cosa è jQuery, dai un'occhiata.

; jQuery = global.jQuery = require("c:\\wamp\\www\\mysite\\app\\client\\requires\\jquery\\js\\jquery.js"); 
/* ======================================================================== 
* Bootstrap: affix.js v3.1.1 
* http://getbootstrap.com/javascript/#affix 
* ======================================================================== 
* Copyright 2011-2014 Twitter, Inc. 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
* ======================================================================== */ 

Questo è il mio codice browserify compilato, l'unico modo per farlo funzionare quando chiamo una funzione di bootstrap dire per esempio $('body').modal('toggle') devo cambiare il jQuery sopra per $ manualmente.

Ho provato a utilizzare entrambi i componenti all'interno del mio shim, ma comunque la stessa cosa devo scrivere manualmente $. Esempio

// Notice I use $ here not jQuery like above, this is the only way to get it to work! 
; $ = global.jQuery = require("c:\\wamp\\www\\mysite\\app\\client\\requires\\jquery\\js\\jquery.js"); 
/* ======================================================================== 
* Bootstrap: affix.js v3.1.1 
* http://getbootstrap.com/javascript/#affix 
* ======================================================================== 
* Copyright 2011-2014 Twitter, Inc. 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
* ======================================================================== */ 

risposta

11

Questa risposta è per l'interrogante originale. È stato pubblicato come una modifica alla domanda. L'ho spostato qui, dove vanno le risposte.

I recompiled and it looks like it's working now, make sure inside your shim you use $

'bootstrap': { 
    "exports": 'bootstrap', 
    "depends": { 
     "jquery": '$' 
    } 
}, 
+0

Sì, l'ho capito, browserify può essere davvero frustrante, ma in caso di dubbio mi sono accorto solo di giocherellare con lo shim. –

+0

Solo per aver risposto e dando la soluzione corretta, segnalo male, anche se l'ho avuto ... –

+1

Grazie, è stato generoso da parte tua. – Trott

2

Un'altra soluzione consiste nell'utilizzare Webpack, che ha uno script caricatore per caricare jQuery al contesto globale.

+0

Lo sto usando in questo modo 'require (" jquery "); require ('jquery-ui'); require ('bootstrap-sass'); ' Il messaggio fisso è lo stesso. – tutuca

Problemi correlati