Adding bootstrap.js to browserify?

问题

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

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/22964970/adding-bootstrap-js-to-browserify

标签

javascript

jquery

node.js

twitter-bootstrap

browserify