Korzystanie Bootstrap 3.0 z Browserify

Question

Próbuję użyć Bootstrap 3.0 z Browserify 5.9.1, ale otrzymuję następujący błąd:

Uncaught ReferenceError: jQuery is not defined 

Co to jest poprawny sposób to zrobić?

Oto obowiązujących, odnośnych części mojego 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", 
    ... 
    }, 
    ... 
} 

Moduł, który wymaga bootstrap przedstawiono poniżej:

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

Dwie rzeczy, które nie lubię tutaj:

1. Bootstrap jest pobierany za pomocą Bower. AFAIK nie ma sposobu, aby uzyskać to za pomocą npm. To sprawia, że ​​ścieżka jest bardzo długa i niezręczna. Czy istnieje sposób, aby uczynić Bootstrap npm przyjaznym?
2. Bootstrap nie jest bezpośrednią zależnością tego modułu, jest to rodzaj wtyczki jQuery. Po załadowaniu tworzy po prostu niektóre procedury obsługi zdarzeń w dokumencie, aby obsłużyć zdarzenia z widżetów Bootstarp. Muszę wymagać, aby te procedury obsługi zdarzeń zostały utworzone. Czy to dobra droga?

Oczywiście po tym wszystkim nadal pojawia się błąd "jQuery nie jest zdefiniowany". Wyciągam włosy, próbując zmusić to do pracy. Proszę pomóż!

P.S. Wcześniej miałem wtyczkę "mysz-przeglądarka" na obrazku i szybko zdałem sobie sprawę, że korzystam z przeglądarki w wersji 4.x bez możliwości map źródłowych. To utrudniało debugowanie, więc szybko wyjąłem go z obrazu i uruchomiłem przeglądarkę prosto z npm.

Answer 1

Działa to na mnie, kiedy używam bootstrap w browserify:

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

Answer 2

Czystsze podejście byłoby użyć wtyczki atomify. Pomogłoby to w rozwiązaniu wszystkich problemów z jQuery, bootstrap.js i bootstrap.css z modułu 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'); 
}); 

Trzeba @import bootstrap się na mniejszym pliku/css,

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

@dark : #999; 

body { 
    background-color : @dark; 
} 

jak require() bootstrap w pliku 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'); 
} 

Kompletny przykład w this Github repo.

Answer 3

Wpadłem na ten sam problem: Bootstrap jest dostępny w NPM, ale nie jest udostępniany jako wspólny moduł JS. Podejście zdecydowałem się na to:

1. Tymczasowo ustawione window.$ i window.jQuery
2. Załaduj startowej.js zobowiązując ją
3. Przywróć wartości od window.$ i window.jQuery

umieściłem poniżej kod do modułu o nazwie bootstrapHack.js i wymaga go w katalogu głównym mojej aplikacji zanim cokolwiek innego przebiegów.

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

require('bootstrap'); 

jQuery.noConflict(true); 

Lub jeśli pracujesz tylko z jednego lub dwóch składników Bootstrap, można wymagać od nich indywidualnie i zmniejszyć rozmiar pliku. W tym przypadku tylko modalne i podpowiedź.

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

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

jQuery.noConflict(true);