未捕获的ReferenceError: jQuery在计算时未定义

Question

我已经在main.js文件中导入了jQuery，但它仍然抛出此错误

Uncaught ReferenceError: jQuery is not defined at eval (navbar.js)

我无法解决这个问题。我尝试了所有可能的方法在main.js中导入

我在public/index.html文件中使用了jQuery CDN链接，这个错误消失了，但navbar.js文件中的导航栏脚本根本不起作用。

使用npm npm install jquery --save安装了jquery

navbar.js

(function ($) {
    'use strict';

    if ($.fn.kanglaNav) {
        $('#bigNavBar').kanglaNav();
    }

    $(".kangla-navbar-toggler").on("click", function () {
        $(".top-header").toggleClass("z-index-reduce");
    });

})(jQuery);

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/css/style.css'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './assets/css/kangla-nav.min.css'
import './assets/css/animate.css'
import '../node_modules/magnific-popup/dist/magnific-popup.css'
import './assets/js/popper.min.js'
import '../node_modules/bootstrap/dist/js/bootstrap.min.js'
import './assets/js/kangla-nav.min.js'
import '../node_modules/magnific-popup/dist/jquery.magnific-popup.min.js'
import './assets/js/navbar.js'

const { $, jQuery } = require('jquery')
window.$ = $
window.jQuery = jQuery

new Vue({
    router,
    store,
    render: (h) => h(App)
}).$mount('#app')

Answer 1

jQuery全局变量在被访问时是未定义的，因为import './assets/js/navbar.js'行在window.jQuery = jQuery之前求值。jquery不包含$等导出，全局变量将以任何方式为undefined。

将jQuery赋值移到import之上是不正确的，因为规范会提升import语句。

解决这个问题的一种方法是将window.jQuery = jQuery移动到jquery.js，并在依赖它的模块之前导入它。

更正确的方法是在模块化环境中不依赖全局变量，并将其导入依赖于全局变量的模块中：

import jQuery from 'jquery';