I want to use Class properties in my webpack setup. Following along with this book (www.survivejs.com), I noticed the author adds 2 plugins to the .babelrc file: babel-plugin-syntax-class-propertiesas well as babel-plugin-transform-class-properties.
Looking at the babel docs of the syntax-class-properties it states:
Syntax only
This plugin only allows Babel to parse this syntax. If you want to transform it then see transform-class-properties.
What's the difference? And do I need both? My code seem to run fine just with the transform plugin.
The transformation is a three step process:
Syntax plugins are necessary for step 1: Proposals such as class properties introduce a new syntax, which cannot be parsed by current JavaScript parsers. Syntax plugins extend the parser so it understands the new syntax.
Example: Imagine I introduce a new token @, such as in
@.foo();
A JavaScript parser wouldn't be able to parse this code into an AST, because currently the @ is invalid in that position. So I'd have to extend the parser to parse it.
Transform plugins are necessary for step 2: Now that the source was parsed, we need to convert the AST nodes of the new feature into something that is valid in current JavaScript.
Example: The @ in my previous example is a new way to refer to this. To make it work in current environments which don't understand @, I need to transform and replace it with this, so that the above example becomes
this.foo();
And do I need both?
If you want to convert your code to ES5, yes.
My code seem to run fine just with the transform plugin.
You might be using a preset of something that already includes the syntax plugin.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments