使用ES6导入时,"jQuery未定义"

Question

我的代码:

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'.

Answer 1

根据这条评论并将其应用于您的案例,当您做的时:

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

你实际上并没有使用命名导出.

问题在于,当您这样做import $ ...,import jQuery ...然后import 'owlCarousel'(依赖于jQuery)时,即使您window.jQuery = jquery在导入后立即声明,也会对它们进行评估jquery.这是ES6模块语义与CommonJS要求不同的方式之一.

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

创建文件 jquery-global.js

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

然后将其导入主文件中:

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

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

这样,您可以确保jQuery在owlCarousel加载之前定义全局.