问题:

I am trying to use Bootstrap 3.0 with Browserify 5.9.1, but getting the following error:

Uncaught ReferenceError: jQuery is not defined

What's the correct way to do this?

Here are the relavant portions of my package.json:

{   ...   "scripts": {     "bundle": "browserify main.js -o bundle.js --debug --list"   },   "dependencies": {     "backbone": "~1.1.x",     "jquery": "~2.1.x",     "underscore": "~1.6.x"   },   "devDependencies": {     "browserify": "^5.9.1",     ...   },   ... }

The module that requires bootstrap is shown below:

var $ = require('jquery'); var Backbone = require('backbone'); Backbone.$ = $; require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');

Two things that I don't like here are:

Bootstrap is downloaded using Bower. AFAIK there is no way to get it using npm. This makes the path very long and awkward. Is there a way to make Bootstrap npm friendly?
Bootstrap is not a direct dependency of this module, it is sort of a jQuery plugin. When it is loaded, it simply creates some event handlers on the document to handle events from Bootstarp's widgets. I have to require just so that these event handlers are created. Is this the right way?

Of course after all this, I still get the "jQuery is not defined" error. I am pulling my hair out trying to get this to work. Please help!

P.S. Earlier I had the grunt-browserify plugin in the picture and quickly realized that it was using browserify version 4.x with no source map capability. This was making it even harder to debug, so I quickly took it out of the picture and running browserify straight from npm.

回答1:

This works for me when I'm using bootstrap in browserify:

window.$ = window.jQuery = require('jquery') var Backbone = require('backbone'); Backbone.$ = $; require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');

回答2:

I ran into the same problem: Bootstrap is available in NPM but is not exposed as a Common JS module. The approach I settled on was:

Temporarily set window.$ and window.jQuery
Load Bootstrap.js by requiring it
Revert the value of window.$ and window.jQuery

I placed the code below into a module called bootstrapHack.js and required it at the root of my app before anything else runs.

var jQuery = require('jquery'); window.$ = window.jQuery = jQuery;  require('bootstrap');  jQuery.noConflict(true);

Or if you're only working with one or two Bootstrap components, you can require them individually and cut down on the file size. In this case, just modal and tooltip.

var jQuery = require('jquery'); window.$ = window.jQuery = jQuery;  require('bootstrap/js/tooltip'); require('bootstrap/js/modal');  jQuery.noConflict(true);

回答3:

A cleaner approach would be to use the atomify plugin. That would help you resolve jQuery, bootstrap.js and bootstrap.css all from npm module.

var gulp = require('gulp'); var atomify = require('atomify');  gulp.task('default', function () {   atomify.css('less/main.less', 'dist/bundle.css');   atomify.js('js/index.js', 'dist/bundle.js'); });

You need to @import bootstrap in to your less / css file,

@import 'bootstrap'; @import './other.less';  @dark : #999;  body {   background-color : @dark; }

as well as require() bootstrap in your js file,

var $ = jQuery = require('jQuery') require('bootstrap'); var other = require('./other')  console.log(typeof $().modal); console.log(other());  module.exports = function() {   console.log('Executed function xyz'); }

A complete example in this Github repo.

转载请标明出处:Using Bootstrap 3.0 with Browserify

文章来源: Using Bootstrap 3.0 with Browserify

标签

browserify

require

jquery