我的代码:
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'。
根据this comment并将其应用于您的案例,当您这样做时:
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
全局。