"को परिभाषित परिभाषित नहीं है" त्रुटि जब बोवर

Question

साथ Jquery स्थापित करने

मैं jQuery स्थापित करने के लिए एक साथ slick-carousel साथ बोवर के साथ चारों ओर खेल रहा हूँ मेरे विवेक विनाश के किनारे पर है ..., लेकिन बातों से काम नहीं चलेगा । लेकिन मुझे कदम से अपने दृष्टिकोण कदम समझाओ।

1. यहां मेरी bower.json फ़ाइल है। दोनों घटकों

{ 
    "name": "the-lens", 
    "version": "0.0.1", 
    "dependencies": { 
    "slick-carousel": "^1.5.9", 
    "jquery": "^2.2.3" 
    }, 
    "private": true 
} 

2. स्थापित कर रहे हैं मैं bowcat का उपयोग चालाक साथ jQuery concat करने के लिए। मैंने अंतिम फ़ाइल की जांच की है, और jquery पहले आता है, आखिरी slick। फ़ाइल का नाम build.js

3. मैं build.js के साथ अपने my custom.js को अंतिम all.js में जोड़ता हूं (मेरा कोड बहुत अंत में आता है)।

4. मैं अपने एचटीएमएल हेड से all.js का संदर्भ देता हूं। मैं पेज स्रोत देख सकता हूं और लिंक का पालन कर सकता हूं और मैं देख सकता हूं कि मेरा all.js सही ढंग से लोड हो गया है।

5. मेरे एचटीएमएल में मैं जांचता हूं कि jquery को एक आंतरिक स्क्रिप्ट को बुद्धिमान किया गया है या नहीं। यह अलर्ट करता है "हाँ! आंतरिक से काम करता है"। अब तक सब ठीक है।

<script type="text/javascript" > 
 
    if (typeof jQuery == 'undefined') { 
 
    alert("Doesn't work from internal"); 
 
    } else { 
 
    alert("Yay! Works from internal"); 
 
} 
 
</script>

6. मैं अगर एक ही परीक्षण, मेरी बाहरी जावास्क्रिप्ट फ़ाइल से काम करता है इस मामले में देखने के लिए परीक्षण all.js (मेरे कोड jQuery और चालाक जैसे पिछले के बाद है) ।

अब कुछ नहीं होता है, और मैं अपने कंसोल लॉग से यह त्रुटि मिलती है: "Uncaught ReferenceError: परिभाषित all.js में निर्धारित नहीं है: 9844"

(function() { 
 
    if (typeof jQuery == 'undefined') { 
 
    alert("Doesn't work from external"); 
 
    } else { 
 
    alert("Yay! Works from external"); 
 
    } 
 
})();

अगर मैं अपने all.js से jquery हटाता हूं और इसके बजाय google cdn के साथ jquery लोड करता हूं, तो ऊपर से मेरा बाहरी परीक्षण काम करना शुरू कर देता है। जैसे मुझे एक चेतावनी के साथ दो चेतावनी बक्से मिलते हैं जो बाहरी से काम करते हैं, दूसरा आंतरिक से। यहां Google सीडीएन है जिसका उपयोग मैं

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

तो यह बताता है। किसी भी तरह चीजें काम करती हैं जब मैं अपनी जावास्क्रिप्ट को विभाजित करता हूं तो Google सीडीएन से jquery को बुलाया जाता है, और स्लिम और मेरा खुद को all.js. से बुलाया जाता है। लेकिन अगर मैं ऐसा बोवर पूर्ण हो जाता हूं।

मैं क्या जानना चाहता हूं कि मैं कैसे चालाक और jquery स्थापित करने के लिए बोवर का उपयोग कर सकता हूं, फिर उन्हें अपने स्वयं के जेएस के साथ एक बड़ी फ़ाइल में संयोजित करें और मेरे HTML से उस एकल स्क्रिप्ट को कॉल करें, इसलिए सबकुछ काम करता है (काम करता है == मेरी चेतावनी परीक्षण all.js से कहा जाता है)

अगर कुछ अस्पष्ट है या अधिक जानकारी की आवश्यकता है, तो टिप्पणियों में पूछने के लिए स्वतंत्र महसूस करें।

UDATE

JQuery संस्करण 2.2.0 के लिए बोवर के साथ स्थापित बदलने कुछ भी नहीं बदलता है ...

