Does grunt-contrib-uglify not parse "let" keywords?

Question

I am getting an error,

'Unexpected token: name (bazz)'

when my grunt task is running uglify. The only thing I noticed on that line was that I was using the 'let' keyword instead of 'var', so I wasn't sure why that error was getting thrown.

I have an if else statement with let varName in each, i.e.:

function foo (bar) {
    if (condition) {
        let bazz = fn();
        //doSomething with bazz
        _.assign(bar, bazz);
    } else {
        let bazz = fn2();
        //doSomething different with bazz
        _.assign(bar, bazz);
    }
}

I could alter it by having a var bazz = {}; before the if else clause, but I wanted to avoid that because I'd have to assign bazz to fn() and fn2() regardless.

Wanted to know if anybody else has run into this and what they did to fix it. Thanks in advance!

Jackshaft

I encountered a similar problem with gulp-uglify. It threw an error Unexpected token name «i», expected punc «;» when it encountered a let keyword in a for loop declaration. for (let i = ca.length - 1; i >= 0; i--). Changing let to var seems to solve the issue. – Cyte

Answer 1

After researching this topic a little bit more I found out that grunt-contrib-uglify and also gulp-uglify has UglifyJS as a dependency and it does not support ES6 "Harmony" yet. Follow https://github.com/mishoo/UglifyJS2/issues/448 for updates.

You can also use tools like grunt-babel to compile your ES6 code to ES5.

Cyte

Answer 2

I came across the following on the official gulp-uglify npm page.

Note the recommendation:

To help properly handle error conditions with Node streams, this project recommends the use of pump. For more information, see Why Use Pump?.

My implementation of the example on the above page is:

gulpfile.js

var gulp = require('gulp');  
var pump = require('pump');  

// the npm page states:  
// can be a git checkout or another module 
// (such as `uglify-js-harmony` for ES6 support)
var uglifyjs = require('uglify-js-harmony');   
var minifier = require('gulp-uglify/minifier');  

var concat = require('gulp-concat');

gulp.task('compress', function (cb) {  
  // the 'options' argument is included in the example, 
  // but i don't know what it does or how it can be removed  
  var options = {  
    preserveComments: 'license'  
  };  

  pump([  
      gulp.src('my_scripts/*.js'),  // gets all js scripts in this folder  
      minifier(options, uglifyjs),  
      concat('my_bundled_script.js'), // concatenates all scripts into this file  
      gulp.dest('dist')  // puts the file into this folder
    ],cb 
  );  
});  

package.json

{
  "devDependencies": {
    "gulp": "latest",
    "pump": "latest",
    "gulp-concat": "latest",
    "gulp-uglify": "latest",
    "uglify-js-harmony": "latest"
  },
  "dependencies": {}
}

Results

Without using uglify-js-harmony:

• pump was helpful in locating where the error came from (when using gulp-uglify)
• a file that had a let statement caused errors

When using uglify-js-harmony, the errors did not occur.

Other considerations:

The above page currently shows:

// can be a git checkout or another module  
// (such as `uglify-js-harmony` for ES6 support)
var uglifyjs = require('uglify-js');

But when installing uglify-js-harmony I got the warning message:

npm WARN deprecated [email protected]: deprecated in favour of uglify-es

When I tried to use uglify-es instead of uglify-js-harmony , however, I got an error message, similar to that documented here:

https://github.com/terinjokes/gulp-uglify/issues/287

I tried to follow the issue thread from there but got lost and couldn't find a definitive solution of how to implement uglify-es.

Lieberman

This isn't an answer to the question. – Flitter