Babel is a compiler (source code => output code). Like many other compilers it runs in 3 stages: parsing, transforming, and printing.
Plugins
Transform Plugins
apply transformations to your code.
Syntax Plugins
only allow Babel to parse specific types of syntax (not transform).
Plugin Ordering
This means if two transforms both visit the “Program” node, the transforms will run in either plugin or preset order.
- Plugins run before Presets.
- Plugin ordering is first to last.
- Preset ordering is reversed (last to first).
Presets
Presets can act as an array of Babel plugins or even a sharable options config.
The TC39 categorizes proposals into the following stages:
- Stage 0 - Strawman: just an idea, possible Babel plugin.
- Stage 1 - Proposal: this is worth working on.
- Stage 2 - Draft: initial spec.
- Stage 3 - Candidate: complete spec and initial browser implementations.
- Stage 4 - Finished: will be added to the next yearly release.
For more information, be sure to check out the current TC39 proposals and its process document.
The TC39 stage process is also explained in detail across a few posts by Yehuda Katz (@wycatz) over at thefeedbackloop.xyz: Stage 0 and 1, Stage 2, Stage 3
@babel/preset-typescript
This preset is recommended if you use TypeScript, a typed superset of JavaScript. It includes the following plugins:
@babel/plugin-transform-typescript
You will need to specify --extensions ".ts" for @babel/cli & @babel/node cli’s to handle .ts files.
@babel/preset-react
This preset always includes the following plugins:
@babel/plugin-transform-react-jsx
@babel/plugin-transform-react-display-name
And with the development option:Classic runtime adds:
