Загрузка jquery плагинов с требованием js

Я новичок в js, и проблема в том, что я действительно не понимаю, как загружать плагины jQuery.

Я хотел бы загрузить несколько плагинов, но у меня уже есть проблемы с первым, с выбранным плагином

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

мой тестовый 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>

и когда я пытаюсь загрузить его, я получаю следующую ошибку

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

Может ли кто-нибудь указать, что я делаю неправильно?

Ответы

Ответ 1

Когда вы загружаете свои зависимости, requirejs загружает их все одновременно. Когда вы получаете эту ошибку, это означает, что ваш плагин загружается и выполняется до загрузки jQuery. Вам нужно настроить прокладку, чтобы указать requirejs, что плагин зависит от уже загруженного jQuery.

Кроме того, большинство плагинов jQuery не относятся к AMD, поэтому вы также захотите сказать requirejs, что искать, чтобы правильно рассказать о нем script. Вы можете сделать это с помощью записи "export" в вашей прокладке.

Я не верю, что jqueryUI тоже поддерживает AMD, поэтому запись в прокладке, вероятно, тоже для этого. Я не использую bootstrap, поэтому я не уверен, что вам что-то понадобится.

Вот прокладка для вашего плагина и jQueryUI, добавьте это к вашему вызову requirejs.config:

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

У вас могут быть некоторые проблемы, которые я пока не вижу, но это должно по крайней мере заставить вас двигаться вперед. Кроме того, это, вероятно, стоит прочитать: http://requirejs.org/docs/api.html#config-shim. Я бы определенно рекомендовал прочитать эту целую страницу, если вы еще этого не сделали.

Ответ 2

Привет. Я хотел бы рассказать вам здесь, что если вы хотите включить сценарии без AMD (которые не включают вызов define()), мы используем конфигурацию shim. Я хотел бы объяснить с помощью простого примера плагина jQuery hightlight.

это будет ваш файл конфигурации, в котором вы определяете все пути

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"

   }

Теперь в модуле, который начинается с define, включите jqHighlight, подобный этому

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

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

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

});

Аналогичным образом будут включены и использованы другие неаддиционные модули. Благодаря