本文介绍了使用ES6导入时,“jQuery未定义”的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

我的代码:

import $ from 'jquery'
import jQuery from 'jquery'
import owlCarousel from '../../node_modules/owlcarousel/owl-carousel/owl.carousel'

class App {
    …
    _initSlider() {
        $("#partners-carousel").owlCarousel();
    }
}

我在浏览器控制台中未定义jQuery 。怎么了?
我可以在这个类的方法中使用jQuery作为$,但不能使用名称'jQuery'。

I have 'jQuery is not defined' in browser console. What's wrong?I can use jQuery as $ in methods of this class, but not with name 'jQuery'.

推荐答案

根据 并将其应用于您的case,当你在做的时候:

According to this comment and apply it to your case, when you're doing:

import $ from 'jquery'
import jQuery from 'jquery'

您实际上并未使用命名导出。

you aren't actually using a named export.

问题在于当你执行 import $ ... import jQuery ... 然后导入'owlCarousel'(这取决于 jQuery ),这些都是以前评估的,即使你导入 jquery 后立即声明 window.jQuery = jquery 。这是ES6模块语义与CommonJS要求的不同之处。

解决这个问题的一种方法是改为:

One way to get around this is to instead do this:

创建文件 jquery-global.js

// jquery-global.js
import jquery from 'jquery';
window.jQuery = jquery;
window.$ = jquery;

然后将其导入主文件中:

then import it in you main file:

// main.js
import './jquery-global.js';
import 'owlCarousel' from '../../node_modules/owlcarousel/owl-carousel/owl.carousel'

class App {
  ...
  _initSlider() {
    $("#partners-carousel").owlCarousel();
  }
}

这样你可以确保 jQuery global在加载 owlCarousel 之前定义。

That way you make sure that the jQuery global is defined before owlCarousel is loaded.

这篇关于使用ES6导入时,“jQuery未定义”的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-06 12:52