javascript - ES6 代码不适用于 jQuery

Question

我有一个用作库的 es6 js 文件。如您所见，js 文件依赖于 jquery。我正在使用 Webpack。

在 JS 文件中，我在下面的行中生成了我在下面复制的最终 es5 代码中的 _interopRequireWildcard。由于 jquery 不是 esModule，在评估条件 obj && obj.__esModule 之后，jQuery 函数被复制到一个对象。我也将此代码与 typescript 一起使用。它适用于 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;

转译的 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;

Answer 1

您的导入获取所有可用的导入并将它们包装在一个对象中:

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。