web-dev-qa-db-ja.com

ASP.NET MVC 4スクリプトのバンドルにより、展開時にエラーが発生する

@Scripts.Render()がスクリプトをバンドルしていない場合、私のWebサイトはローカルホストで正常に機能していますが、サーバーにデプロイすると、ページ上のすべてのJavascriptが機能しなくなるため、バンドルされたJavascriptにエラーが含まれている必要があります。

これが私のバンドルコードです:

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-migrate-{version}.js"));

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

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

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }

これが私のレンダリングコードです:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/modernizr")

誰かが展開時に私のJavascriptに何が起こっているのか説明できますか?

ありがとう、アレックス。

19

「新しいScriptBundle」を「新しいバンドル」だけに変更することもできます。

bundles.Add(new Bundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));

これにより、縮小せずにアセットがバンドルされます。ミニファイが特定のライブラリで機能しない場合がいくつかあります。これにより、それらをバンドルに含めることができます。

19
Ryan Ferretti

通常、デバッグバンドルとデプロイされたバンドルの唯一の違いは、デバッグ時に最適化がオフになっていることです。

最適化がオンになっている場合、最小化によって、改行があった場合に許容される構文エラーを強調表示することができます。例えば:

var x = 10
var y = 15

縮小化されていない場合、これはおそらく機能しますが、縮小化すると、最終的に...

var x = 10 var y = 15 // SyntaxError: missing ; before statement

これは機能しません-欠落している;文字が必要です。

スクリプトをデバッグすると、エラーがどこにあるかを確認できるはずです。

8
Fenton

そのエラーが表示されても、縮小は「機能」します

これに対する本当の解決策は次のとおりです。

  • .minファイルと.mapファイルを除外する[〜#〜] before [〜#〜]公開する

そして、縮小化は機能します。実際、縮小プロセスは常に機能します!

「動作する」場合、実際には何が起こっているのでしょうか。なぜエラーが発生するのでしょうか。

ASP.Netは、最適化を有効にしてバンドルする場合、優先的に.minファイルを使用するようです。そのため、コードを.minファイルに統合し、改行を追加せずにすべてのjavascriptファイルを次々に追加します。

潜在的なコメントがある理由を理解できないのはブラウザです/ *最小マッピング構成の後://#sourceMappingURL = jquery.history.min.js.mapバンドルされたファイルは次のようになります。

[SOMEJAVASCRIPT OF FILEJAVASCRIPT1 HERE;]
//# sourceMappingURL=jquery.history.min.js.map /* begin of a comment of FILEJAVASCRIPT2 appended (in the bundle) javascript file */

このエラーを回避するには、次の2つの解決策があります。

  • フォローできないjavascriptファイル用に個別のバンドルを作成します(バンドル機能をアクティブにしないようなものです)。
  • 縮小を有効にしないバンドルを作成する(悪い)
  • または別の方法:すべての縮小されたファイルまたはsourceMappingURLを持つmin.jsファイルを除外する(またはソースを変更する)および.mapファイル

目標は、ASP.Netにminファイルを自動的に再生成させることです(そして、ASP.Netは、生成されたファイル内に// sourceMappingUrlを作成しないため、その問題は修正されます)。

したがって、実際の問題は、sourcemappingのコメントのコメントを解析できないように見えるため、ブラウザー内でのこの機能の現在の実装です。 sourceMappingUrlが終了したことをブラウザに示す別の方法があるかもしれません。

8
Micaël Félix

このソリューションを確認してください
IIS Config> Authentication> RightClickOn Anonymous Auth> Click Edit> Check Application pool identity

ここ から取得。

0
shiroxx