Babel is a compiler. At a high level, it has 3 stages that it runs code in: parsing, transforming, and generation (like many other compilers).
For an awesome/simple tutorial on compilers, check out the-super-tiny-compiler, which also explains how Babel itself works on a high level.
Now, out of the box Babel doesn’t do anything. It basically acts like const babel = code => code; by parsing the code and then generating the same code back out again.
You will need to add some plugins for Babel to do anything (they affect the 2nd stage, transformation).
Don’t know where to start? Check out some of our presets.
Don’t want to assemble your own set of plugins? No problem! Presets are sharable .babelrc configs or simply an array of babel plugins.
We’ve assembled some for common environments:
Each yearly preset only compiles what was ratified in that year.
babel-preset-envreplaces es2015, es2016, es2017, latest
Many other community maintained presets are available on npm!
Any transforms in stage-x presets are changes to the language that haven’t been approved to be part of a release of Javascript (such as ES6/ES2015).
“Changes to the language are developed by way of a process which provides guidelines for evolving an addition from an idea to a fully specified feature”
Subject to change
These proposals are subject to change so use with extreme caution, especially for anything pre stage-3. We plan to update stage-x presets when proposals change after each TC39 meeting when possible.
The TC39 categorizes proposals into the following stages:
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, and Stage 4 coming soon.
These plugins apply transformations to your code.
Transform plugins will enable the corresponding syntax plugin so you don't have to specify both.
Check out our minifier based on Babel!
These plugins are in the minify repo.
These plugins allow Babel to parse specific types of syntax (not transform).
NOTE: Transform plugins automatically inherit/use the syntax plugins so you don’t need to specify the syntax plugin if the corresponding transform plugin is used already.
You can also provide any plugins option from babylon:
// .babelrc
{
"parserOpts": {
"plugins": ["jsx", "flow"]
}
}
These plugins have no effect anymore, as a newer babylon version enabled them by default
If the plugin is on npm, you can pass in the name of the plugin and babel will check that it’s installed in node_modules
"plugins": ["babel-plugin-myPlugin"]
You can also specify an relative/absolute path to your plugin/preset.
"plugins": ["./node_modules/asdf/plugin"]
If you prefix the plugin with babel-plugin-, you can use a shorthand to leave out that prefix
"plugins": ["myPlugin"]
Same with presets
"presets": ["babel-preset-myPreset"]
vs
"presets": ["myPreset"]
This also works with scoped packages:
"presets": ["@org/babel-preset-name"]
shorthand
"presets": ["@org/name"]
Ordering matters for each visitor in the plugin.
This means if two transforms both visit the “Program” node, the transforms will run in either plugin or preset order.
For example:
{
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
}
Will run transform-decorators-legacy then transform-class-properties.
It is important to remember that with presets, the order is reversed. The following:
{
"presets": [
"es2015",
"react",
"stage-2"
]
}
Will run in the following order: stage-2, react, then es2015.
This is mostly for ensuring backwards compatibility, since most users list “es2015” before “stage-0”. For more information, see notes on potential traversal API changes.
Both plugins and presets can have options specified by wrapping the name and an options object in an array inside your config.
For example:
{
"plugins": [
["transform-async-to-module-method", {
"module": "bluebird",
"method": "coroutine"
}]
]
}
Settings options for presets works exactly the same:
{
"presets": [
["es2015", {
"loose": true,
"modules": false
}]
]
}
Please refer to the excellent babel-handbook to learn how to create your own plugins.
The simple plugin that reverses names (from the homepage):
export default function () {
return {
visitor: {
Identifier(path) {
const name = path.node.name;
// reverse the name: JavaScript -> tpircSavaJ
path.node.name = name.split("").reverse().join("");
}
}
};
}
To make your own preset, you just need to export a config.
// Presets can contain other presets, and plugins with options.
module.exports = {
presets: [
require("babel-preset-es2015"),
],
plugins: [
[require("babel-plugin-transform-es2015-template-literals"), { spec: true }],
require("babel-plugin-transform-es3-member-expression-literals"),
],
};
For more info, check out the babel handbook section on presets or just look at the es2015 preset repo as an example.