javascript - 即使 jQuery 是第一个导入的脚本，也未捕获 ReferenceError : jQuery is not defined,

Question

这个问题之前已经被问过Uncaught ReferenceError: jQuery is not defined和 Uncaught ReferenceError: $ is not defined?和 Test if jquery is loaded not using the document ready event

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

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 fork 出来的

我运行gulpserve: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

存在多个问题。

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

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

which 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 - jQuery is not defined 中提到的那样， jQuery v3.2.0 不知何故不兼容，所以我将其替换为 jQuery v1.9.1

这帮助我彻底解决了这个问题。 #学习新事物