web-dev-qa-db-ja.com

ASP.NET MVCバンドルは、ステージングサーバーでスクリプトファイルをレンダリングしません。開発サーバーで動作します

ASP.NET MVC 4 Webアプリケーションでは、BundleConfig.csに次のものが含まれています。

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

開発サーバー上のホームページのhtmlを見ると、web.configのデバッグモードが<compilation debug="true" targetFramework="4.0" />としてtrueに設定されている場合でも、次のスクリプトタグが表示されます。

<script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="/AFR/Scripts/modernizr-2.5.3.js"></script>
<script src="/AFR/Scripts/jquery-1.7.1.js"></script>
<script src="/AFR/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/AFR/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/AFR/Scripts/jquery.validate.js"></script>
<script src="/AFR/Scripts/jquery.validate.unobtrusive.js"></script>

しかし、ステージングサーバーにアプリを展開し、ホームページのhtml（ソースの表示）を見ると、<script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script>を除く上記のスクリプトタグがすべて欠落しています。これらのタグに記載されているすべてのファイルがスクリプトフォルダーにあることを確認しました。フォルダ構造は、開発マシンとまったく同じです。ステージングサーバーでは、web.configファイルに<compilation targetFramework="4.0" />があります。これは、デフォルトではdebug = "false"を意味します。

その結果、ステージングサーバーでJavaScript関数の一部が失敗します。ステージングマシンと開発マシンは両方ともWindows 2012です。

助けてください。ありがとう。

javascriptasp.net-mvc-4
50
nam

コメントに基づいて、MVCでBundlingメカニズムがどのように機能するかを検討する必要があります。

Edit： VSDev による以下のコメントに基づいて、 WebGrease がインストールされていることを確認する必要がありますあなたのプロジェクト。 NuGet は、このパッケージをインストールするのが最も簡単な方法です。

バンドル構成を設定する場合（例として上記以外の例）

