Использование Bootstrap 3.0 с Browserify

Я пытаюсь использовать 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');

Две вещи, которые мне не нравятся, следующие:

  • Загрузочная загрузка загружается с помощью Bower. AFAIK нет способа получить его с помощью npm. Это делает путь очень длинным и неудобным. Есть ли способ сделать Bootstrap npm дружественным?
  • Bootstrap не является прямой зависимостью этого модуля, это своего рода плагин jQuery. Когда он загружен, он просто создает некоторые обработчики событий в документе для обработки событий из виджетов Bootstarp. Мне нужно просто так, чтобы эти обработчики событий были созданы. Правильно ли это?

Конечно, после всего этого, я все равно получаю ошибку "jQuery не определен". Я вытаскиваю свои волосы, пытаясь заставить это работать. Пожалуйста, помогите!

P.S. Раньше у меня был плагин grunt-browserify на картинке и быстро понял, что он использует браузерную версию 4.x без возможности исходной карты. Это делало еще труднее отлаживать, поэтому я быстро взял его из картинки и запустил браузеру прямо с npm.

Ответы

Ответ 1

Это работает для меня, когда я использую bootstrap в браузере:

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

Ответ 2

Я столкнулся с той же проблемой: Bootstrap доступен в NPM, но не отображается как Common JS-модуль. Подход, который я решил, заключался в следующем:

  • Временно установите window.$ и window.jQuery
  • Загрузите Bootstrap.js, требуя его
  • Вернуть значение 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);

Ответ 3

Более чистым подходом было бы использовать плагин 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');
});

Вам нужно @import bootstrap в ваш файл less/css,

@import 'bootstrap';
@import './other.less';

@dark : #999;

body {
  background-color : @dark;
}

а также require() bootstrap в файле 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');
}

Полный пример в this Github repo.