Il raggruppamento di script ASP.NET MVC 4 causa errori durante la distribuzione

Il mio sito Web funziona @Scripts.Render() su localhost quando @Scripts.Render() non raggruppa gli script, tuttavia, quando @Scripts.Render() deploy sul mio server, il Javascript in bundle deve contenere un errore poiché tutti i Javascript nella mia pagina smettono di funzionare.

Ecco il mio codice bundle:

  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")); } 

Ecco il mio codice di rendering:

 @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") 

Qualcuno può spiegare cosa potrebbe accadere al mio Javascript dopo l’implementazione?

Grazie, Alex.

Puoi anche cambiare il tuo “nuovo ScriptBundle” in “nuovo pacchetto”:

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

Questo impacchetterà le tue risorse senza minimizzazione. Ho incontrato alcuni casi in cui la minimizzazione non funzionava con determinate librerie, quindi questo ti permetterà comunque di includerli nel tuo pacchetto.

Solitamente l’unica differenza tra il debug e i bundle distribuiti è che le ottimizzazioni vengono distriggerste durante il debug.

Quando vengono triggerste le ottimizzazioni, è ansible che il minification evidenzi un errore di syntax che potrebbe essere perdonato in caso di interruzione di riga. Per esempio:

 var x = 10 var y = 15 

Non minifatto, probabilmente funzionerebbe, ma con il risultato di una minificazione si finisce con …

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

Che non funzionerà – ti servono i dispersi ; personaggi lì dentro.

Se esegui il debug dello script, dovresti essere in grado di vedere dove si trova l’errore.

Il minification “funziona” anche se compare questo errore

La vera soluzione per questo è:

  • Escludere i file .min e .map PRIMA di pubblicare

E la minificazione funzionerà. In effetti, il processo di minificazione funziona sempre!

Se “funziona”, cosa sta succedendo davvero: perché abbiamo un errore?

ASP.Net sembra utilizzare i file .min in modo prioritario durante il raggruppamento con ottimizzazioni abilitate. Quindi integrerà anche qualsiasi codice nei file .min e aggiungerà ogni file javascript uno dopo l’altro senza aggiungere interruzioni di riga.

È il browser che non riesce a capire perché c’è un potenziale commento / * Dopo la configurazione di mapping minima: // # sourceMappingURL = jquery.history.min.js.map Poiché i file in bundle avranno il seguente aspetto:

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

Esistono due soluzioni per evitare questo errore:

  • Crea bundle separati per i file javascript che non possono seguire (è come non triggersre la funzione di aggregazione).
  • Crea un pacchetto che non abilita il minification (cattivo)
  • O un’alternativa: escludere tutti i file minificati oi file min.js che hanno un sourceMappingURL (o cambiano la loro origine) e i file .map

L’objective sarebbe forzare ASP.Net a rigenerare i file min da solo (e ASP.Net non renderà // sourceMappingUrl all’interno del file generato in modo da risolvere il problema).

Quindi il vero problema è l’implementazione corrente di questa funzionalità all’interno dei browser perché non sembra che analizzi i commenti per il commento di sourcemapping. Forse c’è un altro modo per indicare al browser che sourceMappingUrl è terminato.

Controlla questa soluzione
IIS Config> Autenticazione> RightClickOn Anonymous Auth> Fare clic su Modifica> Verifica identity framework del pool di applicazioni

Preso da qui .