Question

即使jQuery首先导入脚本

2017-04-14

3973

javascript jquery html gulp

这个问题之前已经被问过 Uncaught ReferenceError: jQuery is not defined 和 Uncaught ReferenceError: $ is not defined? 和测试 jquery 是否未使用 document ready 事件加载

但是，我在浏览器中发现错误为

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

存在多个问题。

首先，在 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 - jQuery is not defined 中提到的那样， jQuery v3.2.0 在某种程度上不兼容，因此我将其替换为 jQuery v1.9.1

这帮助我彻底解决了这个问题。#learnednewthings

Answer 2

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

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

})(window.jQuery);