Twitter bootstrap ile Browserify

Question

Yığın taşmasıyla ilgili cevaplar dahil olmak üzere pek çok benzer soru var, ancak bunların hiçbiri benim için işe yaramadı, bu yüzden burada size soru soruyorum. Herkesin zamanını takdir ediyorum.

Son zamanlarda browserify ile gulp kullanmaya başladım ve bu harika çalışıyor. Sonra ön uç için browserify: Backbone ve Bootstrap3 kullanmayı denedim. Bootstrap ile birlikte gelen js dosyasına gereksinim duymaya başlayana kadar işler görünmek için

. Chrome araçlarda bir hata alıyorum: jQuery undefined.

Bunu yapmamaya çalıştım, ama çok şaşkınım. Ben jQuery 2.1.1 kullanıyorum, bu yüzden jQuery shim gerek yok, ama ben çaresiz ve her şeyi çalışırken, şimdi shim içinde var. ----------------

-------------- package.json: İşte benim package.json ve benim main.js dosya -

{ 
    "name": "gulp-backbone", 
    "version": "0.0.0", 
    "description": "Gulp Backbone Bootstrap", 
    "main": "main.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Rob Luton", 
    "license": "ISC", 


    "devDependencies": { 
    "jquery": "^2.1.1", 
    "backbone": "^1.1.2", 
    "browserify": "^4.2.1", 
    "gulp": "^3.8.6", 
    "vinyl-source-stream": "^0.1.1", 
    "gulp-sass": "^0.7.2", 
    "gulp-connect": "^2.0.6", 
    "bootstrap-sass": "^3.2.0", 
    "browserify-shim": "^3.6.0" 
    }, 

    "browser": { 
    "bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js", 
    "jQuery": "./node_modules/jquery/dist/jquery.min.js" 
    }, 

    "browserify": { 
    "transform": ["browserify-shim"] 
    }, 

    "browserify-shim": { 
    "jquery": "global:jQuery", 
    "bootstrap": { 
     "depends": [ 
     "jQuery" 
     ] 
    } 
    } 
} 

------------------------- main.js ------------- ---------

var shim = require('browserify-shim'); 
$ = require('jquery'); 
var Backbone = require('backbone'); 
Backbone.$ = $; 
var bootstrap = require('bootstrap'); 

/* the following logs fine if I comment out the bootstrap require, otherwise I get 'jQuery undefined' */ 

console.log(Backbone); 
$(function() { 
    alert('jquery works'); 
}); 

Answer 1

Eğer npm ile yüklediyseniz jQuery'yi bu şekilde kaydırmanız gerekmez. bir proje ben yazıyorum için aşağıdaki çalışır:

Ben de bootstrap için UÖM'yi kullanarak bir PITA tür olduğunu öğrendik. Böyle önceleri kesilmeleri gerektiğinde belirli ön uç bileşenlerini kurmak ve korumak için bower kullanıyorum.

package.json:

{ 
    "name": "...", 
    "version": "0.0.1", 
    "description": "...", 
    "repository": { 
    "type": "git", 
    "url": "..." 
    }, 
    "browser": { 
    "d3js": "./bower_components/d3/d3.min.js", 
    "select2": "./bower_components/select2/select2.min.js", 
    "nvd3js": "./bower_components/nvd3/nv.d3.min.js", 
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js" 
    }, 
    "browserify": { 
    "transform": [ 
     "browserify-shim", 
     "hbsfy" 
    ] 
    }, 
    "browserify-shim": { 
    "d3js": { 
     "exports": "d3", 
     "depends": [ 
     "jquery:$" 
     ] 
    }, 
    "bootstrap": { 
     "depends": [ 
     "jquery:jQuery" 
     ] 
    }, 
    "select2": { 
     "exports": null, 
     "depends": [ 
     "jquery:$" 
     ] 
    }, 
    "nvd3js": { 
     "exports": "nv", 
     "depends": [ 
     "jquery:$", 
     "d3js:d3" 
     ] 
    } 
    }, 
    "devDependencies": { 
    "browserify-shim": "~3.4.1", 
    "browserify": "~3.36.0", 
    "coffeeify": "~0.6.0", 
    "connect": "~2.14.3", 
    "gulp-changed": "~0.3.0", 
    "gulp-imagemin": "~0.1.5", 
    "gulp-notify": "~1.2.4", 
    "gulp-open": "~0.2.8", 
    "gulp": "~3.6.0", 
    "hbsfy": "~1.3.2", 
    "vinyl-source-stream": "~0.1.1", 
    "gulp-less": "~1.2.3", 
    "bower": "~1.3.3", 
    "cssify": "~0.5.1", 
    "gulp-awspublish": "0.0.16", 
    "gulp-util": "~2.2.14", 
    "gulp-rename": "~1.2.0", 
    "gulp-s3": "git+ssh://git@github.com/nkostelnik/gulp-s3.git", 
    "gulp-clean": "~0.2.4", 
    "process": "~0.7.0" 
    }, 
    "dependencies": { 
    "backbone": "~1.1.2", 
    "jquery": "~2.1.0", 
    "lodash": "~2.4.1", 
    "d3": "~3.4.8", 
    "rickshaw": "~1.4.6", 
    "datejs": "~1.0.0-beta", 
    "moment": "~2.7.0" 
    } 
} 

