"Define is not defined" 使用 Bower 安装 Jquery 时出错

Question

我的理智濒临崩溃...

我正在尝试使用 bower 安装 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 与 slick 连接 jquery。我检查了最终文件， jquery 在前，slick在后。文件名为 build.js

3. 我将自己的 custom.js 与 build.js 组合成最终的 all.js （我的代码在最后）。

4. 我从我的 html 脑袋中引用了 all.js。我可以检查页面源并按照 link 进行操作，我可以看到我的 all.js 已正确加载。

5. 在我的 html 中，我检查 jquery 是否加载了内部脚本。它提醒 "Yay! Works from internal"。到目前为止一切顺利。

<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 和圆滑的，例如最后）。

现在没有发生，我从我的控制台日志中得到这个错误："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. 如果我从 all.js 中删除 jquery 并使用 google cdn 加载 jquery，我的上面的外部测试开始工作。例如。我收到两个警告框，其中一个提示来自外部，另一个来自内部。这是我使用的 google cdn

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

所以总结起来。当我将我的 javascript 拆分时，事情会以某种方式起作用，所以 jquery 是从 google cdn 调用的，而 slick 和我自己的是从 all.js 调用的。但如果我这样做，那个凉亭就变得绝对了。

我想知道的是如何使用 bower 安装 slick 和 jquery，然后将它们与我自己的 js 合并到一个大文件中，并从我的 html 调用该脚本，所以一切正常（有效 == 我的警报测试是从 all.js 调用的）

如果有什么不清楚或需要更多信息，请随时在评论中提问。

更新

将随 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。它没有 define( [...], function( jQuery )，就像用 Bower 下载的 jquery 一样（参见更新二）。

这个有点道理。定义数组中的所有内容都存在于 ./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 但是话又说回来，在 bowcats 防御中，我可能只是一个完全的菜鸟。 .. 但无论如何，我离题了。

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

"Define is not defined" 使用 Bower 安装 Jquery 时出错

"Define is not defined" error when installing Jquery with Bower

javascript

jquery

concatenation

bower

更新

更新 2：代码来自 all.js 中的 9844。这里的第 1 行是 all.js

更新 3