使用Bower安装Jquery时出现"定义未定义"错误

Question

我的理智处于毁灭的边缘......

我正在玩bower与slick-carousel一起安装jQuery ,但事情不会奏效.但是让我一步一步地解释我的方法.

1.这是我bower.json文件.两个组件都已安装

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

2.我用bowcat到Concat的jQuery的用油滑.我已经检查了最终文件,并且jquery排在第一位,最后是光滑的.文件名是build.js

3.我将自己的custom.js与build.js组合成一个最终的all.js(我的代码在最后).

4.我引用all.js从我的HTML头.我可以检查页面源并按照链接,我可以看到我的all.js已正确加载.

5.在我的html中,我检查是否在内部脚本中加载了jquery.它警告"耶!从内部工作".到现在为止还挺好.

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

6.我测试以查看相同的测试是否适用于我的外部javascript文件,在这种情况下是all.js(我的代码在jquery和slick之后,例如last).

现在没有发生,我从我的控制台日志中收到此错误:"未捕获的ReferenceError:未在all.js中定义:9844"

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

7.如果我从all.js中删除jquery并使用google cdn加载jquery,我上面的外部测试开始工作.例如,我得到两个警告框,其中一个说来自外部,另一个来自内部.这是我使用的谷歌cdn

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

总结起来.不知何故,当我将你的javascript分开时,事情有效,所以jquery从谷歌cdn调用,而且我的自己从all.js调用了.但如果我这样做,凉亭变得绝对.

我想知道的是我如何使用bower来安装光滑和jquery,然后将它们与我自己的js组合成一个大文件并从我的html中调用该单个脚本,所以一切正常(工作==我的警报测试从all.js)

如果某些事情不清楚或需要更多信息,请随时在评论中提问.

UDATE

将使用bower安装的JQuery版本更改为2.2.0不会改变任何内容......

更新2:all.js中9844的代码 这里的第1行在all.js中是9844

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

} );

更新3

我现在已经仔细研究了谷歌CDN提供的jquery.它没有define( [...], function( jQuery )像bower下载的jquery那样(参见更新二).

这种做法很有道理.define数组中的所有内容都存在于./bower_components/jquery/src/文件夹中,但不存在于./web/javascript/我的all.js所在的文件夹中.查看下面的截图(此处全尺寸图片):

问题是我如何解决这个问题......

Answer 1

所以我终于弄清楚出了什么问题.或者说,我找到了解决方案,而不是确切的问题.

就像@evolutionxbox在上面的评论中指出的那样,问题出在bowcat上.我不确定它从jquery文件夹中选择哪个js文件,但它肯定不是正确的.

相反,我做了这个:

1.首先,我检查了jquery的正确路径$ 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.然后我用这些路径,让吞掉我的拼接文件,而不是.以下代码来自我的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通过内部和外部测试.

结论:我可以推荐gulp,但不能推荐bowcat:P但是再次,在弓箭防守中,我可能只是在使用它时总是一个菜鸟......但无论如何,我离题了.

祝大家有个美好的一天.如果您对我的解决方案有任何疑问,请随时发表评论.