关于 javascript:ES6 代码不适用于 jQuery


ES6 code not working with jQuery

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

在 JS 文件中，我在下面复制的最终 es5 代码中生成了 _interopRequireWildcard 行。由于 jquery 不是 esModule，在评估条件 obj && obj.__esModule 后，jQuery 函数被复制到一个对象。我也在typescript中使用此代码。它适用于 Typescript，但无法使用 es6。

ES6 代码片段

1
2
3
4
5
6
7
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 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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;
相关讨论

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

1
import * as $ from 'jquery';

所以 $ 可能看起来像这样：

1
{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 导出：

1
import $ from 'jquery';

因为你的 jQuery 可能还有 CommonJS 导出(module.exports)，它的导出会被 babel 自动映射到 export default。

相关讨论

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

最终的 ES6 代码片段

1
2
3
4
5
6
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

1
2
3
4
5
6
7
8
9
10
11
'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 代码，将其用作typescript

1
2
3
4
5
6
7
8
9
10
 !(__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__));