Korrektes Laden von nicht-AMD-kompatiblen jQuery-Plugins in require.js mit jQuery im noConflict-Modus?

Question

Angenommen, ich möchte jquery zusammen mit einem standardmäßigen, nicht amd-fähigen jquery-Plugin verwenden, das mit Standard-Closure definiert wurde: (function($))($.fn.myplugin = { ... })(jQuery); und alles innerhalb eines .

Ich benutze diese config:

require.config({ 
    baseUrl: 'js/', 
    paths: { 
    'jquery':   'libs/jquery/jquery-noconflict', 
    'underscore':  'libs/underscore/underscore', 
    'backbone':  'libs/backbone/backbone', 
    'jquery-myplugin': 'libs/jquery/jquery.myplugin' 
    }, 
    shim: { 
    'backbone': { 
     deps: ['underscore', 'jquery'], 
     exports: 'Backbone' 
    }, 
    'jquery-myplugin': { 
    deps: ['jquery'] 
    } 
}); 

ich jQuery laden in No-Konflikt-Modus in libs/jquery/jquery-noconflict.js, becase ich globalen Namensraum nicht verschmutzen wollen:

define(['libs/jquery'], function() { 
    return jQuery.noConflict(true); 
}); 

und das ist, wie ich mein Haupt app.js laden:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'jquery-myplugin'], 
function($, _, Backbone, MyPlugin){ 
    //MyPlugin is always undefined, not even sure if 
    //I should be passing it here if it only extends jQuery? 
}); 

Nun, hier ist das Problem, ich erlebe - während ich kann u Wenn Sie alle oben definierten Bibliotheken ohne Probleme haben, konnte ich die korrekte shim Konfiguration nicht herausfinden, um nicht-AMD fähige jquery plugins zu laden.

Ich habe versucht, jquery-myplugin als deps der jquery (und anders herum), aber ich konnte es nie funktionieren.

Es scheint, wie ich Problem mit dem folgenden Szenario mit bin:

1. jQuery Lasten in No-Konflikt-Modus.
2. Plugin-Code läuft, erweitern die Instanz der jQuery über
3. Ich kann $ innerhalb meiner Anwendung, erweitert durch den Plugin-Code, so $ .myplugin ist verfügbar.

Ich habe im Umlauf ähnliche Fragen gesehen, aber keiner von ihnen löst tatsächlich dieses Problem nur vage Vorschläge wie „Einsatz Shim config“ ...

bearbeiten

geben auch ich versucht, mit

"jquery-myplugin": { 
    deps: ["jquery"], 
    exports: "jQuery.fn.myplugin" 
} 

Und während Plugin Methoden einmal sind als AMD-Modul auf diese Weise geladen wird, kann ich noch nicht Zugang: $('.class').myplugin() als de fault $ object wurde nicht mit myplugin code erweitert.

Answer 1

Mit jQuery.noConflict(true) wird die globale Variable jQuery entfernt. Wenn Ihr Plugin geladen wird, versucht es auf jQuery zuzugreifen, kann dies jedoch nicht, was diesen Fehler verursacht.

Wenn Ihr Plugin ein Modul war, konnte es Zugriff auf jQuery als Abhängigkeit erhalten. Oder Sie könnten jQuery als global verfügbar lassen.

Answer 2

Zuerst versichern, dass "path/to/jquery-myplugin" tatsächlich erweitert window.jQuery und nicht $

noConflict() verlässt window.jQuery Objekt definiert, sondern entbindet sich von window.$ Auf einigen neuen Browser window.$ für native in alias gebaut document.querySelectorAll Funktion.

Zweitens muss Ihr Myplugin NICHT selbst zurückgeben, da es nicht selbst verwendet werden kann. Da es erweitert jQuery, geben Sie jQuery von Myplugin Anruf zurück.

Schließlich ist "Pfad/zu/jquery-myplugin" kein Modul. Es ist eine einfache JS-Datei. Es ist möglich, RequireJS versucht, es wie ein Modul zu laden und nicht define() Anruf finden, was zu Unordnung führt. Versuchen Sie, der Referenz ".js" -Dateierweiterung hinzuzufügen, um RequireJS zu signalisieren, dass sie "js!" Verwenden muss. Plugin um die Ressource zu laden.

require.config({ 
    paths: { 
     "jquery": "path/to/jquery", 
     "jquery-myplugin": "path/to/jquery-myplugin.js" 
    }, 
    shim: { 
     "jquery": { 
      init: function() { 
      return window.jQuery.noConflict(); 
      }, 
     "jquery-myplugin": { 
      deps: ['jquery'] 
      init: function($) { 
      return $; 
      }, 
     } 
    } 
}); 

Answer 3

hatte ich das gleiche Problem wie Sie heute. Hier ist, wie ich es beheben könnte:

requirejs.config({ 
    "baseUrl": "js/lib", 
    "paths": { 
     "app": "../app" 
    } 
}); 

// Final version of jQuery with all needed plugins. 
define("jquery", ["jquery-core", "myplugin"], function(jqCore) { 
    return jqCore; 
}); 

// Define core jQuery module. 
define("jquery-core", ["jquery-1.9.1.min"], function() { 
    return jQuery.noConflict(true); 
}); 

// This module exposes jquery module to the global scope and returns previous defined version. 
define("jq-global", ["jquery-core"], function(jqCore) { 
    var tmp = jQuery; 
    jQuery = jqCore; 
    return tmp; 
}); 

// Define your plugin here, and don't forget to reset previous jQuery version. 
define("myplugin", ["jq-global", "jquery.myplugin"], function(jqGlobal, jqPlugin) { 
    jQuery = jqGlobal; 
}); 

// Load the main app module to start the app 
requirejs(["app/main"]); 

Jetzt in meiner app/main.js Datei ich tun kann, die folgenden:

define(["jquery"], function($) { 
    $('body').myplugin(); 
}); 

Die Idee hier ist jQuery vorübergehend aussetzen, bevor Code-Plugin ausgeführt wird . Bisher habe ich nicht die Lösung in einer größeren Umgebung testen, mit viel mehr Module zu laden, also kann ich es nicht garantieren, wird auf lange Sicht funktionieren;)

bearbeiten

Diese Lösung gewonnen arbeite nicht !! Da requirejs die Skripte nicht sequentiell lädt, ist es möglich, dass die js-Datei des Plugins vor jquery geladen wird, wodurch die Ausführung fehlschlägt. Das tut mir leid.

Wenn jemand eine andere Idee hat ...