So I am trying to figure out how to do this? I downloaded bootstrap-sass via bower and added the bootstrap javascript into a shim.
A few things have me confused, the bootstrap.js file looks like this.
//= 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
This is kind of self explanatory, but still confusing at the same time, do I leave it commented like that? When I add to the bootstrap shim do I include just the bootstrap.js file, or should I link to all the ones I need?
Just to save myself from hacking away (which I will be doing in the meantime), I'd like to try to get some information on how to include bootstrap.js into browserify.
Edit: I think I might just have to concat all the files I need and include that script, because when I browserify the bootstrap.js I just get the above.
I'll try without the comments, then if that fails I'll concat all the scripts into one file and see what happens :)
Edit: Hmm looks like the concat theory works! The only thing is jQuery, take a look.
; 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)
* ======================================================================== */
This is my compiled browserify code, the only way to get it to work when I call a bootstrap function say for example $('body').modal('toggle')
I have to change the jQuery
above to $
manually.
I tried using both inside my shim but still same thing I must manually write $
. Example
// 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)
* ======================================================================== */
This answer is by the original questioner. It was posted as an edit to the question. I moved it here, where the answers go.
I recompiled and it looks like it's working now, make sure inside your shim you use
$
"bootstrap": { "exports": "bootstrap", "depends": { "jquery": "$" } },
Another solution is to use Webpack, which has a script-loader to load jQuery at the global context.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With