[英]Uncaught ReferenceError: jQuery is not defined, even though jQuery is first imported script
在未定義的 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
我究竟做錯了什么?
您可以嘗試使用它。 您是否在多個瀏覽器中遇到相同的錯誤?
(function($) {
'use strict';
// all functions here
})(window.jQuery);
有多個問題。
首先,在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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.