Javascript - Build Plugin für requireJS

Question

Ich habe ein Javascript Plugin geschrieben und möchte es mit requireJS kompatibel machen. Ich habe jedoch einige Schwierigkeiten, damit es richtig funktioniert. Ich denke meine AMD ist nicht richtig geschrieben oder so ähnlich.

Wenn ich versuche, den Plugin-Konstruktor auszuführen, ist er nicht definiert, nachdem requireJS das Skript geladen hat (die Callback-Variable von requirejs ist ebenfalls nicht definiert).

Zum Beispiel verwende ich requirejs wie folgt aus:

requirejs([ 
'./assets/js/myplugin.js' 
], function(myplugin) { 

    console.log(myplugin); // undefined 
    new MyPlugin(); // undefined 

}); 

Und in myplugin.js Ich habe dieses Skript:

(function (root, factory) { 

if (typeof define === 'function' && define.amd) { 

    define(
     'myplugin', 
     ['brandname-util1/util1', 
     'brandname-util2/util2', 
     'brandname-util3/util3'], 
     factory 
    ); 

} else if (typeof exports === 'object' && module.exports) { 

    module.exports = factory(
     root, 
     require('brandname-util1'), 
     require('brandname-util2'), 
     require('brandname-util3') 
    ); 

} else { 

    root.MyPlugin = factory(
     root, 
     root.BrandNameUtil1, 
     root.BrandNameUtil2, 
     root.BrandNameUtil3 
    ); 

} 

}(this, function factory(root, util1, util2, util3) { 

    'use strict'; 

    var MyPlugin = function() { 
    } 

    return MyPlugin; 

})); 

Das Skript richtig geladen ist (Asynchron) aber nichts festgelegt. Ich bin mir nicht ganz sicher, wie es funktioniert.

EDIT: hier die utils Skripte Beispiel:

// util1 
(function(root, factory) { 

    if (typeof define === 'function' && define.amd) { 

     define(
      'brandname-util1/util1', 
      ['jquery'], 
      factory 
     ); 

    } else if (typeof module === 'object' && module.exports) { 

     module.exports = factory(require('jquery')); 

    } else { 

     root.BrandNameUtil1 = factory(root); 

    } 

}(this, function() { 

    "use strict"; 

    var util1 = {}; 

    // declare some functions 

    return util1; 

})); 

// util2 
(function(root, factory) { 

    if (typeof define === 'function' && define.amd) { 

     define(
      'brandname-util2/util2', 
      ['jquery'], 
      factory 
     ); 

    } else if (typeof module === 'object' && module.exports) { 

     module.exports = factory(require('jquery')); 

    } else { 

     root.BrandNameUtil2 = factory(root); 

    } 

}(typeof window !== "undefined" ? window : this, function() { 

    "use strict"; 

    var util2 = function() {}, 
     proto = util2.prototype; 

    // declare some proto 

    return util2; 

})); 

// util3 
(function (root, factory) { 

    if (typeof define === 'function' && define.amd) { 

     define(
      'brandname-util3/util3', 
      ['brandname-util1/util1', 
      'brandname-util2/util2'], 
      factory 
     ); 

    } else if (typeof module === 'object' && module.exports) { 

     module.exports = factory(
      root, 
      require('brandname-util1'), 
      require('brandname-util2') 
     ); 

    } else { 

     root.BrandNameUtil3 = factory(
      root, 
      root.BrandNameUtil1, 
      root.BrandNameUtil2 
     ); 

    } 

}(this, function (root, util1, util2) { 

    "use strict"; 

    var util3 = function() {}, 
     proto = util3.prototype; 

    // declare some proto 

    return util3; 

})); 

Answer 1

Das einzige Problem, das ich ist zu sehen, dass Ihr Werk root als erstes Argument nimmt und dann die Module. Es funktioniert gut in der CommonJS (2. Zweig) und kein Modul-System (3. Zweig), aber es schlägt in der AMD Fall (1. Zweig), weil 10 Ihre Fabrik mit nur 3 Argumente aufrufen: root wird auf das erste Modul von eingestellt die Abhängigkeitsliste, util3 wird nicht gesetzt usw.

Wenn Sie in Ihrer Fabrik nicht root verwenden, können Sie es einfach aus der Parameterliste entfernen und die Anrufe im 2. und 3. Zweig nicht anpassen übergeben Sie es, und alles sollte funktionieren.

Andernfalls, wenn Sie es in Ihrem Werk tun müssen, könnten Sie das Problem beheben, indem Sie Ihre erste Niederlassung Wechsel zu tun:

define(['brandname-util1/util1', 
    'brandname-util2/util2', 
    'brandname-util3/util3'], 
    factory.bind(undefined, root) 
); 

Dieser Wert von this im Werk setzt sein undefined (was sein sollte fein) und zwingt den ersten Parameter in der Fabrik auf den Wert root einzustellen, den Sie im Rahmen Ihres define Aufrufs haben. Die Module werden danach angehängt.

Weitere Informationen zur Funktionsweise finden Sie in dieser Dokumentation unter bind.

Sie sollten auch keinen Modulnamen in Ihrem Anruf setzen. Der Aufruf, den ich oben zeige, entfernt den Modulnamen. Der Aufruf sollte nur die Abhängigkeitsliste und die Factory enthalten.

Und Sie sollten nicht .js in Modulnamen setzen. Also requirejs(['./assets/js/myplugin'], ohne die .js.