Adding bootstrap.js to browserify?

Question

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)
 * ======================================================================== */

CommandZ · Accepted Answer · 2018-06-06 05:34:30Z

12

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": "$"
    }
},

edited Jun 6, 2018 at 5:34

CommandZ

3,6331 gold badge25 silver badges28 bronze badges

answered Apr 26, 2014 at 6:06

Trott

70.6k27 gold badges184 silver badges218 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Michael Joseph Aubry Over a year ago

Yeah I figured that out, browserify can be really frustrating but when in doubt I realized just fiddle with the shim.

Michael Joseph Aubry Over a year ago

Just for answering and giving the correct solution ill mark this, even though I had it...

Trott Over a year ago

Thanks, that was generous of you.

Unispaw Over a year ago

this has to be added to package.json, not bower.json.. and it works but you have to write this : "browserify-shim": { "bootstrap": { "exports": "bootstrap", "depends": [ "jquery:$" ] } }

Chandu Over a year ago

I changed the "jquery:$" to "jquery:jQuery" and it works now.

|

RobLoach · Accepted Answer · 2015-01-30 05:02:20Z

2

Another solution is to use Webpack, which has a script-loader to load jQuery at the global context.

answered Jan 30, 2015 at 5:02

RobLoach

2,2361 gold badge13 silver badges5 bronze badges

1 Comment

tutuca Over a year ago

I'm using it like this require("jquery"); require('jquery-ui'); require('bootstrap-sass'); Still message is the same.

Collectives™ on Stack Overflow

Adding bootstrap.js to browserify?

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related