43

AMDモジュールをパッケージ化するためにrequire.jsとr.jsを使用しています。次の構文でjqueryとrequirejsを使用しています：

<script data-main="/js/client" src="/js/external/require-jquery.js"></script>

これはすべて、パッケージ化前およびパッケージ化後にうまく機能しますが、chrome およびモバイル サファリが client.js のキャッシュされたバージョンを保持するという多くの問題に遭遇します。client.js にキャッシュバスターを追加したいのですが、上記の構文を使用してそれを行う方法がわかりません。

私はいくつかのバリエーションを試しました：

<script data-main="js/client.js?b=busted" src="/js/external/require-jquery.js"></script>

/しかし、require はではなくから client.js を取得しようとする/jsため、404 が発生します。

私も追加してみました

urlArgs : "bust="+new Date().getTime()

にrequire.config、しかしそれは効果がないようです。

にも同じ値を追加しようとしapp.build.jsましたが、そこにある場合、r.js は js ファイルを連結しなくなり、それらを醜くします。

require.js データメイン スクリプト キャッシュをバストするための適切な構文は何ですか?

4

2 に答える 2

76

require.configをどのように定義していますか？require.jsをインポートする前に有効にするには、次のようにコーディングする必要があります。

<script type="text/javascript">
    var require = {
        baseUrl: "/scripts/",
        waitSeconds: 15,
        urlArgs : "bust="+new Date().getTime()
    };
</script>
<script data-main="app/main" src="/scripts/require.js"></script>

具体的には、require.jsをインポートする前に、「require」という名前のオブジェクトを作成する必要があります。

アップデート

Jesseが以下のコメントで指摘しているように、本番環境で使用するためにrequire{}オブジェクトに適用する必要のある拡張機能がいくつかあります。上記の例は、RequireJSのドキュメントから抜粋したものであり、この質問に答えるために可能な限り変更されていません。

実稼働環境で使用するために考慮すべき点がいくつかあります。

  • キャッシュバスティング変数として現在の日時を使用する代わりに、開発環境のビルド番号を使用する必要があります。これにより、クライアントはリリース間でJavascriptをキャッシュできますが、ソフトウェアの更新を行うたびにクライアントはキャッシュを更新します。
  • Jesseは、スクリプトのdata-main属性を使用する代わりに、require{}の機能を使用して依存関係を指定します。それが厳密に良いかどうかはわかりませんが、見た目はすっきりしていると思います。
  • 必要に応じてwaitSecondsを調整します。RequireJSドキュメントの値の例を使用しましたが、必要に応じて値を調整するか、省略してください。

したがって、これらの手法を適用すると、コードは次のようになります。

<script type="text/javascript">
    var require = {
        baseUrl: "/scripts/",
        waitSeconds: 15,
        urlArgs : "bust="+{{buildNumber}},
        deps : ['app/main']
    };
</script>
<script src="/scripts/require.js?bust={{buildNumber}}"></script>

この場合、{{buildNumber}}はサーバーによって提供される値であることに注意してください。

更新2

urlArgsキャッシュバストソリューションには問題があります。残念ながら、ユーザーとユーザーのWebブラウザの間にある可能性のあるすべてのプロキシサーバーを制御することはできません。これらのプロキシサーバーの一部は、残念ながら、ファイルをキャッシュするときにURLパラメータを無視するように構成できます。これが発生した場合、間違ったバージョンのJSファイルがユーザーに配信されます。

（プレフィックス）やmyModule.buildNumber.js（ポストフィックス）などのJavaScriptファイル名リクエストでを使用することbuildNumber をお勧めします。buildNumber.myModule.jsbaseUrlを変更することにより、プレフィックススタイルを使用できます。

baseUrl: "/scripts/buildNumber",

baseUrlの最後に「/」がないことに注意してください。

postfixソリューションを使用するには、require.jsの修正バージョンを使用する必要があります。あなたはここでこれについてもっと読むことができます：https ：//stackoverflow.com/a/21619359/1017787

明らかに、どちらの場合でもbuildNumber、リリースごとに変わるバージョン番号のタイプに置き換えるために、何らかのソリューションを使用する必要があります。

于 2012-07-30T15:28:12.660 に答える
-2

これが私の解決策です（緊急用）：

  1. require.js で次のコードを見つけます。

開発版

//Join the path parts together, then figure out if baseUrl is needed.
url = syms.join('/');
url += (ext || (/^data\:|^blob\:|\?/.test(url) || skipExt ? '' : '.js'));
url = (url.charAt(0) === '/' || url.match(/^[\w\+\.\-]+:/) ? '' : config.baseUrl) + url;

また

製品版

e).join("/"),h=m(d,h)){H(h)&&(h=h[0]);a.splice(0,e,h);break}d=a.join("/");d+=b||(/^data\:|\?/.test(d)||c?"":".js");

  1. ?v=x.0の後に追加します.js

    url += (ext || (/^data\:|^blob\:|\?/.test(url) || skipExt ? '' : '.js?v=1.0'));

    また

    (/^data\:|\?/.test(d)||c?"":".js?v=1.0");

于 2017-01-09T10:02:11.503 に答える