ES6 代码不适用于 jQuery

Posted 2023-03-13

【中文标题】ES6 代码不适用于 jQuery

【英文标题】：ES6 code not working with 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 的钩子）。有用吗？

【参考方案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__));