ES6代码不适用于jQuery

我有一个es6 js文件，用作库。正如你所看到的，js文件依赖于jquery。我正在使用Webpack。ES6代码不适用于jQuery

在JS文件中，我在下面的行中导致了我在下面复制的最终es5代码中的_interopRequireWildcard。由于jquery不是esModule，在评估条件obj && obj.__esModule后，jQuery函数被复制到一个Object中。我也用打字机来使用这段代码。它适用于Typescript，但与es6失败。

ES6代码片段

import * as $ from 'jquery'; 

let setupObject = function setupObject(element) { 
let aButton = $(dropdownButtonSelector); //Fail's here with error 
        //Uncaught TypeError: $ is not a function 
} 
exports default setupObject;

Transpiled ES5代码

Object.defineProperty(exports, "__esModule", { 
value: true 
}); 

var _jquery = __webpack_require__(1); 

var $ = _interopRequireWildcard(_jquery); 

function _interopRequireWildcard(obj) { 
    if (obj && obj.__esModule) { //obj.__esModule = undefined for jquery 
    return obj; 
} else { 
    var newObj = {}; 
    if (obj != null) { 
     for (var key in obj) { 
      if (Object.prototype.hasOwnProperty.call(obj, key)) 
       newObj[key] = obj[key]; 
     } 
    } 
    newObj.default = obj; 
    return newObj; 
    } 
} 

var setupObject = function setupObject(element) { 
var aButton = $(dropdownButtonSelector); //Fail's here with error 
        //Uncaught TypeError: $ is not a function 
} 
exports.default = setupObject;

来源

2016-05-13 randominstanceOfLivingThing

试试'从'jquery'导入$;' – nils

有什么区别？ – randominstanceOfLivingThing

它只针对默认导出，它被转换为commonJS作为'module.exports'（假设你的jQuery版本具有commonJS的钩子）。它工作吗？ – nils

您导入时，所有可用的进口和包装它们的对象：

import * as $ from 'jquery';

所以$可能会是这个样子：

{Animation: function Animation(...),Callback: function (...), Deferred: function(...), default: function(selector, context){}, fn: Object[0], .... }

因此您TypeError：

Uncaught TypeError: $ is not a function

（参见：http://www.2ality.com/2014/09/es6-modules-final.html#more_on_importing_and_exporting）

尝试使用下面的语句来代替，它只会导入default出口：

import $ from 'jquery';

由于您的jQuery可能仍然具有CommonJS导出（module.exports），因此它的导出将自动被babel映射到export default。

来源

2016-05-13 15:33:29 nils

'$'对象看起来不像'{default：function jQuery（）}'。正如你从'interopRequireWildcard'中的条件的其他部分看到的那样。所有的对象属性都被复制到一个新的空的文字对象中，然后返回。 – randominstanceOfLivingThing

它看起来像什么？ else部分只指定它是一个包含'obj'所有属性的新对象。 – nils

看起来像这样：'{Animation：function Animation（...），Callback：function（...），Deferred：function（...），default：function（selector，context）{}，fn：Object [ 0]，....}' – randominstanceOfLivingThing

我终于得到了同样的文件与es6和打字稿一起工作。我实际上更改了代码以使用require('jquery')而不是import $ from 'jquery'。因此，这里是最后的代码

最终ES6代码片段

var $ = require('jquery'); 
let setupObject = function setupObject(element) { 
    let aButton = $(dropdownButtonSelector); //Fail's here with error 
       //Uncaught TypeError: $ is not a function 
} 
exports default setupObject;

Transpiled ES5代码的WebPack使用这个作为ES6

'use strict'; 
Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 
var setupObject = function setupObject(element) { 
    var $ = __webpack_require__(1); 
    var aButton = $(dropdownButtonSelector); 
    ... 
}; 

exports.default = setupDropdown;

Transpiled ES5代码的WebPack使用这作为打字稿

!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports], __WEBPACK_AMD_DEFINE_RESULT__ = function (require, exports) { 
"use strict"; 
    var setupObject = function setupObject(element) { 
     var $ = __webpack_require__(10); 
     var aButton = $(dropdownButtonSelector); 
     ... 
    } 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    exports.default = setupDropdown; 
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));

来源

2016-05-13 15:48:45 randominstanceOfLivingThing

ES6代码不适用于jQuery

回答

相关问题