Verwenden Sie benutzerdefinierte jQuery-Plugin für Winkeldirektive mit Webpack

Question

Ich versuche, ein benutzerdefiniertes jquery-Plugin für die Verwendung auf einem Element der Direktive mit Webpack erforderlich. Ich begann mit der Umsetzung, so wie ich es erwartet hatte.

// example.directive.js 

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

... 

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

... 

Dies würde das Plugin auf das Element anwenden.

und dann die Plugin-Datei (in demselben Verzeichnis wie Richtlinie)

// customJQPlugin.plugin.js 

(function ($) { 

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

})(jQuery) 

Meine Frage ist, was eine typische Art und Weise, dies zu tun, habe ich noch ein paar Fehler, bei denen this nicht definiert sind, und customJQPlugin is not a function wenn Angekettet auf angular.element(elem).customJQPlugin(options)

Dies ist mehr darüber, wie Sie die jQuery-Plugin-Datei in einer Weise strukturieren, dass Webpack require es auf eine eckige Direktive angewendet werden kann. Ich bin sicher, dass das IIFE dafür nicht benötigt wird, aber ich bin nicht sicher, wie ich für Webpack umgestalten soll.

EDIT: asume jQuery und $ ist global verfügbar

Answer 1

ich einen Weg gefunden habe, es zum Laufen zu bringen, aber ich bin nicht sicher, ob es der beste Weg ist.

// customJQPlugin.plugin.js 

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

Dann in meiner Direktive Datei kann ich folgendes tun:

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

... 

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

.... 

Ich habe noch ein paar Fehler, aber das sieht eher auf die Frage in keinem Zusammenhang sein.

Es ist nicht das sauberste, aber es funktioniert, wird aktualisiert, wenn ich mehr herausfinden.