bundles.Add(new ScriptBundle("~/bundles/mainJs")
      .Include("~/Scripts/mainSite.js")
      .Include("~/Scripts/helperStuff.js");

次に、ビューで@Scripts.Render("~/bundles/mainJs")のようなものを呼び出します。 web.configをデバッグコンパイルまたはに設定すると、BundleConfig.csファイルの次の行を使用して、明示的にバンドルをオフにします。

BundleTable.EnableOptimizations = false;

次に、ビューに次のように表示されます

<script src="/Scripts/mainSite.js" type="text/javascript"></script>
<script src="/Scripts/helperStuff.js" type="text/javascript"></script>

これらは、バンドルを構成する個々のアイテムであり、圧縮されておらず個別にリストされています。これらがデバッグモードで個別にリストされる理由は、スクリプトをデバッグし、記述したとおりに表示できるようにするためです（実際の変数名など）。

現在、デバッグコンパイル中ではなく、EnableOptimizations機能をオフにしていない場合、MVCはバンドル内のこれらのファイルを結合し、圧縮（最小化）して、単一のスクリプトタグのみを出力します。

<script src="/bundles/mainJs?v=someBigLongNumber" type="text/javascript"></script>

ソースは、バンドル構成のバンドルの名前と同じであることに注意してください。また、?v=の後の数字は、そのバンドル内のファイルを変更するたびに変わります。これは、クライアントブラウザによる古いjsおよびcssファイルのキャッシュを防ぐためです。

スクリプトはまだそこにあり、出力されていますが、圧縮されて/bundles/mainJsという単一のファイルに結合されています。この機能は

A）ファイルを圧縮して、送信される情報を減らし、

B）Webサイトへの呼び出し回数を減らして、ページをレンダリングするために必要なコンテンツを取得します。

欠けているものはありません。すべてが意図したとおりに機能しているようです。本番サイトでは、ミニファイによりこれらのファイルをほとんど読み取ることができないため、デバッグ中にミニファイが有効になりません。

JQuery UIがまだ単一のJSファイルのままである理由については、誰かがそれをレイアウトビューにハードコードしていないことを確認してください。 JSエラーについては、開発ボックスに存在するエラーか、おそらく何かが正しく圧縮されていない可能性があります（ただし、MVC開発のすべてで、不適切な縮小のためにJSエラーは見られません）。

97
Tommy

私は同じ問題に出くわし、その理由はわかりませんが、Scripts.Renderによって生成されたスクリプトリンクに.js拡張子がないことが判明しました。また、ブラウザにはType属性がないため、ブラウザで使用できませんでした（chromeおよびfirefox）。

これを解決するために、js拡張子を持つコンパイル済みファイルを生成するようにバンドル構成を変更しました。

            var coreScripts = new ScriptBundle("~/bundles/coreAssets.js")
            .Include("~/scripts/jquery.js");

        var coreStyles = new StyleBundle("~/bundles/coreStyles.css")
            .Include("~/css/bootstrap.css");

new StyleBundle(...の代わりに~/bundles/someBundleと言う代わりに、~/bundlers/someBundle.jsまたは~/bundles/someStyles.cssと言っています。

これにより、ブラウザはファイル拡張子に基づいてgetリクエストで使用するmime/typeを認識し、すべてが機能するため、最適化が有効になっている場合、src属性で生成されたリンクに.jsまたは.cssが設定されます。

拡張機能を外すと、すべてが壊れます。これは、@ Scriptsおよび@Stylesが、拡張子のないファイルへのsrcを理解するために必要なすべての属性をレンダリングしないためです。

7
Ryan Mann

バンドルに次のコードを追加して設定することで動作します

bundles.IgnoreList.Clear();

詳細についてはリンクを参照してください

6
zaheer ahmad

私にとっての修正は、System.Web.Optimizationのバージョンを1.1.0.0にアップグレードすることでした。バージョン1.0.0.0のとき、サブディレクトリ内の.mapファイルを解決しませんでした（つまり、サブディレクトリ内のスクリプトを正しく縮小およびバンドルします）

2
PBMe_HikeIt

Web.configでdebug = "off"を設定してmvc4アプリケーションを実行すると、最終的には...

<script src="/bundles/jquery?v=<some long string>"></script>

私のhtmlコードとJavaScriptエラー

Expected ';'

JavaScriptエラーを取り除くには2つの方法がありました

  1. bundleConfig.csでBundleTable.EnableOptimizations = falseを設定します

OR

  1. 最終的にNuGetパッケージマネージャーを使用してWebGrease.dllを更新しました。 debug = "true"またはdebug = "false"の場合に関係なく正常に動作します。
2
Sunil Johnson

バンドルの最適化を有効にするときに確認するもの。

BundleTable.EnableOptimizations = true;

そして

webconfig debug = "false"
  1. bundles.IgnoreList.Clear();

これにより、*.min.cssや*.min.jsなどのバンドルの縮小されたアセットが無視され、スクリプトの未定義エラーが発生する可能性があります。修正するには、.minアセットをオリジナルに置き換えます。これを行う場合、bundles.IgnoreList.Clear();は必要ないかもしれません。

bundles.Add(new ScriptBundle("~/bundles/datatablesjs")
      .Include("~/Scripts/datatables.min.js") <---- change this to non minified ver.

  1. Cssとjsのバンドルの名前が一意であることを確認してください。

    bundles.Add(new StyleBundle("~/bundles/datatablescss").Include( ...) );

    bundles.Add(new ScriptBundle("~/bundles/datatablesjs").Include( ...) );

  2. バンドル設定で@ Script.RenderとStyle.Renderのレンダー名が同じであることを確認してください。例えば.

    @Styles.Render("~/bundles/datatablescss")

    @Scripts.Render("~/bundles/datatablesjs")

1
Julius Limson

Identity2を使用し、匿名ユーザーに対してスクリプトが読み込まれなかった場合、このコードをwebconfigおよびSlovedに追加します。

<location path="bundles">
<system.web>
  <authorization>
    <allow users="*" />
  </authorization>  
</system.web>
 </location>
1
leyla azari

このアクションをグローバルファイルに追加します。

protected void Application_Start() {
   BundleConfig.RegisterBundles(BundleTable.Bundles);
}
0
Karim Hassan