未捕获的ReferenceError：即使jQuery是第一个导入的脚本，也未定义jQuery

Question

在未定义的 ReferenceError： 未定义jQuery和未定义的 ReferenceError：$之前，已问过此问题？ 并测试是否加载了jQuery，而不使用文档就绪事件

但是，我发现浏览器上的错误为

main.js:88 Uncaught ReferenceError: jQuery is not defined
    at main.js:88

我的main.js看起来像

(function($) {
  'use strict';
 // all functions here

})(jQuery);

我在index.html为

<!-- build:js scripts/main.min.js -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!--<script src="scripts/vendors/jquery3.2.0.min.js"></script>-->
  <script src="scripts/vendors/waypoints.min.js"></script>
  <script src="scripts/main.js"></script>
  <!-- endbuild -->

因此，根据其他答案，首先导入jQuery 。 我正在使用gulp作为构建系统。
我的项目来自https://github.com/google/web-starter-kit

我运行gulp serve:dist看看

$ gulp serve:dist
[11:31:41] Requiring external module babel-register
[11:31:43] Using gulpfile ~/WebstormProjects/my-website/gulpfile.babel.js
[11:31:43] Starting 'clean'...
[11:31:43] Finished 'clean' after 27 ms
[11:31:43] Starting 'default'...
[11:31:43] Starting 'styles'...
[11:31:43] styles all files 7.41 kB
[11:31:43] Finished 'styles' after 869 ms
[11:31:43] Starting 'html'...
[11:31:44] Starting 'scripts'...
[11:31:44] Starting 'images'...
[11:31:44] Starting 'copy'...
[11:31:44] html index-rwd.html 14.96 kB
[11:31:44] html index.html 3.94 kB
[11:31:44] html all files 18.9 kB
[11:31:44] Finished 'html' after 401 ms
[11:31:45] scripts all files 99.11 kB
[11:31:45] Finished 'scripts' after 1.83 s
[11:31:45] copy all files 6.11 kB
[11:31:45] Finished 'copy' after 1.64 s
[11:31:45] images all files 542.87 kB
[11:31:45] Finished 'images' after 1.79 s
[11:31:45] Starting 'copy-sw-scripts'...
[11:31:45] Finished 'copy-sw-scripts' after 3.05 ms
[11:31:45] Starting 'generate-service-worker'...
Total precache size is about 222 B for 1 resources.
[11:31:45] Finished 'generate-service-worker' after 8.64 ms
[11:31:45] Finished 'default' after 2.85 s
[11:31:45] Starting 'serve:dist'...
[11:31:45] Finished 'serve:dist' after 19 ms
[WSK] Access URLs:
 -------------------------------------
       Local: http://localhost:3001
    External: http://192.168.1.65:3001
 -------------------------------------
          UI: http://localhost:3002
 UI External: http://192.168.1.65:3002
 -------------------------------------
[WSK] Serving files from: dist/public

我究竟做错了什么？

Answer 1

您可以尝试使用它。 您是否在多个浏览器中遇到相同的错误？

(function($) {
  'use strict';
 // all functions here

})(window.jQuery);

Answer 2

有多个问题。

首先，在index.html ，我删除了该部分

<!-- build:js scripts/main.min.js -->
<!-- endbuild -->

gulp用于合并JS并将它们缩小为1个文件。 解决方法是添加以下内容

<!-- build:js scripts/main.min.js -->
  <script src="scripts/vendors/jquery-1.9.1.min.js"></script>
  <script src="scripts/vendors/waypoints.min.js"></script>
  <script src="scripts/main.js"></script>
  <!-- endbuild -->

其次，在gulp scripts任务中，我必须告诉gulp所有要复制的脚本。 该修复程序看起来像

gulp.task('scripts', () =>
  gulp.src([
    // Note: Since we are not using useref in the scripts build pipeline,
    //       you need to explicitly list your scripts here in the right order
    //       to be correctly concatenated
    './app/scripts/vendors/jquery-1.9.1.min.js',
    './app/scripts/vendors/waypoints.min.js',
    './app/scripts/main.js'
    // Other scripts
  ])

最后，正如@Wolfgang Leon在Gulp中提到的@Wolfgang Leon -尚未定义 jQuery v3.2.0 ， jQuery v3.2.0某种程度上是不兼容的，因此我将其替换为jQuery v1.9.1

这有助于我彻底解决此问题。 #learnednewthings