web-dev-qa-db-ja.com

require jsでjqueryプラグインをロードする

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

誰かが私が間違っていることを指摘してもらえますか？

javascriptjqueryjquery-pluginsrequirejs
21
Side

依存関係をロードするとき、requirejsはそれらをすべて同時にロードします。このエラーが発生した場合は、jQueryが読み込まれる前にプラグインが読み込まれて実行されていることを意味します。プラグインがすでにロードされているjQueryに依存していることをrequirejsに伝えるためにシムを設定する必要があります。

また、ほとんどのjQueryプラグインはAMD対応ではないので、スクリプトが正しくロードされていることを伝えるために何を探すかをrequirejsに伝えます。シムの「エクスポート」エントリでこれを行うことができます。

JqueryUIもAMDに対応しているとは思わないので、shimのエントリもおそらくそのためのものです。私はブートストラップを使用しないので、そこに何かが必要かどうかはわかりません。

これがプラグインと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 。まだ読んでいない場合は、そのページ全体を読むことをお勧めします。

42
Waxen

こんにちはここで、AMD以外のスクリプト（define（）コールを含まない）を含める場合は、shim configを使用することをお伝えします。 jqueryハイライトプラグインの簡単な例で説明します。

これは、すべてのパスを定義する構成ファイルになります

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

});

同様に、他の非AMDモジュールが含まれ、使用されます。ありがとう

4
dinesh_malhotra