ES6 代码不适用于 jQuery答案

【问题标题】：ES6 code not working with jQueryES6 代码不适用于 jQuery
【发布时间】：2016-09-09 20:46:48
【问题描述】：

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

在 JS 文件中，我在下面复制的最终 es5 代码中有以下行导致 _interopRequireWildcard。由于 jquery 不是 esModule，在评估条件 obj && obj.__esModule 之后，jQuery 函数被复制到一个对象。我也将此代码与打字稿一起使用。它适用于 Typescript，但适用于 es6。

ES6代码sn-p

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;

【问题讨论】：

试试import $ from 'jquery';
有什么区别？
它只针对默认导出，它作为module.exports 被转换为commonJS（假设你的jQuery 版本有commonJS 的钩子）。有用吗？

标签： javascript jquery typescript ecmascript-6 webpack

【解决方案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。

【讨论】：

$ 对象看起来不像 {default: function jQuery()}。正如您从 interopRequireWildcard 中条件的 else 部分看到的那样。所有对象属性都被复制到一个新的空字面量对象中，然后返回该对象。
它看起来像什么？ else部分只指定它是一个新对象，具有obj的所有属性。
看起来像这样：{Animation: function Animation(...),Callback: function (...), Deferred: function(...), default: function(selector, context){}, fn: Object[0], .... }
感谢您以反对票的形式提供反馈。如果您能详细说明原因，也许我什至可以从中学到一些东西。
好吧，这适用于 es6，但使用打字稿失败。当我使用 var $=require('jquery') 时，两者都适用

【解决方案2】：

我终于得到了同一个文件，同时使用 es6 和 typescript。我实际上将代码更改为使用require('jquery') 而不是import $ from 'jquery'。所以这里是最终代码

最终的 ES6 代码 sn-p

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;

使用 Webpack 转译 ES5 代码，将其用作 es6

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

exports.default = setupDropdown;

使用 Webpack 转译 ES5 代码，将其用作打字稿

 !(__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__));

【讨论】：