web-dev-qa-db-ja.com

CDNからjQueryを調達しますか？

私はrequireJSを使用しており、jQueryのCDNバージョンを使用するための最良の方法を知りたいです。 1.7バージョンは「AMD」であると聞きましたが、これは役立つはずですが、簡単な例を見つけることができません。いくつかのRequireJSの達人が私を助けてくれることを願っています。

javascriptjquerycdnrequirejs
37
wilsonpage

jQuery 1.7は、それ自体を「jquery」という名前でAMDモジュールとして登録するため、パスconfigを使用して「jquery」のマッピングを作成する必要があります。

requirejs.config({
  paths: {
    'jquery' : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'
  }
});

require(['jquery'], function($) {
  //$ points to jQuery
});

ただし、RequireJSはモジュールを非同期にロードし、順不同であるため、define(['jquery'], function ($){ /* plugin code goes here */ });でラップされていないjQueryプラグインを使用する場合は注意してください。呼び出しの場合、プラグインはjQueryがロードされる前に実行される可能性があります。

JQueryに依存しているが、define()呼び出しでラップされていないファイルを処理する方法については、 require-jquery プロジェクトのREADME）を参照してください。

46
jrburke

@jrburkeの答えは私にはうまくいきません。 RequireJS api doc によると、パスにファイル拡張子を含めないでください。だからここに作業コードがあります：

requirejs.config({
    paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min'
    }
});

require(['jquery'], function($) {
    //$ points to jQuery
});

Jsfiddleの実例があります： http://jsfiddle.net/murrayju/FdKTn/

9
murrayju

モジュールの依存関係として含めることができますが、少し不安定です。例えば

define([
"order!http://code.jquery.com/jquery-1.7.min.js"
], function($) {
})

2つの理由であまり良くありません

1）jqueryファイル自体はモジュールではないため、$関数から取得するのはjqueryではありません

2）order!プラグインはCDNバージョンのスクリプトではうまく機能しません。 Requirejsの順序が優先設定およびCDN依存関係で機能しない を参照してください

まだアップグレードしていないため、これを「実際の」プロジェクトで使用する機会はまだありませんが、テストの結果、jqueryをスクリプトタグに含めるのが最善の方法であることがわかりました。モジュールへの依存関係として。うまくいけば、次の小さなサンプルが役立つでしょう：

<html>
<head>
    <title>Index2</title>
    <script src="../../scripts/libraries/jquery.js" type="text/javascript"></script>
    <script src="../../scripts/libraries/require.js" type="text/javascript"></script>
    <script type="text/javascript"">

        require(
            {baseUrl: 'scripts'}, 
            ['jquery'], 
            function (dollarSign) {
                console.log(dollarSign('div').html('hi'));
            });       
    </script>

</head>
<body>
    <div>

    </div>
</body>
</html>
3
timDunham

まず、jQuery CDNには プロトコル相対URL を使用することをお勧めします。次に、CNDが停止している場合は、CDNとローカルの場所で値の配列を使用してローカルファイルをロードします。 CDNのURLはいくつでも使用できます。恐れることはありません。CDNから正常にダウンロードした場合、ローカルの場所から2番目のファイルをロードする必要はありません。

requirejs.config({
  paths: {
    'jquery': ['//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min', 'lib/jquery-1.10.2.min']
  }
});
2
Alexander Matrosov