ट्विटर बूटस्ट्रैप

Question

के साथ ब्राउज़र बनाएं स्टैक ओवरफ़्लो पर उत्तर सहित कई समान प्रश्न हैं, लेकिन उनमें से कोई भी मेरे लिए काम नहीं कर रहा है, इसलिए यहां मैं आपसे पूछ रहा हूं। मैं हर किसी के समय की सराहना करता हूं।

मैंने हाल ही में ब्राउज़र के साथ गल्प का उपयोग करना शुरू किया, और यह बहुत अच्छा काम करता है। मैंने फिर फ्रंट एंड के लिए ब्राउजरिफ़ का उपयोग करने का प्रयास किया: बैकबोन और बूटस्ट्रैप 3।

चीजें काम करने के लिए दिखाई दे रही हैं, जब तक कि मैं बूटस्ट्रैप के साथ जेएस फ़ाइल की आवश्यकता नहीं लेता। मुझे बताते हुए मेरे क्रोम टूल्स में एक त्रुटि मिलती है: jQuery अनिर्धारित है।

मैंने इसे तैरने का प्रयास किया है, लेकिन मैं शिम से बहुत उलझन में हूं। मैं jQuery 2.1.1 का उपयोग कर रहा हूं, इसलिए मुझे jQuery को झुकाव करने की आवश्यकता नहीं है, लेकिन यह अब शिम में मौजूद है, क्योंकि मैं बेहोश था और सबकुछ कोशिश कर रहा था। यहां मेरा पैकेज है। जेसन और मेरी main.js फ़ाइल:

-------------- package.json ---------------- -

{ 
    "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

अगर आप इसे NPM साथ स्थापित किया है तुम jQuery कि जिस तरह से शिम की जरूरत नहीं होनी चाहिए। एक परियोजना के लिए निम्नलिखित कार्य मैं लिख रहा हूं:

मैंने यह भी सीखा है कि बूटस्ट्रैप के लिए एनपीएम का उपयोग करना एक पिटा है। मैं कुछ फ्रंट-एंड घटकों को स्थापित करने और बनाए रखने के लिए बोअर का उपयोग कर रहा हूं, जब उन्हें इस तरह से छिड़काव की आवश्यकता होती है।

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) 

इसके अलावा - एक कभी कभी उपयोगी चीज browserify-शिम उत्पादन इसके निदान है।

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

त्रुटि के रूप में मैं browserify जो चर '$' या 'jQuery' से परिभाषित करने की आवश्यकता का उपयोग कर रहा है: इस तरह क्या मेरी browserify.js काम दिखता है।

इसे वैश्विक रूप से त्रुटि को हल करने के लिए विंडो जोड़ना। सुनिश्चित नहीं है कि यह करने का सही तरीका होगा, यदि नहीं, तो मुझे बताएं।

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

Answer 3

मैं थोड़ी देर के लिए इस बारे में सोच रहा हूं। यह सरल समाधान मेरे लिए काम करता है:

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

तो Browserify के साथ काम करने के लिए आप Browserify CSS transforms में से एक की जरूरत के लिए जा रहे Bootstrap बनाने के लिए।

पहला सूचकांक।js (browserify प्रविष्टि)

// 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 इंस्टॉल:

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

टूलटिप्स उपयोग करने के लिए विश्व स्तर पर:

प्रति बूटस्ट्रैप docs।

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

मैं एक Browserify-Budo रेपो here है। यदि आप इसे काम करना चाहते हैं।