在Browserify中使用Bootstrap 3.0

Question

我试图使用Bootstrap 3.0与Browserify 5.9.1,但得到以下错误:

Uncaught ReferenceError: jQuery is not defined

这样做的正确方法是什么？

这是我的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",
    ...
  },
  ...
}

需要引导程序的模块如下所示:

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

我不喜欢的两件事是:

1. 使用Bower下载Bootstrap.AFAIK无法使用npm获取它.这使得路径非常长且笨拙.有没有办法使Bootstrap npm友好？
2. Bootstrap不是这个模块的直接依赖,它是一种jQuery插件.加载时,它只是在文档上创建一些事件处理程序来处理来自Bootstarp小部件的事件.我必须要求创建这些事件处理程序.这是正确的方法吗？

当然,在所有这些之后,我仍然得到"jQuery未定义"错误.我正在拉我的头发试图让这个工作.请帮忙!

PS早些时候我在图片中有了grunt-browserify插件,并很快意识到它使用的是浏览器版本4.x而没有源映射功能.这使得调试变得更加困难,因此我很快将其从图片中删除并直接从npm运行browserify.

Answer 1

当我在browserify中使用bootstrap时,这对我有用:

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

Answer 2

我遇到了同样的问题:Bootstrap在NPM中可用,但不作为Common JS模块公开.我确定的方法是:

1. 暂时设置window.$和window.jQuery
2. 通过要求加载Bootstrap.js
3. 还原的价值window.$和window.jQuery

我将下面的代码放入一个名为bootstrapHack.js的模块中,并在其他任何运行之前将其放在我的应用程序的根目录下.

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

require('bootstrap');

jQuery.noConflict(true);

或者,如果您只使用一个或两个Bootstrap组件,则可以单独使用它们并减小文件大小.在这种情况下,只需要模态和工具提示.

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

require('bootstrap/js/tooltip');
require('bootstrap/js/modal');

jQuery.noConflict(true);