jquery 1.9.0 and modernizr cannot be minified with

问题:

We are using the ASP.NET Web Optimization Framework with bundles and minification. One bundle just contains jquery and modernizr. This all worked fine with jquery 1.8.3 but since we updated to 1.9.0 the combination jquery/modernizer bundle is not working anymore.

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

We have both jquery-1.9.0.js and jquery-1.9.0.min.js in the directory. If there is no .min file the optimization framework will generate one automatically. It doesn't work if the .min file is there or not.
It works if compilation debug="true" and there is no minification or 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'))
             );
 */

回答1:

I'm sure that the cause of your problem is the last line of jquery-1.9.0.min.js:

//@ sourceMappingURL=jquery.min.map

The unminified version of jQuery 1.9 does not contain this. I'll explain why in a minute.

I've noticed myself that when jquery-1.9.0.min.js is bundled with another file - and that other file follows jquery-1.9.0.min.js - then the following JS file is, in a manner of speaking, corrupted.

The reason is that the start of the following file is appended to the "//@" line of jQuery, which means that it then becomes one long, extended comment. In your case this meant that the

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

script at the start of Modernizr was outputed from the bundling process as a comment like so:

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

There's a discussion on jQuery's Bug Tracker regarding this.

Your options are either to remove that last line or to wrap it in multi-line comment symbols:

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

Also, you can see that Modernizr also contains a source map at the end of its minified version. And with good reason.

The rationale behind it is to help you in debugging a problem when the minified version of the code has been used. This line tells the browser that this minified file maps to another file which can aid in debugging. To take advantage of this you need to have that referenced file (jquery.min.map) on the server or downloaded to the client. Plus, I believe that Chrome is the only browser currently supporting this; it's still under development at Firefox.

This page has an excellent explanation of Source Maps.

So in summary, removing it shouldn't really cause you any problems unless you wish to map back to the original version of the source while debugging in the browser. In your case, because of the way that ASP.NET's Optimization Framework works, when debug="True" it will serve up the unminified versions anyway, so you probably don't have a need to use the sourceMappingURL.

回答2:

I was unable to reply to awj's answer, above, so I just voted it up. Fantastic piece of detective work. I wanted to add on to a comment, that while the problem was indeed fixed in jquery 1.9.1 it now shows up in the jquery-migrate-1.1.0

I noticed the map file reference as only a single-line comment at the end of the "jquery-migrate-1.1.0.min.js" file. So following awj's suggestion I made it a multi-line comment.

So line 3:

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

now becomes lines 3, 4, and 5 as follows:

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

Once I uploaded back to my ISP I have full ajax functionality again.

Thank you again AWJ, this has helped out greatly!

回答3:

Reading the answers, even the accepted answer, the advised solution to this problem is to modify your scripts so the bundler has no trouble with this. This makes no sense to me, this is clearly a bug of the bundler not concatenating different scripts properly, specifically the bundler has a trouble when the last line of the n script is a normal line comment

// this is the last line of the n script

and then your next script does not start with a single line comment

function(){ var ...

the bundler, is by default configured with a ; as a the ConcatenationToken so the bundled code ends up being something like this:

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

Surely the script loading fails with a syntax error somewhere.

It has been proposed to modify the latest line of the script to not be an inline comment, make it a multiline comment, so when the code ends with */ the parser will be ok with a function declaration or something else right after it.

I don't like modifying my scripts, many are authored by somebody else (jquery, etc.) and I don't want to modify them, what if I have to upgrade them and will find this bug again after I upgrade a website and it doesn't run with debug="true" in the config.

I come with this solution working better for 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*",

This way we force the bundler to always separate the scripts with a new line character. It should do this by default when the last line of the previous script is a single line comment.

回答4:

There may be something wrong with your copy of modernizr.form-placeholder.js .

I just ran into the same error trying to load jquery.peity.js.

When I removed the library, page loaded fine. So I just went and grabbed the raw js from their site and remade the file and it loaded with no problems.