使用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分開時，事情會有效，所以從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

我現在已經仔細研究了谷歌CDN提供的jquery 。 它沒有像bower下載的jquery那樣define( [...], function( jQuery ) （參見更新二）。

這種做法很有道理。 define數組中的所有內容都存在於./bower_components/jquery/src/文件夾中，但不存在於我的all.js所在的./web/javascript/文件夾中。 查看下面的截圖（ 此處全尺寸圖片） ：

問題是我如何解決這個問題......

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.然后我用這些路徑，讓吞掉我的拼接文件，而不是。 以下代碼來自我的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但是再次，在弓箭防守中，我可能只是在使用它時總是一個菜鳥......但無論如何，我離題了。

祝大家有個美好的一天。 如果您對我的解決方案有任何疑問，請隨時發表評論。