web-dev-qa-db-ja.com

RequireJS 2.0.1およびshimを使用したjQuery、Underscore、およびBackboneのロード

私はRequireJS2.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バージョンがあることは知っていますが、設定が非常に単純な場合は、なぜそれらを使用する必要があるのか​​理解できません。

それで、この設定は正しいですか、それとも何か不足していますか？

javascriptrequirejsshim
31
vrde

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

シムの欠点と、モジュールを定義するスクリプトがdefine()を呼び出すことの欠点：

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

  2. 最適化されていないコードの読み込み：shim configは、実際のライブラリを読み込む前にshim depを読み込むことで機能します。そのため、並列よりも順次読み込みが少し多くなります。すべてのスクリプトを並列にロードできる場合は、define()を使用した場合に可能です。最終的な展開のためにビルド/最適化を行い、すべてのスクリプトを1つのスクリプトに結合する場合、これは実際にはマイナス面ではありません。

32
jrburke

あなたがやっていることは正しいですが、jQueryは [〜＃〜] amd [〜＃〜] （非同期モジュール定義）モジュールをエクスポートするため、shim構成にある必要はありません。アンダースコアは、AMD/Require.jsのサポートを追加した直後に削除しました。以下を参照してください なぜunderscore.jsがAMDのサポートを削除したか

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

8
hapticdata

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

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

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

0
Claudijo