अद्यतन 2: 9844 से कोड all.js. में पंक्ति 1 यहाँ all.js

define([ 
 
\t "./core", 
 
\t "./selector", 
 
\t "./traversing", 
 
\t "./callbacks", 
 
\t "./deferred", 
 
\t "./core/ready", 
 
\t "./data", 
 
\t "./queue", 
 
\t "./queue/delay", 
 
\t "./attributes", 
 
\t "./event", 
 
\t "./event/alias", 
 
\t "./event/focusin", 
 
\t "./manipulation", 
 
\t "./manipulation/_evalUrl", 
 
\t "./wrap", 
 
\t "./css", 
 
\t "./css/hiddenVisibleSelectors", 
 
\t "./serialize", 
 
\t "./ajax", 
 
\t "./ajax/xhr", 
 
\t "./ajax/script", 
 
\t "./ajax/jsonp", 
 
\t "./ajax/load", 
 
\t "./event/ajax", 
 
\t "./effects", 
 
\t "./effects/animatedSelector", 
 
\t "./offset", 
 
\t "./dimensions", 
 
\t "./deprecated", 
 
\t "./exports/amd" 
 
], function(jQuery) { 
 

 
return (window.jQuery = window.$ = jQuery); 
 

 
});

अद्यतन 3

में 9844 होगा मैं अब jquery served from the google CDN पर एक करीबी नजर ले लिया है। इसमें define([...], function(jQuery) नहीं है जैसे बॉवर के साथ डाउनलोड की गई jquery है (अपडेट दो देखें)।

इस तरह की समझ में आता है। परिभाषित सरणी में उन सभी चीजें ./bower_components/jquery/src/ फ़ोल्डर में मौजूद हैं, लेकिन ./web/javascript/ फ़ोल्डर में नहीं, जहां मेरा all.js है। नीचे (full size picture here) स्क्रीनशॉट की जाँच करें:

प्रश्न कैसे मुझे लगता है कि समस्या का समाधान है ...

Answer 1

तो मैं अंत में पता लगा है कि क्या गलत था या बल्कि, मैं समाधान, नहीं सटीक समस्या पाया। ।

@evolutionxbox जैसा ऊपर टिप्पणी में कहा, समस्या bowcat साथ था। मुझे यकीन है कि क्या js यह jQuery फ़ोल्डर से चुनने के लिए फ़ाइल नहीं कर रहा हूँ, लेकिन यह निश्चित रूप से सही नहीं था।

इसके बजाय मैं इस किया था:

1. सबसे पहले मैं $ bower list --paths

$ bower list --paths 

'slick-carousel': [ 
    'bower_components/slick-carousel/slick/slick.min.js', 
    'bower_components/slick-carousel/slick/slick.css', 
    'bower_components/slick-carousel/slick/slick-theme.css', 
    'bower_components/slick-carousel/slick/fonts/*' 
], 
jquery: 'bower_components/jquery/dist/jquery.js' 

2. साथ jQuery के लिए सही पथ की जाँच की मैं तो इन रास्तों का इस्तेमाल किया घूंट मेरी फ़ाइलें जोड़ बजाय जाने के लिए। नीचे दिए गए कोड मेरी gulpfile.js

var gulp = require('gulp'), 
    concat = require('gulp-concat'); 

gulp.task('scripts', function() { 
    return gulp.src([ 
    './bower_components/jquery/dist/jquery.js', 
    './bower_components/slick-carousel/slick/slick.min.js', 
    './app/Resources/javascript/custom.js' 
    ]) 
    .pipe(concat('all.js')) 
    .pipe(gulp.dest('./web/js/')); 
}); 

3. मैं अपने $ gulp scripts आदेश भाग गया और अब मेरे all.js आंतरिक और बाह्य दोनों परीक्षण में सफ़ल से है।

निष्कर्ष: मैं गल्प की सिफारिश कर सकता हूं, लेकिन धनुष नहीं: पी लेकिन फिर, धनुष रक्षा में, मैं इसका उपयोग करने में कुल नोब हो सकता हूं ... लेकिन जो भी, मैं digress।

एक अच्छा दिन है दोस्तों। अगर आपके समाधान के लिए आपके कोई प्रश्न हैं तो टिप्पणी करने के लिए स्वतंत्र महसूस करें।