-1

依存関係や他のモジュールとの関係を管理するために、すべての JS ファイルが含まれている app.js ファイルを作成しました。

通常は非常にうまく機能しますが、時々クラッシュします。私のapp.jsファイルがあります。すべての「モジュール」ファイルには、「定義」関数の依存関係として jQuery があります。

require.config({
    baseUrl: 'js/', // '../Style%20Library/js/' pour Sharepoint
    paths: {
        jquery: 'vendor/jquery-1.11.2.min',
        jqueryui: 'vendor/jquery-ui',
        jrespond: 'vendor/jrespond-0.10',
        transit: 'vendor/jquery.transit.min',
        easing: 'vendor/jquery.easing.1.3',
        mainMenu: 'modules/main-menu',
        resBreakpoints: 'modules/resBreakpoints'
        [...]
    }
});

require(['jquery','resBreakpoints', 'transit'], function($, resBreakpoints, transit) {
    // Support aux vieux browser pour ne pas utiliser le plugin transition
    if(!Modernizr.csstransitions){ 
        $.fn.transition = $.fn.animate; 
    }
});

クラッシュの原因は何ですか? 動作している場合、コンソールにエラーはありませんが、クラッシュすると、多くのモジュールでこのエラーが表示されます。

Uncaught ReferenceError: jQuery が定義されていません

jQuery が定義されていない場合、jQuery およびその他のファイルはすべて完全に読み込まれ、ネットワーク タブでエラーは発生しません。

ご協力ありがとうございました！

4

1 に答える 1

1

jQuery およびその他の多くのライブラリ (古いライブラリもあれば、最新の規則 (咳バックボーン咳) を避けることに固執しているものもあります) は、いかなる種類のモジュール ローダーもサポートしていません。それらをrequireでロードするには、シム機能を使用して、モジュールがエクスポートするシンボルを明示的にリストする必要があります。私のフロントエンドテンプレートプロジェクトで、以下に分離された例をここで見ることができます:

require.config({
    shim: {
      jquery: {
        exports: '$'
      }
    }
  });

シムを追加すると、モジュールをロードする必要があり、グローバル シンボルがモジュールからのデフォルトのエクスポートであるかのように扱われます。

他のコードから jQuery を使用する場合は、次のいずれかを必ず確認してください。

  • 他のモジュールからそれを要求するか、
  • 何かをロードする前にそれを要求する

清潔さのために、私は前者を好みます。シムが与えられたら、各モジュールの開始時にする必要がありrequire('jquery')ます。シムの名前 (キー) はそこからのモジュール名であり、実行すると必要なシンボルが返されます。 require('$')var $ = require('jquery')

読みやすさと自己文書化のために、alnum 文字以外の単一のモジュール名を使用するよりも、ライブラリ名をシム名 ( jquery、underscore、 ) として使用し、記号 (または)lodashを使用してスコープにインポートすることを好みます。それは個人的な好みだと思いますが、$_

import $ from 'jquery';

します。

jQuery プラグインがある場合、または Twitter の Bootstrap を使用している場合は、新しい jQuery "モジュール" に依存する他の shim を定義する必要がある場合があります。これらはプラグインの前に jQuery を強制的にロードし、基本的にモジュール自体とは独立して require の依存関係ツリーをリストします。私の Bootstrap の例は、jQuery プラグインでも機能するはずです。

shim: {
  bootstrap: {
    deps: ['jquery']
  }
}

これにより、モジュール間の依存関係が強制されrequire、プラグインを使用できるようになり、親が以前にロードされていることが保証されます。jQuery などはシンボルをグローバル スコープに配置するため、プラグインへのインポートを設定する必要はありません。プラグインの読み込みを開始する前にライブラリが必要であることを確認してください。

于 2015-06-09T14:07:25.127 に答える