Consider allowing alternate minifier instead of uglify for better ESNext support

[delebash]

I'm submitting a feature request

• Library Version:
  0.24.0

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  7.50

• NPM Version:
  4.0.5

• Browser:
  Chrome 56

• Language:
  ESNext

Current behavior:
UglifyJS does not support some ESNext features available in babel and current browsers such as Generators and Async Functions.

Both fail with error 'SyntaxError: Unexpected token operator «*», expected punc «(»',

Expected/desired behavior:
ESNext features supported by babel should also be supported by the aurelia-cli minification process.

To reproduce
Add a generator function to your code and run au build --env prod

Possible solutions:
If the minification process is extracted to a gulp task then the user can swap out uglify with
babili which supports the same features as babel.

Uglify does have a harmony version which has better support for ESNext features but there is a long discussion on which might be better to use moving forward. By extracting to a gulp task it gives the user the ability to choose.

[AStoker]

I could be an extra layer of thick today, so bear with me if I'm overlooking something :)
You're talking about the process of transpiling the code, right? That process takes place in the transpile task located inside your aurelia_project/tasks folder. In there, there's a gulp task that uses Babel to transpile. But that process is completely up to the user to change, convert, or do whatever to. If you don't want to use Babel, are you not simply able to swap out the transpiler there?

[delebash]

No :) When you specify --env prod aurelia-cli runs uglify-js process which is baked into the cli, uglify is not a gulp task in aurelia_project/tasks. If you look at node_modules/aurelia-cli/lib/build/bundle.js you can see uglify is hard coded.

const UglifyJS = require('uglify-js'); //added to user project devDependencies
let minificationResult = UglifyJS.minify(String(contents), minificationOptions);

Yes you can use any transpiler you want with your own minification process via gulp tasks, but if you want to use the built in --env prod switch then aurelia-cli will use it's own minification process via uglify.

[AStoker]

Okay, thanks for getting me straight.
So the Babel task happens first, and then the uglification happens as the last step. So what babel is outputting isn't compatible with the uglifier built in, correct?
It sounds reasonable to have something like that pluggable. Do you think you could generate a PR for that so we could take a look?

[delebash]

Yep. It will be awhile before I can really dig in, but as soon as I get the chance I will. Right now just installing the harmony branch of uglify takes care of generators and async. I have only tested with generators and async so I am not sure what other ESNext features uglify-js harmony provides.

[kushwahashiv]

I am also getting the error

[12:52:01] SyntaxError: Unexpected token operator «*», expected punc «(»
    at JS_Parse_Error.get (eval at <anonymous> (/Users/Shiv/projects/rapidui-parser/node_modules/uglify-js/tools/node.js:27:1), <anonymous>:86:23)
    at formatError (/Users/Shiv/projects/rapidui-parser/node_modules/gulp/bin/gulp.js:165:17)
    at Gulp.<anonymous> (/Users/Shiv/projects/rapidui-parser/node_modules/gulp/bin/gulp.js:195:15)
    at emitOne (events.js:120:20)
    at Gulp.emit (events.js:210:7)
    at Gulp.Orchestrator._emitTaskDone (/Users/Shiv/projects/rapidui-parser/node_modules/orchestrator/index.js:264:8)
    at /Users/Shiv/projects/rapidui-parser/node_modules/orchestrator/index.js:275:23
    at finish (/Users/Shiv/projects/rapidui-parser/node_modules/orchestrator/lib/runTask.js:21:8)
    at /Users/Shiv/projects/rapidui-parser/node_modules/orchestrator/lib/runTask.js:45:4
    at <anonymous>
[12:52:01] 'rapidui-parser:build-release:clean' errored after 1.62 s
[12:52:01] SyntaxError in plugin 'run-sequence(rapidui-parser:build:bundles)'
Message:

is there any workaround for this?

Any quick help would be appreciated.

/Shiv

[delebash]

Are you using async or generator functions in your code? If so did you try installing the harmony branch of uglifyjs? Run npm install uglify-es -g to install the latest harmony release.

[rodu]

Would it be an option to use uglify-es instead of uglify-js?

For example, when using the new babel-preset-env, transpiling can easily produce ES6 code, but then the build fails because of uglify-js.

I have created a branch of the CLI using uglify-es at bundling time. It seems to work for me with ES5/ES6 output from babel. Would this be a viable solution?

[Alexander-Taran]

@rodu could it be also incorporated in ts builds?
and webpack builds for that matter?
Also, you can create a PR.. so we could look at your modifications.

[rodu]

From my tests, webpack@4 seems OK as it should be using uglify-es under the hood already:
https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

For TypeScript, I created a new project and changed the tsconfig.json to target ES6 output. Then the au build --prod completed successfully. Same for ESNext project using babel to generate ES6 code as output.

I am not an expert of the CLI by any means, and while I tried to do my best, some more verifications of the patch would be very welcome.

[Alexander-Taran]

@rodu
can you comment on how ppl can test your PR in their setups?
https://discourse.aurelia.io/t/testers-welcome/1037