twitter-bootstrap 在 Browserify 中使用 Bootstrap 3.0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24978244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Bootstrap 3.0 with Browserify
提问by Naresh
I am trying to use Bootstrap 3.0 with Browserify 5.9.1, but getting the following error:
我正在尝试将 Bootstrap 3.0 与 Browserify 5.9.1 一起使用，但出现以下错误：
Uncaught ReferenceError: jQuery is not defined
What's the correct way to do this?
这样做的正确方法是什么？
Here are the relavant portions of my package.json:
这是我的 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?
- Bootstrap 是使用 Bower 下载的。AFAIK 无法使用 npm 获得它。这使得路径非常漫长和尴尬。有没有办法让 Bootstrap npm 友好？
- Bootstrap 不是这个模块的直接依赖，它是一个 jQuery 插件。当它被加载时，它只是在文档上创建一些事件处理程序来处理来自 Bootstarp 小部件的事件。我必须要求才能创建这些事件处理程序。这是正确的方法吗？
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!
当然，毕竟这一切，我仍然收到“未定义 jQuery”错误。我正在拔头发试图让它发挥作用。请帮忙！
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.
PS 早些时候我在图片中有 grunt-browserify 插件，并很快意识到它使用的是 browserify 4.x 版本，没有源地图功能。这使得调试变得更加困难，因此我迅速将其从图片中删除并直接从 npm 运行 browserify。
回答by Ian Lim
This works for me when I'm using bootstrap in browserify:
当我在 browserify 中使用引导程序时，这对我有用：
window.$ = window.jQuery = require('jquery')
var Backbone = require('backbone');
Backbone.$ = $;
require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');
回答by Joe B
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:
我遇到了同样的问题：Bootstrap 在 NPM 中可用，但没有作为 Common JS 模块公开。我确定的方法是：
- Temporarily set
window.$andwindow.jQuery - Load Bootstrap.js by requiring it
- Revert the value of
window.$andwindow.jQuery
- 临时设置
window.$和window.jQuery - 通过要求加载 Bootstrap.js
- 还原的价值
window.$和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.
我将下面的代码放入一个名为 bootstrapHack.js 的模块中，并在我的应用程序的根目录中要求它在运行其他任何东西之前。
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.
或者，如果您只使用一两个 Bootstrap 组件，您可以单独使用它们并减少文件大小。在这种情况下，只有模态和工具提示。
var jQuery = require('jquery');
window.$ = window.jQuery = jQuery;
require('bootstrap/js/tooltip');
require('bootstrap/js/modal');
jQuery.noConflict(true);
回答by anoopelias
A cleaner approach would be to use the atomifyplugin. That would help you resolve jQuery, bootstrap.jsand bootstrap.cssall from npm module.
更简洁的方法是使用atomify插件。这将帮助您解决jQuery,bootstrap.js以及bootstrap.css所有来自 npm 模块的问题。
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 @importbootstrap in to your less / css file,
您需要@import引导到您的 less / css 文件，
@import 'bootstrap';
@import './other.less';
@dark : #999;
body {
background-color : @dark;
}
as well as require()bootstrap in your js file,
以及require()js 文件中的引导程序，
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 thisGithub repo.
此Github 存储库中的完整示例。
