mvc - jquery 1.9.0 y modernizr no se pueden minimizar con el marco de optimización web ASP.NET

script bundle asp net mvc

Question

Estamos utilizando el marco de optimización web ASP.NET con paquetes y minificación. Un paquete solo contiene jquery y modernizr. Todo esto funcionó bien con jquery 1.8.3, pero desde que actualizamos la versión 1.9.0, la combinación jquery / modernizer bundle ya no funciona.

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

Tenemos tanto jquery-1.9.0.js como jquery-1.9.0.min.js en el directorio. Si no hay un archivo .min, el marco de optimización generará uno automáticamente. No funciona si el archivo .min está ahí o no.
Funciona si compilación debug = "true" y no hay minificación o agrupación.

/* 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

Al leer las respuestas, incluso la respuesta aceptada, la solución recomendada para este problema es modificar sus scripts para que el proveedor no tenga problemas con esto. Esto no tiene sentido para mí, esto es claramente un error del bundler que no concatena diferentes scripts, específicamente el bundler tiene un problema cuando la última línea del script n es un comentario de línea normal

// this is the last line of the n script

y luego su próximo script no comienza con un solo comentario de línea

function(){ var ...

el paquete, por defecto, está configurado con a ; como el ConcatenationToken por lo que el código incluido termina siendo algo como esto:

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

Seguramente la carga del script falla con un error de sintaxis en alguna parte.

Se ha propuesto modificar la última línea de la secuencia de comandos para que no sea un comentario en línea, hacer un comentario de varias líneas, de modo que cuando el código termina con */ el analizador esté bien con una declaración de función o algo más justo después.

No me gusta modificar mis scripts, muchos son de otros autores (jquery, etc.) y no quiero modificarlos. ¿Qué sucede si tengo que actualizarlos y volveré a encontrar este error después de actualizar un sitio web? no se ejecuta con debug="true" en la configuración.

Vengo con esta solución que funciona mejor para mí

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

De esta manera forzamos al agrupador a separar siempre los scripts con un nuevo carácter de línea. Debería hacerlo de forma predeterminada cuando la última línea del script anterior es un comentario de una sola línea.

Answer 2

Estoy seguro de que la causa de su problema es la última línea de jquery-1.9.0.min.js:

//@ sourceMappingURL=jquery.min.map

La versión no actualizada de jQuery 1.9 no contiene esto. Explicaré por qué en un minuto.

Me he dado cuenta de que cuando jquery-1.9.0.min.js se incluye con otro archivo, y que el otro archivo sigue a jquery-1.9.0.min.js, entonces el siguiente archivo JS es, en cierto modo, corrompido

La razón es que el inicio del siguiente archivo se agrega a la línea " // @ " de jQuery, lo que significa que luego se convierte en un comentario largo y extendido. En tu caso esto significó que el

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

el guión al inicio de Modernizr fue superado del proceso de agrupamiento como un comentario como este:

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

Hay una discusión sobre el rastreador de errores de jQuery con respecto a esto.

Sus opciones son eliminar la última línea o envolverla en símbolos de comentarios de varias líneas:

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

Además, puede ver que Modernizr también contiene un mapa fuente al final de su versión reducida. Y con buenas razones.

La razón detrás de esto es ayudarlo a depurar un problema cuando se ha utilizado la versión mínima del código. Esta línea le dice al navegador que este archivo minificado se asigna a otro archivo que puede ayudar en la depuración. Para aprovechar esto, necesita tener ese archivo de referencia (jquery.min.map) en el servidor o descargarlo al cliente. Además, creo que Chrome es el único navegador que actualmente admite esto; Todavía está en desarrollo en Firefox.

Esta página tiene una excelente explicación de los mapas fuente.

Entonces, en resumen, eliminarlo no debería causarle ningún problema a menos que desee volver a mapear a la versión original de la fuente mientras realiza la depuración en el navegador. En su caso, debido a la forma en que funciona el marco de optimización de ASP.NET, cuando debug = "True" servirá de todas formas a las versiones no minificadas, por lo que probablemente no tenga la necesidad de usar sourceMappingURL.

Answer 3

No pude responder a la respuesta de awj, arriba, así que simplemente la voté. Fantástica pieza de detective. Quería agregar a un comentario, que si bien el problema se solucionó en jquery 1.9.1 ahora aparece en jquery-migrate-1.1.0

Noté la referencia del archivo del mapa como solo un comentario de una sola línea al final del archivo "jquery-migrate-1.1.0.min.js". Así que siguiendo la sugerencia de awj, hice un comentario de varias líneas.

Entonces línea 3:

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

ahora se convierte en las líneas 3, 4 y 5 de la siguiente manera:

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

Una vez que volví a subir a mi ISP, volví a tener la funcionalidad completa de ajax.

Gracias de nuevo AWJ, ¡esto ha ayudado mucho!

Answer 4

Puede haber algún problema con su copia de modernizr.form-placeholder.js.

Acabo de encontrar el mismo error al intentar cargar jquery.peity.js.

Cuando quité la biblioteca, la página cargada bien. Así que simplemente fui y tomé los js en bruto de su sitio, rehice el archivo y lo cargué sin problemas.