Browserify

Question

Ben Browserify 5.9.1 ile Bootstrap 3.0 kullanmaya çalışıyor, ancak aşağıdaki hatayı alıyorum ile Bootstrap 3.0 kullanma:

Uncaught ReferenceError: jQuery is not defined 

Bunu yapmanın doğru yolu nedir?

{ 
    ... 
    "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", 
    ... 
    }, 
    ... 
} 

ön yükleme alanı gerektirir modül aşağıda gösterilmiştir: Burada sevmiyorum

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

iki şey vardır:

İşte

benim package.json ait relavant kısımları vardır

1. Bootstrap, Bower kullanılarak indirilir. AFAIK, npm'yi kullanmanın bir yolu yoktur. Bu yol çok uzun ve garip hale getirir. Bootstrap npm dostu yapmak için bir yolu var mı?
2. Bootstrap bu modülün doğrudan bağımlılığı değil, bir jQuery eklentisi. Yüklendiğinde, sadece Bootstarp'ın widget'larından olayları işlemek için belgede bazı olay işleyicileri oluşturur. Sadece bu olay işleyicilerinin oluşturulması için ihtiyacım var. Bu doğru yol mu?

Tabii ki bundan sonra "jQuery tanımlı değil" hatasını alıyorum. Bunu işe almak için saçlarımı çekiyorum. Lütfen yardım et!

P.S. Önceden resimde grunt-browserify eklenti vardı ve hızlı bir şekilde, herhangi bir kaynak harita özelliği ile tarayıcıda sürüm 4.x kullandığını fark ettim. Bu, hata ayıklamayı daha da zorlaştırıyordu, bu yüzden resmi hızlı bir şekilde çıkardım ve tarayıcıyı npm'den doğrudan çalıştı.

Ben browserify içinde önyükleme kullanıyorum, bu benim için çalışıyor

Answer 1

:

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

Answer 2

Bir temizlikçi yaklaşım atomify eklenti kullanmak olacaktır. Bu, npm modülünden jQuery, bootstrap.js ve bootstrap.css özümlerini çözmenize yardımcı olur.

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

Sen az/css dosyasına içinde @import bootstrap gerekir

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

@dark : #999; 

body { 
    background-color : @dark; 
} 

yanı sıra js dosyasında require() önyükleme, this Github içinde

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

Tam bir örnek repo.

Answer 3

Aynı sorunla karşılaştım: Bootstrap NPM'de kullanılabilir ancak Common JS modülü olarak gösterilmiyor. Ben yerleşmiş yaklaşımdı:

1. geçici window.$ ve window.jQuery
2. Yük Bootstrap ayarlayın.o
3. window.$ değerini döndür ve

window.jQuery Ben bir modül olarak adlandırılan bootstrapHack.js içine aşağıdaki kodu yerleştirilir ve başka bir şey çalışmadan önce benim app kökünde bunu gerekli isteyerek js.

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

require('bootstrap'); 

jQuery.noConflict(true); 

Yoksa sadece bir veya iki Bootstrap bileşenleriyle çalışıyorsanız, siz tek tek gerektirir ve dosya boyutuna kısaltır. Bu durumda, sadece modal ve araç ipucu.

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

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

jQuery.noConflict(true);