Uglify mojs shape with noty plugin

Question

I am using the jQuery Noty plugin for generating notifications in the GUI and I want to use the mo animations. There even is an example animation which I would like to use on their website.

After uglifying my code base, this is the error that is returned:

SyntaxError: Unexpected token: name (x150) message: SyntaxError: Unexpected token: name (x150)', fileName: ...\notifications.js', lineNumber: 118, stack: 'Error\n at new JS_Parse_Error

The line number in question is the following:

var parent = new mojs.Shape({
        parent: n.barDom,
        width: 200,
        height: n.barDom.getBoundingClientRect().height,
        radius: 0,
        x: { [150]: -150 },
        duration: 1.2 * 500,
        isShowStart: true
});

More specifically, it is this what is causing the error:

{ [150]: -150 }

Apparently this isn't valid so I'm looking for an alternative for this notation. Can this be achieved in some way?

FYI, this is the gulp task I execute:

gulp.task('min:jsscripts', function () {
 return gulp.src(
    [
    'Scripts/**/*.js',
    '!Scripts/**/*.min.js',
    '!Scripts/**/*-debug.js',
    '!Scripts/**/*.map'
    ], { base: "./" })
    .pipe(tfs({ command: 'edit', params: { lock: 'none' } }))
    .pipe(uglify().on('error', function (e) {
        console.log(e);
    }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(diff())
    .pipe(diff.reporter({ fail: false }))
    .pipe(gulp.dest('.'));
});

Update:

I tried with a different minifier (babel with babili preset) and that seems to work. I read there is no ECMAScript 6 support with uglify so maybe is this syntax ECMAScript 6? If so, what would be an alternative syntax?

This is the updated gulp task:

gulp.task('min:jsscripts', function () {
 return gulp.src(
    [
    'Scripts/**/*.js',
    '!Scripts/**/*.min.js',
    '!Scripts/**/*-debug.js',
    '!Scripts/**/*.map'
    ], { base: "./" })
    .pipe(tfs({ command: 'edit', params: { lock: 'none' } }))
    .pipe(babel({ presets: ['babili'] }).on('error', function (e) {
        console.log(e);
    }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(diff())
    .pipe(diff.reporter({ fail: false }))
    .pipe(gulp.dest('.'));
});

If my assumption is right about the ECMASCript 6 syntax (as you will have noticed I am fairly unexperienced in this area), what would I need to do to transpile this to ECMASCript5? Is my gulp task already doing that?

Answer 1

My suspicions were right... I had to transpile the code above to make it ES5 compliant. This is the result of that:

var parent = new mojs.Shape({
                    parent: n.barDom,
                    width: 200,
                    height: n.barDom.getBoundingClientRect().height,
                    radius: 0,
                    x: _defineProperty({}, 150, -150),
                    duration: 1.2 * 500,
                    isShowStart: true
                });

function _defineProperty(obj, key, value) {
        if (key in obj) {
            Object.defineProperty(obj, key, {
                value: value, enumerable: true, configurable: true, writable: true
            });
        } else { obj[key] = value; } return obj;
}