使用 Webpack 的 Angular Directive 自定义 jQuery 插件

Question

我试图要求一个自定义 jquery 插件用于 Webpack 的指令元素。我开始按照我预期的方式实施。

// example.directive.js

var customJQPlugin = require('./customJQPlugin.plugin');

...

  link: function (scope, elem) {
    angular.element(elem).customJQPlugin({
      some: 'options'
    });
  }

...

这会将插件应用于元素。

然后是插件文件（与指令在同一目录中）

// customJQPlugin.plugin.js

(function ($) {

  $.fn.customJQPlugin = function (options) {
    var el = this;
    ...
  }

})(jQuery)

我的问题是，执行此操作的典型方法是什么，我目前有一些错误，其中 this 未定义，customJQPlugin is not a function 链接到 angular.element(elem).customJQPlugin(options)

这更多的是关于如何以 Webpack 可以require 的方式构造 jQuery 插件文件，以便将其应用于角度指令。我确定这不需要 IIFE，但不确定如何为 Webpack 重构。

编辑：假设 jQuery 和 $ 是全球可用的

Answer 1

我找到了一种让它工作的方法，但我不确定它是否是最好的方法。

// customJQPlugin.plugin.js

module.exports = function (options) { ... }

然后在我的指令文件中，我可以执行以下操作：

$.fn.customJQPlugin = require('./customJQPlugin.plugin');

...

link: function() {
  $(elem).customJQPlugin({
    some: 'options'
  });
}

....

我仍然有一些错误，但这看起来更有可能与问题无关。

这不是最干净的，但它确实有效，如果我发现更多信息会更新。