jquery 1.9.0 e modernizr non possono essere minimizzati con il framework di ottimizzazione Web ASP.NET

Question

Utilizziamo il framework di ottimizzazione Web ASP.NET con bundle e minification. Un pacchetto contiene solo jquery e modernizr. Tutto questo ha funzionato bene con jquery 1.8.3 ma da quando abbiamo aggiornato alla 1.9.0 la combinazione jquery/modernizer bundle non funziona più.

bundles.Add(new ScriptBundle("~/st-scripts-load-first.js") 
     .Include("~/Resources/JavaScript/jquery-1.9.0.js", 
       "~/Resources/JavaScript/modernizr.form-placeholder.js")); 

Abbiamo jquery-1.9.0.js e jquery-1.9.0.min.js nella directory. Se non esiste alcun file .min, il framework di ottimizzazione ne genererà uno automaticamente. Non funziona se il file .min è presente o meno.
Funziona se compilation debug = "true" e non vi è alcun minification o bundling.

/* Minification failed. Returning unminified contents. 
(5,2-3): run-time warning JS1195: Expected expression: * 
(11,60-61): run-time warning JS1004: Expected ';': { 
(395,2-3): run-time warning JS1195: Expected expression:) 
(397,21-22): run-time warning JS1004: Expected ';': { 
(397,4590-4591): run-time warning JS1195: Expected expression:) 
(398,28-29): run-time warning JS1195: Expected expression:) 
(398,84-85): run-time warning JS1002: Syntax error: } 
(402,44-45): run-time warning JS1195: Expected expression:) 
(408,1-2): run-time warning JS1002: Syntax error: } 
(393,5-22): run-time warning JS1018: 'return' statement outside of function: return Modernizr; 
(404,5,406,16): run-time warning JS1018: 'return' statement outside of function: return !!('placeholder' in (Modernizr.input || document.createElement('input')) && 
       'placeholder' in (Modernizr.textarea || document.createElement('textarea')) 
      ); 
*/ 

Answer 1

sono sicuro che la causa del problema è l'ultima linea di jquery-1.9.0.min.js:

//@ sourceMappingURL=jquery.min.map 

La versione unminified di jQuery 1.9 non contiene questo. Spiegherò perché in un minuto.

mi sono accorto che quando jquery-1.9.0.min.js è fornito in bundle con un altro file - e che altro file segue jquery-1.9.0.min.js - quindi il seguente file JS è, in un modo di parlare, corrotto.

Il motivo è che l'inizio del seguente file viene aggiunto alla riga "// @" di jQuery, il che significa che diventa quindi un commento lungo e esteso. Nel tuo caso questo ha fatto sì che lo script

window.Modernizr=function(n,t,i){function... 

all'inizio del Modernizr è stato in output dal processo di accorpamento come un commento in questo modo:

//@ sourceMappingURL=jquery.min.map window.Modernizr=function(n,t,i){function... 

C'è una discussion on jQuery's Bug Tracker riguardo a questa.

Le opzioni sono o di rimuovere quel ultima riga o per avvolgere in più linee di commento simboli:

/* 
//@ sourceMappingURL=jquery.min.map 
*/ 

Inoltre, si può vedere che Modernizr contiene anche una mappa fonte al termine della sua versione minified . E a ragione.

La logica alla base di questo è di aiutare nel debug di un problema quando è stata utilizzata la versione minified del codice. Questa riga indica al browser che questo file miniato è mappato su un altro file che può aiutare nel debug. Per approfittare di questo è necessario avere quel file di riferimento (jquery.min.map) sul server o scaricato sul client. Inoltre, credo che Chrome sia l'unico browser che attualmente supporta questo; è ancora in fase di sviluppo su Firefox.

This page ha un'eccellente spiegazione di Mappe di origine.

Quindi, in breve, la sua rimozione non dovrebbe causare problemi, a meno che non si desideri eseguire il mapping alla versione originale della sorgente durante il debug nel browser. Nel tuo caso, a causa del modo in cui funziona l'Optimization Framework di ASP.NET, quando debug = "True" verrà comunque pubblicata la versione non ancora terminata, quindi probabilmente non avrai bisogno di usare sourceMappingURL.

Answer 2

Potrebbe esserci qualcosa di sbagliato nella copia di modernizr.form-placeholder.js.

Ho appena eseguito lo stesso errore cercando di caricare jquery.peity.js.

Quando ho rimosso la libreria, la pagina è stata caricata correttamente. Così sono andato e ho afferrato il js raw dal loro sito e ho rifatto il file e questo è stato caricato senza problemi.

Answer 3

Non ho potuto rispondere alla risposta di awj, sopra, quindi ho appena votato. Fantastico pezzo di lavoro investigativo. Volevo aggiungere un commento, che mentre il problema era effettivamente risolto in jQuery 1.9.1 ora si presenta in jquery-migrate-1.1.0

Ho notato che il riferimento al file di mappa è solo una linea singola commento alla fine del file "jquery-migrate-1.1.0.min.js". Quindi, seguendo il suggerimento di awj, ho fatto un commento su più righe.

Così la linea 3:

//@ sourceMappingURL=dist/jquery-migrate.min.map 

ora diventa linee 3, 4, e 5 come segue:

/* 
//@ sourceMappingURL=dist/jquery-migrate.min.map 
*/ 

Una volta ho caricato di nuovo al mio ISP non ho ancora piena funzionalità Ajax.

Grazie ancora AWJ, questo ha aiutato molto!

Answer 4

Leggendo le risposte, anche la risposta accettata, la soluzione consigliata a questo problema è modificare gli script in modo che il bundler non abbia problemi con questo. Questo non ha senso per me, questo è chiaramente un bug del Bundler non concatenare diversi script correttamente, in particolare la Bundler ha un problema quando l'ultima riga dello script n è una linea normale commento

// this is the last line of the n script 

e poi la tua script successivo non inizia con una sola riga di commento

function(){ var ... 

Bundler, è di default configurato con un ; come il ConcatenationToken modo che il codice in bundle finisce per essere qualcosa di simile:

// this is the last line of the n script;function(){ var ... 

Sicuramente il caricamento dello script ha esito negativo con un errore di sintassi da qualche parte.

È stato proposto di modificare l'ultima riga dello script per non essere un commento in linea, renderlo un commento multilinea, quindi quando il codice termina con */ il parser sarà ok con una dichiarazione di funzione o qualcos'altro subito dopo esso.

Non mi piace modificare i miei script, molti sono creati da qualcun altro (jquery, ecc.) E non voglio modificarli, cosa succede se devo aggiornarli e troverò di nuovo questo errore dopo I aggiornare un sito Web e non viene eseguito con debug="true" nella configurazione.

io vengo con questa soluzione lavorare meglio per me

bundles.Add(new ScriptBundle("~/bundles/mobile") { 
       ConcatenationToken = ";\r\n" } 
     .Include("~/Scripts/jquery-1.11.3*", 
       "~/Scripts/jquery-timeago*", 
       "~/Scripts/jquery.mobile-1.4.5*", 

In questo modo si forza Bundler per separare sempre gli script con un carattere di nuova riga. Dovrebbe farlo automaticamente quando l'ultima riga dello script precedente è un commento a riga singola.