New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

es6 support for JavaScript #202

Open
c0mrx opened this Issue Oct 11, 2018 · 7 comments

Comments

2 participants
@c0mrx

c0mrx commented Oct 11, 2018

Will there ever be support for es6 in autoptimize? There are a few branches of uglifyJS that can be used. Even if it's an extra option a user can select in the back end. Cheers!

Uglify-es

@futtta

This comment has been minimized.

Show comment
Hide comment
@futtta

futtta Oct 11, 2018

Owner

never say never, but;

  • there's not a whole lot of ES6 in the WordPress ecosystem
  • uglify-es is a node.js npm module while AO is PHP-only (except for some client-side JS in the admin but doens't really count)

or do you see possibilities here that I'm missing?

Owner

futtta commented Oct 11, 2018

never say never, but;

  • there's not a whole lot of ES6 in the WordPress ecosystem
  • uglify-es is a node.js npm module while AO is PHP-only (except for some client-side JS in the admin but doens't really count)

or do you see possibilities here that I'm missing?

@c0mrx

This comment has been minimized.

Show comment
Hide comment
@c0mrx

c0mrx Oct 11, 2018

@futtta Thanks for the quick reply! I wasn't sure of the inner workings of autoptimize, so I apologize if i was assuming any of this would be easy. I just think it would be great to be able to try to accommodate it as I have to minify these files separately and exclude them in the plugin settings. Just wanted to see if it was possible or if it was something that was being worked on. Thanks again!

c0mrx commented Oct 11, 2018

@futtta Thanks for the quick reply! I wasn't sure of the inner workings of autoptimize, so I apologize if i was assuming any of this would be easy. I just think it would be great to be able to try to accommodate it as I have to minify these files separately and exclude them in the plugin settings. Just wanted to see if it was possible or if it was something that was being worked on. Thanks again!

@futtta

This comment has been minimized.

Show comment
Hide comment
@futtta

futtta Oct 11, 2018

Owner
Owner

futtta commented Oct 11, 2018

@c0mrx

This comment has been minimized.

Show comment
Hide comment
@c0mrx

c0mrx Oct 12, 2018

If i try to minify the following code:

const ease = {
    cubicInOut: ( t ) => {
      return t < 0.5 ?
        4.0 * t * t * t :
        0.5 * Math.pow( 2.0 * t - 2.0, 3.0 ) + 1.0;
    }
  }

With a standard JS minifier, I get the following error:

// Error : Unexpected token: keyword (const)
// Line  : 1
// Col   : 0

If I use a JS minifier with ES6 support, it spits out the following:

const ease={cubicInOut:c=>c<.5?4*c*c*c:.5*Math.pow(2*c-2,3)+1};

So to get around this I minify the file using the ES6 minifier, and exclude it in Autoptimize, but it would be nice to keep it all together. Hope this helps explain my issue a little better, cheers!

c0mrx commented Oct 12, 2018

If i try to minify the following code:

const ease = {
    cubicInOut: ( t ) => {
      return t < 0.5 ?
        4.0 * t * t * t :
        0.5 * Math.pow( 2.0 * t - 2.0, 3.0 ) + 1.0;
    }
  }

With a standard JS minifier, I get the following error:

// Error : Unexpected token: keyword (const)
// Line  : 1
// Col   : 0

If I use a JS minifier with ES6 support, it spits out the following:

const ease={cubicInOut:c=>c<.5?4*c*c*c:.5*Math.pow(2*c-2,3)+1};

So to get around this I minify the file using the ES6 minifier, and exclude it in Autoptimize, but it would be nice to keep it all together. Hope this helps explain my issue a little better, cheers!

@futtta

This comment has been minimized.

Show comment
Hide comment
@futtta

futtta Oct 12, 2018

Owner

interesting ... some follow-up questions;

  • how does the es6 optimized JS differ from the 'normal' optimized JS? what in the minification causes the error you showed?
  • is there a way to recognize ES6 (to distinguish it from whatever-version-JS) so we could auto-exclude it?
Owner

futtta commented Oct 12, 2018

interesting ... some follow-up questions;

  • how does the es6 optimized JS differ from the 'normal' optimized JS? what in the minification causes the error you showed?
  • is there a way to recognize ES6 (to distinguish it from whatever-version-JS) so we could auto-exclude it?
@c0mrx

This comment has been minimized.

Show comment
Hide comment
@c0mrx

c0mrx Oct 12, 2018

  1. I could try and compare the differences in how each parses/minifies the file and I'll investigate further and try and find more details on the error. This is not really my area of expertise, but I'm always up for a challenge!

  2. I suppose there wouldn't be any detectable difference, as you could mix and match between any standard in a JS file. The only solutions I can think of are either accommodating es6 in the minification process, or moving the code to a separate file like I'm already doing. I guess at the end of the day, it really comes down to how much es6 is used in the Wordpress environment and whether or not it's worth trying to accommodate.

That being said, I suppose I could also just rewrite the code myself and stay away from es6 standards which is a lot less labor intensive than modifying the plugin itself.

Cheers!

c0mrx commented Oct 12, 2018

  1. I could try and compare the differences in how each parses/minifies the file and I'll investigate further and try and find more details on the error. This is not really my area of expertise, but I'm always up for a challenge!

  2. I suppose there wouldn't be any detectable difference, as you could mix and match between any standard in a JS file. The only solutions I can think of are either accommodating es6 in the minification process, or moving the code to a separate file like I'm already doing. I guess at the end of the day, it really comes down to how much es6 is used in the Wordpress environment and whether or not it's worth trying to accommodate.

That being said, I suppose I could also just rewrite the code myself and stay away from es6 standards which is a lot less labor intensive than modifying the plugin itself.

Cheers!

@c0mrx

This comment has been minimized.

Show comment
Hide comment
@c0mrx

c0mrx Oct 12, 2018

I also just noticed that I could use babel to convert es6 to es5 which is also a possibility.

Demo

c0mrx commented Oct 12, 2018

I also just noticed that I could use babel to convert es6 to es5 which is also a possibility.

Demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment