admin管理员组文章数量:1345128
My sanity is on the edge of destruction...
I'm playing around with bower to install jQuery together with slick-carousel, but things won't work. But let me explain my approach step by step.
1. Here is my bower.json file. Both ponents are installed
{
"name": "the-lens",
"version": "0.0.1",
"dependencies": {
"slick-carousel": "^1.5.9",
"jquery": "^2.2.3"
},
"private": true
}
2. I use bowcat to concat jquery with slick. I have checked the final file, and jquery es first, slick last. The file name is build.js
3. I bine my own custom.js with build.js into a final all.js (my code es at the very end).
4. I reference all.js from my html head. I can check page source and follow the link and I can see my all.js is correctly loaded.
5. In my html I check if jquery is loaded witn an internal script. It alerts "Yay! Works from internal". So far so good.
<script type="text/javascript" >
if (typeof jQuery == 'undefined') {
alert("Doesn't work from internal");
} else {
alert("Yay! Works from internal");
}
</script>
My sanity is on the edge of destruction...
I'm playing around with bower to install jQuery together with slick-carousel, but things won't work. But let me explain my approach step by step.
1. Here is my bower.json file. Both ponents are installed
{
"name": "the-lens",
"version": "0.0.1",
"dependencies": {
"slick-carousel": "^1.5.9",
"jquery": "^2.2.3"
},
"private": true
}
2. I use bowcat to concat jquery with slick. I have checked the final file, and jquery es first, slick last. The file name is build.js
3. I bine my own custom.js with build.js into a final all.js (my code es at the very end).
4. I reference all.js from my html head. I can check page source and follow the link and I can see my all.js is correctly loaded.
5. In my html I check if jquery is loaded witn an internal script. It alerts "Yay! Works from internal". So far so good.
<script type="text/javascript" >
if (typeof jQuery == 'undefined') {
alert("Doesn't work from internal");
} else {
alert("Yay! Works from internal");
}
</script>
6. I test to see if the same test works from my external javascript file, in this case the all.js (my code es after jquery and slick e.g. last).
Now NOTHING happens, and I get this error from my console log: "Uncaught ReferenceError: define is not defined in all.js:9844"
(function() {
if (typeof jQuery == 'undefined') {
alert("Doesn't work from external");
} else {
alert("Yay! Works from external");
}
})();
7. If I remove jquery from my all.js and load jquery with the google cdn instead, my external test from above starts to work. E.g. I get two alert boxes with one saying works from external, the other from internal. Here is the google cdn I use
<script src="https://ajax.googleapis./ajax/libs/jquery/2.2.0/jquery.min.js"></script>
So that sums it up. Somehow things work when I split my javascript up so jquery is called from the google cdn, and slick and my own is called from all.js. But if I do that bower bees absolute.
What I want to know is how I can use bower to install slick and jquery, then bine them with my own js into one big file and call that single script from my html, so everything works (works == my alert test is called from all.js)
If something is unclear or more information is needed, feel free to ask in the ments.
UDATE
Changing the JQuery version installed with bower to 2.2.0 changes nothing...
UPDATE 2: Code from 9844 in all.js. Line 1 here would be 9844 in all.js
define( [
"./core",
"./selector",
"./traversing",
"./callbacks",
"./deferred",
"./core/ready",
"./data",
"./queue",
"./queue/delay",
"./attributes",
"./event",
"./event/alias",
"./event/focusin",
"./manipulation",
"./manipulation/_evalUrl",
"./wrap",
"./css",
"./css/hiddenVisibleSelectors",
"./serialize",
"./ajax",
"./ajax/xhr",
"./ajax/script",
"./ajax/jsonp",
"./ajax/load",
"./event/ajax",
"./effects",
"./effects/animatedSelector",
"./offset",
"./dimensions",
"./deprecated",
"./exports/amd"
], function( jQuery ) {
return ( window.jQuery = window.$ = jQuery );
} );
UPDATE 3
I have now taken a close look at the jquery served from the google CDN. It does not have the define( [...], function( jQuery )
like the jquery downloaded with bower has (see update two).
This kind of makes sense. All those things in the define array is present in the ./bower_ponents/jquery/src/
folder, but not in the ./web/javascript/
folder where my all.js is. Check screenshot below (full size picture here):
Question is how I solve that problem...
Share Improve this question edited Apr 19, 2016 at 16:58 MartinJH asked Apr 19, 2016 at 15:49 MartinJHMartinJH 2,6096 gold badges38 silver badges50 bronze badges 4-
What is on line
9844
? it looks like you are trying to use a function calleddefine
but in your example you do not such thing – Tuvia Commented Apr 19, 2016 at 16:13 - 1 Sounds like bowcat isn't actually concatenating the JS properly, and is still leaving in the require function calls. – evolutionxbox Commented Apr 19, 2016 at 16:13
- When I check the all.js file, define is declared. Or so it seems to me. Check answer for code (adding it right now) – MartinJH Commented Apr 19, 2016 at 16:15
-
it seems as if your library for defining your
define
function (require?) was not loaded. – Tuvia Commented Apr 19, 2016 at 17:04
1 Answer
Reset to default 6So I finally figured out what was wrong. Or rather, I found the solution, not the exact problem.
Like @evolutionxbox pointed out in the ments above, the problem was with bowcat. I'm not sure what js file it choose from the jquery folder, but it certainly wasn't the correct one.
Instead I did this:
1. First I checked the correct path to jquery with $ bower list --paths
$ bower list --paths
'slick-carousel': [
'bower_ponents/slick-carousel/slick/slick.min.js',
'bower_ponents/slick-carousel/slick/slick.css',
'bower_ponents/slick-carousel/slick/slick-theme.css',
'bower_ponents/slick-carousel/slick/fonts/*'
],
jquery: 'bower_ponents/jquery/dist/jquery.js'
2. I then used these paths to let gulp concatenate my files instead. The below code is from my gulpfile.js
var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src([
'./bower_ponents/jquery/dist/jquery.js',
'./bower_ponents/slick-carousel/slick/slick.min.js',
'./app/Resources/javascript/custom.js'
])
.pipe(concat('all.js'))
.pipe(gulp.dest('./web/js/'));
});
3. I ran my $ gulp scripts
mand and now my all.js passes both the internal and external test.
Conclusion: I can remend gulp, but not bowcat :P But then again, in bowcats defence, I might just be a total noob at using it... But whatever, I digress.
Have a nice day folks. Feel free to ment if you have any questions to my solution.
本文标签: javascriptquotDefine is not definedquot error when installing Jquery with BowerStack Overflow
版权声明:本文标题:javascript - "Define is not defined" error when installing Jquery with Bower - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1743796062a2540454.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论