laden jquery plugins mit require js

Question

Ich bin neu zu erfordern js, und das Problem ist, ich verstehe nicht wirklich, wie man jQuery plugins lädt.

Ich möchte mehrere Plugins laden, aber ich bereits Probleme mit dem ersten haben, mit den wählten Plugin

js

//site full url 
var siteUrl = window.location.protocol+"//"+window.location.host + "/"; 

requirejs.config({ 
    baseUrl: siteUrl + "assets/js", 

    paths: { 
     "jquery": "libs/jquery", 
     "jquery-ui": "libs/jquery-ui", 
     "bootstrap": "libs/bootstrap", 
     "scripts": "scripts", 
     "plugins": "plugins", 
    }, 
}); 

requirejs(['jquery', 'jquery-ui', 'bootstrap', 'plugins/chosen'], 
function($, chosen){ 
    $('.chzn-select').chosen(); 
}); 

mein Test html

<select data-placeholder="Choose a country..." style="width:350px;" class="chzn-select"> 
    <option value="">Test</option> 
    <option value="">Test</option> 
    <option value="">Test</option> 
</select> 

und als ich versuchen Sie es zu laden Ich erhalte den folgenden Fehler

TypeError: $ is not a function 


...tion(){"in"==self.hoverState&&self.show()},self.options.delay.show),void 0):self... 

bootstrap.js (line 6) 

TypeError: $(...).chosen is not a function 


$('.chzn-select').chosen(); 

Könnte jemand bitte darauf hinweisen, was ich falsch mache?

Answer 1

Wenn Sie Ihre Abhängigkeiten laden, lädt requestjs alle gleichzeitig. Wenn Sie diesen Fehler erhalten, bedeutet dies, dass Ihr Plugin geladen und ausgeführt wird, bevor jQuery geladen wurde. Sie müssen ein Shim einrichten, um zu signalisieren, dass das Plugin davon abhängig ist, dass jQuery bereits geladen wird.

Auch die meisten jQuery-Plugins sind AMD nicht bekannt, daher sollten Sie requirejs auch mitteilen, wonach Sie suchen müssen, um das Skript korrekt zu laden. Sie können dies mit einem 'exports' Eintrag in Ihrem Shim tun.

Ich glaube nicht, dass jqueryUI auch AMD-bewusst ist, also ist wahrscheinlich auch ein Eintrag im Shim dafür in Ordnung. Ich benutze kein Bootstrap, also bin ich mir nicht sicher, ob du etwas brauchen wirst.

Hier eine Beilage für Ihr Plugin und jQueryUI ist, fügen Sie diese requirejs.config auf Ihren Anruf:

shim: { 
    'plugins\chosen': { 
     deps: [ 'jquery' ], 
     exports: 'jQuery.fn.chosen' 
    }, 
    'jquery-ui': { 
     deps: [ 'jquery' ], 
     exports: 'jQuery.ui' 
    } 
} 

Sie noch einige Probleme haben, die ich noch nicht gesehen, aber dies sollte zumindest bekommen du bewegst dich vorwärts. Auch das ist wahrscheinlich eine Lektüre wert: http://requirejs.org/docs/api.html#config-shim. Ich würde definitiv empfehlen, die ganze Seite zu lesen, wenn Sie noch nicht haben.

Answer 2

Hallo Ich möchte Ihnen hier sagen, dass wenn Sie nicht AMD-Skripte (die define() -Aufruf nicht einschließen), wir Shim-Konfiguration verwenden möchten. Ich werde es gerne mit einem einfachen Beispiel von jquery hightlight plugin erklären.

diese Config-Datei sein wird, wo Sie alle Pfade definieren

paths:{ 
    "jquery":"/path/to/jquery", 
    "jgHighlight":"/path/to/jquery.highlight" 
}, 
    shim:{ 

     deps:["jquery"], // jquery.highlight dependeps on jquery so it will load after jquery has been loaded 
     exports:"jqHighlight" 

    } 

nun in einem Modul, das mit definieren beginnt, sind jqHighlight wie diese

define(["requireModulesArray","jgHighlight"],function(requiredModulesAliasArray){ 

    // no need to include any alias for jgHighlight in function(...) 
    //use it like this now 

    $("#divT").highlight("someText"); 

}); 

Ähnlich andere wird nicht amd Modulen enthalten sein und benutzt. Danke