js:

$ = jQuery = require('jquery'); 
var _ = require('lodash'); 
var Rickshaw = require('rickshaw'); 
var d3 = require('d3js'); 
var nvd3 = require('nvd3js'); 
var moment = require('moment'); 
require('datejs'); 
require('select2'); 

var bootstrap = require('bootstrap'); 
console.log(bootstrap) 

Ayrıca - bir bazen yararlı şey browserify-dolgu çıkış onun teşhis sahip olmaktır.

var browserify = require('browserify'); 
var gulp   = require('gulp'); 
var handleErrors = require('../util/handleErrors'); 
var source  = require('vinyl-source-stream'); 
var process  = require('process'); 

process.env.BROWSERIFYSHIM_DIAGNOSTICS=1; 

var hbsfy = require('hbsfy').configure({ 
    extensions: ['html'] 
}); 

gulp.task('browserify', ['images', 'less'], function(){ 
    return browserify({ 
     transform: ['hbsfy', 'cssify'], 
      entries: ['./src/javascript/app.js'], 
     }) 
     .bundle({debug: true}) 
     .on('error', handleErrors) 
     .pipe(source('app.js')) 
     .pipe(gulp.dest('./build/')); 
}); 

Answer 2

Ben değişkeni '$' veya 'jQuery' tanımlanacak gerektiren browserify kullanıyorum olarak hata var: Bu gibi benim browserify.js görev görüntüsü. Genel olarak hatayı gidermek için pencereyi ekleyerek

. Bu yapmanın doğru yolu olup olmadığından emin değil, eğer olmasaydı, bana haber ver.

window.$ = window.jQuery = require('jquery'); 
var bootstrapjs = require('bootstrap-sass'); 

Answer 3

Bunu bir süredir merak ediyorum. Bu basit çözüm benim için işi yapar:

import foo from 'foo'; 
import bar from './bar'; 
import { default as $ } from "jquery"; 
global.$ = $; 
global.jQuery = $; // This one does the trick for bootstrap! 
// Boostrap's jQuery dependency only works with require, not with ES6 import! 
const btp = require('bootstrap'); 

Answer 4

Yani Browserify CSS transforms birini ihtiyacımız olacak Browserify çalışmak Bootstrap yapmak.

İlk önce.js (browserify giriş)

// Bootstrap needs jQuery on the Window 
window.jQuery = $ = require('jquery'); 
// include popper.js if you want Bootstrap tooltips 
window.Popper = require('popper.js'); 
// include bootstrap js libs (not the CSS libs as yet) 
require('bootstrap'); 
// then the CSS Lib 
require('bootstrap/dist/css/bootstrap.css'); 

NPM Kurulum: küresel

npm install bootstrap@4.0.0-alpha.6 jquery popper.js 

kullanmak için ipuçları: Bootstrap docs Başına

.

$('[data-toggle="popover"]').popover(); 

Ben Browserify-Budo repo here var. Eğer onu görmek istiyorsan.