31

RequireJS 2.0.1を少し試しています。私の目標は、jQuery、Underscore、および Backbone を正しくロードすることです。元のRequireJS docから、著者の J. Burke が (この新しいリリースに) shim という新しい構成オプションを追加したことを発見しました。

それから私はこのことをここに書き留めました：

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Testing time</title>
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>Testing time</h1>
    </body>
</html>

scripts/main.js

requirejs.config({
    shim: {
        'libs/jquery': {
            exports: '$'
        },
        'libs/underscore': {
            exports: '_'
        },
        'libs/backbone': {
            deps: ['libs/underscore', 'libs/jquery'],
            exports: 'Backbone'
        }
    }
});


define(
    ['libs/jquery', 'libs/underscore', 'libs/backbone'],

    function (jQueryLocal, underscoreLocal, backboneLocal) {
        console.log('local', jQueryLocal);
        console.log('local', underscoreLocal);
        console.log('local', backboneLocal);
        console.log('global', $);
        console.log('global', _);
        console.log('global', Backbone);
    }
);

jQuery と Underscore のAMDedバージョンがあることは知っていますが、セットアップが非常に単純な場合、なぜそれらを使用する必要があるのか​​ わかりません。

それで、このセットアップは正しいですか、それとも何か不足していますか?

4

3 に答える 3

32

define()ライブラリがモジュールを宣言するためにまだ呼び出していない場合にのみ、「shim」構成を使用する必要があります。jQuery は既にこれを行っているため、shim 構成から削除できます。define()上記のコードはそのまま機能しますが、シムの作業が完了する前にjQuery が呼び出されるため、jQuery のエクスポート シム構成は無視されます。

shim とdefine()モジュールを定義するためのスクリプト呼び出しの欠点:

  1. 移植性/信頼性が低くなります。すべての開発者は shim 構成を行い、ライブラリの変更を追跡する必要があります。ライブラリの作者がライブラリ内でインライン化すれば、誰もがより効率的に利益を得ることができます。umdjs/umdのコード テンプレートは、そのコード変更に役立ちます。

  2. 最適でないコードの読み込み: shim 構成は、実際のライブラリを読み込む前に shim deps を読み込むことによって機能します。そのため、並列ロードよりもシーケンシャル ロードの方が少し多いです。を使用すると、すべてのスクリプトを並行してロードできれば高速になりますdefine()。最終的な展開のためにビルド/最適化を行い、すべてのスクリプトを 1 つのスクリプトに結合する場合、これは実際にはマイナス面ではありません。

于 2012-06-03T22:54:41.537 に答える
8

あなたがしていることは正しいですが、jQuery はAMD (Asynchronous Module Definition) モジュールをエクスポートするため、shim 構成にある必要はありません。Underscore は、追加後すぐに AMD / Require.js のサポートを削除しました。以下を参照してください: underscore.js が AMD のサポートを削除した理由

Shim は、AMD モジュールをエクスポートしないライブラリを使用するための利便性を目的としています。使用しているライブラリが AMD をサポートしている場合、または 2 つのバージョン (AMD をサポートするバージョンとグローバル変数であるバージョン) がある場合は、AMD バージョンを使用する必要があります。最初に AMD を使用するのと同じ理由で、また、ライブラリのソースに require.js (またはAlmond ) が含まれている可能性があり、プロジェクトに不要なファイル サイズが追加される可能性があるため、AMD バージョンを使用する必要があります。

于 2012-06-03T23:18:12.903 に答える
0

jqueryはamdモジュール定義に「jquery」という名前を追加するため、元の例（jqueryへのパスが「libs / jquery」に設定されている）で「シミング」jqueryを実際に回避できますか？

define（ " jquery "、[]、function（）{return jQuery;}）;

私の経験では、jquery amdモジュールを期待どおりに定義するには、baseurlディレクトリにjquery.jsを配置するか、元の例のように「shim」する必要があります。

于 2012-09-02T00:03:23.310 に答える