Question

我正在尝试将jQuery插件导入到单个Angular组件中。它在所有其他浏览器中运行，但是IE 11对它进行了扼流：

SCRIPT1002: Syntax error
main.bundle.js (1376,1)

当我点击错误时，它会显示问题所在：

eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(\"../../../../jquery/dist/jquery.js\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_core__ = __webpack_require__(\"../../../core/esm5/core.js\");\n// require('jquery');\n\n\n\n/*\ndjaodjin-annotate.js...

这不是全部，但它似乎与导入jQuery有关，事实上，当我删除jQuery导入时，它运行正常。

问题可能是我将jQuery导入JavaScript（.js）文件，这是一个jQuery插件。这是它的简化版本：

import * as jQuery from 'jquery';

(function($) {
  'use strict';

  function Annotate(el, options) {
    this.init();
  }
  Annotate.prototype = {
    init: function() {
      console.log('It\'s working.');
    },
  };
  $.fn['annotate'] = function() {

    const annotate = new Annotate($(this));

    return annotate;
  };
})(jQuery);

如果我无法将jQuery导入jQuery插件，我该如何使用jQuery插件？有办法解决这个问题吗？

顺便说一下，我只在一个组件中使用jQuery。应用程序的其余部分是干净的。

Answer 1

我说你不需要在你的插件中导入jQuery;你的插件应该假设jquery已被包含并且如果它没有

则失败

您可以将jquery（第一个）和插件文件包含到项目中。然后在你的组件中声明jquery

declare let $ : any;

并实例化你的插件

$('div').annotate();

Answer 2

我实际上发现我的jQuery插件中有错误。它有几行ES6语法，IE并不喜欢。但是当Webpack编译它时，它会将整个事物变成一个字符串，所有这一切都在一行上。然后，在运行时，它会在字符串上运行eval()。因此，您不会收到包含行号的重要错误消息。它只是给你我得到的愚蠢错误。但我认为@David有一个好点。我们可能不需要导入jQuery。

如何将jQuery导入Angular 2+ / Webpack / Angular CLI中的jQuery插件

2 个答案: