Uglify Causing Issues in IE8

I’ve recently been working on a project that requires IE8 support (eek!). The application is a one page app, written in Backbone with Marionette using Grunt as a taskrunner. During the “grunt build” process, all Javascript files are concatenated, minified and uglified. Unfortunately, using Uglifies default configuration in the Gruntfile caused issues with some of the variable names, which, in turn, caused Internet Explorer 8 to barf with an error.

After looking through the Uglify documentation (https://github.com/mishoo/UglifyJS), I found an interesting option that exists under the –beautify option called –quote-keys. After putting the following config into the Gruntfile, IE8 magically worked. Or is it magic?…

uglify: {
    options: {
        preserveComments: false,
        compress : false,
        mangle : false,
        beautify : {
            beautify: false,
            ascii_only: true,
            quote_keys: true
        }
    }
}

The quote_keys option will “quote keys in literal objects”. Basically, this means variable names are wrapped in an object with name-value pairs i.e.

var myObject = {
    foo: foo,
    bar: bar
};

After adding the additional “quote_keys” option to the Gruntfile, IE8 worked as intended.