“jQuery是未定义”当使用ES6导入

我的代码：“jQuery是未定义”当使用ES6导入

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

来源

2016-02-12 Serge

你用什么来加载/转储你的代码？ –

browserify＆babelify。这里被吞掉任务： gulp.task（ '编'，（）=> { 回报browserify（ { 条目：files.source.script，调试：生产，变换：[babelify.configure（{ '预置'：[ 'ES2015'] }）] } ） .bundle（） .pipe（源（ '的script.js'）） .pipe（缓冲液（）） .pipe（生产？ uglify（）：gutil.noop（）） .pipe（gulp.dest（files.dest.scripts）） .pipe（production？gutil.noop（）：livereload（））; }）; – Serge

如果您是在浏览器中执行此操作：https：//developer.mozilla.org/en/docs/web/javascript/reference/statements/import –

根据this comment并将其应用到你的情况，当你做：

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

你实际上并没有使用命名出口。

的问题是，当你做import $ ...，import jQuery ...然后import 'owlCarousel'（取决于jQuery），这些都是之前评估，即使你在导入jquery后立即宣布window.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全局。

来源

2016-10-02 19:19:04 Egel

“jQuery是未定义”当使用ES6导入

回答

相关问题