1

私の Web アプリケーションには<script>、相対的な依存関係の順にタグを介して以前に読み込まれたいくつかの JavaScript ファイルがあります。現在、require.js を使用してそれらを再編成し、それらを蓄積して本番用に縮小しています。

手始めに、AMD カプセル化をまだ行わずに、すべてのファイルをグローバル (ウィンドウ) コンテキストに単純にロードしたいと思います。

require([
    'jquery'], function() {
    require([
        'jquery-ui'], function() {
        require([
            'jquery-ui.touch-punch',
            // [...]
        ]);
    });
});

ここでの考え方'jquery'は、グローバル (ウィンドウ コンテキスト)jQuery変数を定義し、 (より良いタッチ サポートのために)'jquery-ui'セットjQuery.uiと'jquery-ui.touch-punch'変更を行うというものです。jQuery.ui

これは、そのまま実行する場合、つまり最適化なしで実行する場合にうまく機能します。ただし、1 つのファイルにコンパイルし、RequireJS オプティマイザーを使用して縮小すると、次のエラーが発生します。

Uncaught TypeError: Cannot read property 'mouse' of undefined

これは、 にアクセスしようとしている回線で発生しますjQuery.ui.mouse。

ブラウザ コンソール内でjQueryは、ウィンドウ コンテキストで正しく設定されていますが、jQuery.ui未定義です。ただし、手動で実行すると、期待どおりrequire(['jquery-ui'])に設定jQuery.uiされます。

最適化後に jQuery UI の動作が異なるように見えますが、その正確な方法や理由はわかりません。私は何を間違っていますか？

4

1 に答える 1

2

スクープ

ネストされた呼び出し (実際には依存関係を設定しない)shimではなく、AMD 以外のモジュール間の依存関係を設定します。指定した構成でrequireも必ず使用してください。wrapShim: truer.js

説明

ロードしようとしているモジュールの 1 つ以上は AMD モジュールではありませんが、AMD 以外のモジュール間の依存関係を実際に定義していません。

あなたのように呼び出しをネストrequireすると、一部のモジュールが実行時にロードされる順序が強制されますが、これは実際にはモジュール間の依存関係を確立しません。したがって、この戦略はモジュールが最適化されていない限り機能しますが、最適化後に失敗する可能性があります。

依存関係を確立するには、次の 2 つの方法しかありません。

  1. 依存関係の配列をdefine呼び出しに渡す。このメソッドは、AMD 仕様用に実際に作成されたモジュールで使用されます。(RequireJS は、モジュールを要求する CommonJS の方法の使用もサポートしていますが、舞台裏ではdefine、依存関係の配列を使用した呼び出しに変換されます。したがって、3 番目の方法にはなりません。)

  2. shimwhich リストの依存関係を設定する。この方法は、AMD 以外のモジュール用です。

を設定しない場合shim、オプティマイザーは非 AMD モジュールを任意の順序で自由に並べることができます。最適化されたファイルの前と中に現れるjquery-ui.touch-punch 可能性があります。なぜならそうすべきではないからです。このプラグインのコードを見ると、AMD に対応していないことがわかります。jQuery と jQuery UI が存在することを想定しており、存在しない場合は失敗します。jquery-uijquery

を設定するshimと、最適化されたファイル内の非 AMD モジュールの順序が強制されます。

AMD 対応バージョンの jQuery UI を使用する場合にwrapShim必要です。jquery-ui.touch-punchそうしないと、プラグインが必要とする前に jQuery UI のファクトリが実行されません。

于 2016-12-04T19:37:47.987 に答える