未捕获的 ReferenceError：jQuery 未在 eval 中定义

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 全局变量在访问时未定义，因为在 window.jQuery = jQuery 之前评估了 import './assets/js/navbar.js' 行。 jquery 不包含 $ 等导出，全局变量将是 undefined 任何方式。

将 jQuery 赋值移动到 import 上方是不正确的，因为 import 语句被规范提升了。

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

更正确的做法是在模块化环境中不依赖全局变量，将它们导入依赖它们的模块中：

import jQuery from 'jquery';