使用Bower

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来使用slick来连接jquery。我检查了最终文件，jquery排在第一位，最后是光滑的。文件名是build.js

3. 我将自己的custom.js与build.js合并到一个最终的all.js中（我的代码就在最后）。

4. 我从我的html头部引用all.js。我可以检查页面源并按照链接查看我的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）。

现在 NOTHING 发生了，我从控制台日志中收到此错误：“未捕获的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分开时，事情会有效，所以从google cdn调用jquery，并且从all.js调用我自己的jquery。但如果我这样做，凉亭变得绝对。

我想知道的是我如何使用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

我现在已经仔细研究了jquery served from the google CDN。它没有像bower下载的jquery那样define( [...], function( jQuery )（参见更新二）。

这种有道理。 define数组中的所有内容都存在于./bower_components/jquery/src/文件夹中，但不存在于我的all.js所在的./web/javascript/文件夹中。查看下面的屏幕截图（full size picture here)：

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

Answer 1

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

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

相反，我这样做了：

1。首先，我使用$ bower list --paths

检查了jquery的正确路径

$ 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。然后我使用这些路径让gulp连接我的文件。以下代码来自我的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但是再次，在弓箭防守中，我可能只是在使用它时总是一个菜鸟......但不管怎样，我离题了。 / p>

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