jquery 1.9.0 et modernizr ne peuvent pas être minifiés avec l'ASP.NET Web Optimization Framework

Question

Nous utilisons le cadre d'optimisation Web d'ASP.NET avec des bundles et la minification. Un bundle contient uniquement jquery et modernizr. Tout cela fonctionnait bien avec jquery 1.8.3 mais depuis que nous avons mis à jour vers 1.9.0, la combinaison jquery/modernizer ne fonctionne plus.

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

Nous avons à la fois jquery-1.9.0.js et jquery-1.9.0.min.js dans le répertoire. S'il n'y a pas de fichier .min, le cadre d'optimisation en générera un automatiquement. Cela ne fonctionne pas si le fichier .min est présent ou non.
Il fonctionne si la compilation debug="true" et s'il n'y a pas de minification ou d'empaquetage.

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

Je suis sûr que la cause de votre problème est la dernière ligne de jquery-1.9.0.min.js :

//@ sourceMappingURL=jquery.min.map

La version non minifiée de jQuery 1.9 ne contient pas cela. Je vais expliquer pourquoi dans une minute.

J'ai remarqué moi-même que lorsque jquery-1.9.0.min.js est regroupé avec un autre fichier - et que cet autre fichier suit jquery-1.9.0.min.js - alors le fichier JS suivant est, pour ainsi dire, corrompu.

La raison en est que le début du fichier suivant est ajouté au " //@ "Ce qui signifie qu'il devient alors un commentaire long et étendu. Dans votre cas, cela signifie que le

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

script au début de Modernizr était sorti du processus d'empaquetage comme un commentaire comme ceci :

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

Il y a un discussion sur le Bug Tracker de jQuery à ce sujet.

Vous avez le choix entre supprimer cette dernière ligne ou l'insérer dans des symboles de commentaire de plusieurs lignes :

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

Vous pouvez également constater que Modernizr contient également une carte des sources à la fin de sa version minifiée. Et ce, pour une bonne raison.

La raison d'être de cette ligne est de vous aider à déboguer un problème lorsque la version réduite du code a été utilisée. Cette ligne indique au navigateur que ce fichier minifié correspond à un autre fichier, ce qui peut faciliter le débogage. Pour en profiter, vous devez avoir ce fichier référencé (jquery.min.map) sur le serveur ou téléchargé sur le client. De plus, je crois que Chrome est le seul navigateur qui prend actuellement en charge cette fonctionnalité ; elle est encore en cours de développement chez Firefox.

Cette page contient une excellente explication des cartes sources.

En résumé, sa suppression ne devrait pas poser de problème, sauf si vous souhaitez revenir à la version originale de la source lors du débogage dans le navigateur. Dans votre cas, en raison de la façon dont le cadre d'optimisation d'ASP.NET fonctionne, lorsque l'option debug="True" il servira les versions non minifiées de toute façon, donc vous n'avez probablement pas besoin d'utiliser le sourceMappingURL.

Answer 2

Je n'ai pas pu répondre à la réponse d'awj, ci-dessus, alors je l'ai simplement votée. Fantastique travail de détective. Je voulais ajouter à un commentaire que, bien que le problème ait été corrigé dans la version 1.9.1 de jquery, il apparaît maintenant dans la version 1.1.0 de jquery-migrate.

J'ai remarqué que la référence au fichier map n'était qu'un commentaire d'une seule ligne à la fin du fichier "jquery-migrate-1.1.0.min.js". En suivant la suggestion d'awj, j'en ai fait un commentaire de plusieurs lignes.

Donc ligne 3 :

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

devient maintenant les lignes 3, 4 et 5 comme suit :

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

Une fois que j'ai téléchargé à nouveau sur mon ISP, j'ai à nouveau une fonctionnalité ajax complète.

Merci encore AWJ, cela m'a beaucoup aidé !

Answer 3

En lisant les réponses, même la réponse acceptée, la solution conseillée à ce problème est de modifier vos scripts afin que le bundler n'ait aucun problème avec cela. Cela n'a aucun sens pour moi, c'est clairement un bug du bundler qui ne concatène pas correctement les différents scripts, spécifiquement le bundler a un problème quand la dernière ligne du n scripts est un commentaire de ligne normal

// this is the last line of the n script

et ensuite votre prochain script ne commence pas par une seule ligne de commentaire

function(){ var ...

le regroupeur, est par défaut configuré avec une ; comme un ConcatenationToken donc le code groupé finit par être quelque chose comme ça :

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

Le chargement du script échoue sûrement avec une erreur de syntaxe quelque part.

Il a été proposé de modifier la dernière ligne du script pour qu'elle ne soit pas un commentaire en ligne, mais un commentaire multiligne, de sorte que lorsque le code se termine par */ l'analyseur syntaxique acceptera une déclaration de fonction ou autre juste après.

Je n'aime pas modifier mes scripts, beaucoup sont rédigés par quelqu'un d'autre (jquery, etc.) et je ne veux pas les modifier, et si je dois les mettre à jour et que je retrouve ce bug après avoir mis à jour un site web et qu'il ne fonctionne pas avec debug="true" dans la configuration.

Je suis arrivé avec cette solution qui fonctionne mieux pour moi

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 cette façon, nous forçons le bundler à toujours séparer les scripts par un caractère de nouvelle ligne. Il devrait le faire par défaut lorsque la dernière ligne du scripts précédent est un commentaire d'une seule ligne.

Answer 4

Il y a peut-être un problème avec votre copie de modernizr.form-placeholder.js .

Je viens de rencontrer la même erreur en essayant de charger jquery.peity.js.

Lorsque j'ai supprimé la bibliothèque, la page s'est chargée correctement. J'ai donc récupéré les js bruts sur leur site et refait le fichier, qui s'est chargé sans problème.