将Bootstrap 3.0与Browserify一起使用 [英] Using Bootstrap 3.0 with Browserify

问题描述

我正在尝试将Bootstrap 3.0与Browserify 5.9.1结合使用，但出现以下错误：

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?

这是我package.json中相对的部分：

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:

1. Bootstrap是使用Bower下载的。 AFAIK无法使用npm来获得它。这使路径非常长且笨拙。有没有办法使Bootstrap npm友好？


2. Bootstrap不是该模块的直接依赖项，它是一种jQuery插件。加载后，它仅在文档上创建一些事件处理程序即可处理Bootstarp小部件中的事件。我只需要创建这些事件处理程序即可。这是正确的方法吗？

当然，毕竟，我仍然会收到未定义jQuery错误。我正在拔头发，试图使它正常工作。请帮忙！

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。早些时候，我在图片中有grunt-browserify插件，并很快意识到它正在使用没有源地图功能的browserify版本4.x。这使调试变得更加困难，因此我迅速将其从图片中删除并直接从npm运行browserify。

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.

推荐答案

当我在browserify中使用引导程序时，这对我有用：

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');

这篇关于将Bootstrap 3.0与Browserify一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！