[英]Uncaught ReferenceError: jQuery is not defined, even though jQuery is first imported script
This question has been asked before Uncaught ReferenceError: jQuery is not defined and Uncaught ReferenceError: $ is not defined? 在未定义的 ReferenceError: 未定义jQuery和未定义的 ReferenceError:$之前,已问过此问题? and Test if jquery is loaded not using the document ready event
并测试是否加载了jQuery,而不使用文档就绪事件
But, I find the error on browser as 但是,我发现浏览器上的错误为
main.js:88 Uncaught ReferenceError: jQuery is not defined
at main.js:88
My main.js
looks like 我的
main.js
看起来像
(function($) {
'use strict';
// all functions here
})(jQuery);
I make imports in my index.html
as 我在
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 -->
So, as per the other answers, jQuery
is first import. 因此,根据其他答案,首先导入
jQuery
。 I am using gulp
as build system. 我正在使用
gulp
作为构建系统。
My project is forked from https://github.com/google/web-starter-kit 我的项目来自https://github.com/google/web-starter-kit
I run gulp serve:dist
and see 我运行
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
What am I doing wrong? 我究竟做错了什么?
You could try using this instead. 您可以尝试使用它。 Do you get the same error in multiple browsers?
您是否在多个浏览器中遇到相同的错误?
(function($) {
'use strict';
// all functions here
})(window.jQuery);
There were multiple problems. 有多个问题。
First, in the index.html
, I removed the section 首先,在
index.html
,我删除了该部分
<!-- build:js scripts/main.min.js -->
<!-- endbuild -->
which gulp
uses to combine JS
and minify them in 1 file. gulp
用于合并JS
并将它们缩小为1个文件。 The fix was to add the following 解决方法是添加以下内容
<!-- 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 -->
Secondly, in gulp
scripts
task, I had to tell gulp
as to what all scripts to copy. 其次,在
gulp
scripts
任务中,我必须告诉gulp
所有要复制的脚本。 The fix looked like 该修复程序看起来像
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
])
Lastly, as mentioned by @Wolfgang Leon
in Gulp - jQuery is not defined , the jQuery v3.2.0
was somehow incompatible, so I replaced it with jQuery v1.9.1
最后,正如
@Wolfgang Leon
在Gulp中提到的@Wolfgang Leon
-尚未定义 jQuery v3.2.0
, jQuery v3.2.0
某种程度上是不兼容的,因此我将其替换为jQuery v1.9.1
This helped me fix the issue completely. 这有助于我彻底解决此问题。 #learnednewthings
#learnednewthings
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.