ES6 代码不适用于 jQuery

Question

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

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

未捕获的类型错误：$ 不是函数

（参见：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。