caricamento jquery plugins con require js

Question

Sono nuovo per richiedere js, e il problema è che non capisco veramente come caricare i plugin jQuery.

vorrei caricare più plugin ma ho già problemi con il primo, con i ha scelto il 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(); 
}); 

mio 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> 

e quando ho prova a caricarlo ricevo il seguente errore

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(); 

Qualcuno potrebbe per favore indicare cosa sto facendo male?

Answer 1

Quando si caricano le dipendenze, requirejs le carica tutte contemporaneamente. Quando ricevi questo errore, significa che il tuo plugin viene caricato ed eseguito prima che jQuery sia stato caricato. È necessario impostare uno shim per indicare a requirejs che il plugin dipende dal fatto che jQuery sia già stato caricato.

Inoltre, la maggior parte dei plugin jQuery non sono compatibili con AMD, quindi è anche necessario indicare a requirejs cosa cercare per indicare che lo script è stato caricato correttamente. Puoi farlo con una voce 'esportazioni' nel tuo shim.

Non credo che jqueryUI sia AMD-aware, quindi una voce nello shim è probabilmente in ordine anche per quello. Non uso il bootstrap, quindi non sono sicuro se avrai bisogno di qualcosa lì.

Ecco uno spessore per il plug-in e jQueryUI, aggiungere questo al tuo invito requirejs.config:

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

si può ancora avere alcuni problemi che non ho ancora vedere, ma questo dovrebbe almeno avere vai avanti. Inoltre, probabilmente vale la pena leggere: http://requirejs.org/docs/api.html#config-shim. Consiglio vivamente di leggere l'intera pagina se non lo hai ancora fatto.

Answer 2

Ciao Mi piacerebbe dirvi qui che se si desidera includere script non AMD (che non includono la chiamata define()), usiamo shim config. Mi piacerebbe spiegare con un semplice esempio di plugin jquery hightlight.

questo sarà il vostro file di configurazione in cui è possibile definire tutti i percorsi

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" 

    } 

Ora, in un modulo che inizia con definire, includere jqHighlight come questo

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

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

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

}); 

saranno inclusi

Allo stesso modo gli altri moduli non amd e usato. Grazie