The process of transformation consists of three steps:
- First, the source code is parsed into an AST.
- Next, the AST is modified or transformed.
- Finally, the modified AST is printed out, converting it back into source code.
To achieve step 1, Syntax plugins are essential: New syntax proposals like class properties require a specialized parser as current JavaScript parsers may not recognize them. Syntax plugins extend the parser to comprehend and parse the new syntax correctly.
For instance, let's consider introducing a new token @ as shown below:
@.foo();
A standard JavaScript parser would struggle to interpret this code due to the presence of the @ symbol in an unexpected position. Therefore, extending the parser becomes necessary to handle such cases.
Transform plugins come into play during step 2: After successfully parsing the source code, the AST nodes corresponding to the new feature need to be converted into a format compatible with traditional JavaScript environments.
For example, if we use @ to represent this, adjustments are required to translate this syntax for execution in current JavaScript contexts:
this.foo();
Do I need both types of plugins?
If your goal is to convert the code to ES5, then yes, you'll need both Syntax and Transform plugins.
I've noticed that my code runs smoothly with just the transform plugin.
In some cases, it's possible that the preset you're using already incorporates the necessary syntax plugin, hence enabling your code to function properly without explicitly including it.