未捕获的ReferenceError:jQuery未定义,即使jQuery是第一个导入的脚本

时间:2017-04-14 23:41:59

标签: javascript jquery html gulp

Uncaught ReferenceError: jQuery is not definedUncaught 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

分叉的

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

我做错了什么?

2 个答案:

答案 0 :(得分:1)

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

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

})(window.jQuery);

答案 1 :(得分:0)

存在多个问题。

首先,在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 LeonjQuery v3.2.0所述,jQuery v1.9.1在某种程度上是不兼容的,因此我将其替换为i = 0; while(i < 5) { vector<int> vectorArr(some_size); ... i++; }

这有助于我完全解决问题。 #learnednewthings