Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:
/ Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);
/ Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
return n + 1;
});
For an awesome tutorial on compilers, check out the-super-tiny-compiler, which also explains how Babel itself works on a high level.
Babel has support for the latest version of JavaScript through syntax transformers.
These plugins allow you to use new syntax, right now without waiting for browser support. Check out our usage guide to get started.
Babel can convert JSX syntax! Check out our React preset to get started. Use it together with the babel-sublime package to bring syntax highlighting to a whole new level.
You can install this preset with
npm install --save-dev @babel/preset-react
yarn add --dev @babel/preset-react
pnpm add --save-dev @babel/preset-react
and add @babel/preset-react to your Babel configuration.
export default function DiceRoll(){
const getRandomNumber = () => {
return Math.ceil(Math.random() * 6);
};
const [num, setNum] = useState(getRandomNumber();
const handleClick = () => {
const newNum = getRandomNumber();
setNum(newNum);
};
return (
<div>
Your dice roll: {num}.
<button onClick={handleClick}>Click to get a new number</button>
</div>
);
};
Learn more about JSX
Babel can strip out type annotations! Check out either our Flow preset or TypeScript preset to get started. Keep in mind that Babel doesn't do type checking; you'll still have to install and use Flow or TypeScript to check types.
You can install the flow preset with
npm install --save-dev @babel/preset-flow
yarn add --dev @babel/preset-flow
pnpm add --save-dev @babel/preset-flow
/ @flow
function square(n: number): number {
return n * n;
}
or the typescript preset with
npm install --save-dev @babel/preset-typescript
yarn add --dev @babel/preset-typescript
pnpm add --save-dev @babel/preset-typescript
function Greeter(greeting: string) {
this.greeting = greeting;
}
Learn more about Flow and TypeScript!
Babel is built out of plugins. Compose your own transformation pipeline using existing plugins or write your own. Easily use a set of plugins by using or creating a preset. Learn more →
Create a plugin on the fly with generator-babel-plugin to generate a plugin template.
/ A plugin is just a function
export default function({ types: t }) {
return {
visitor: {
Identifier(path) {
let name = path.node.name; / reverse the name: JavaScript -> tpircSavaJ
path.node.name = [...name]
.reverse()
.join("");
},
},
};
}
Source map support so you can debug your compiled code with ease.
Babel tries to stay true to the ECMAScript standard, as much as reasonably possible. It may also have specific options to be more spec compliant as a tradeoff to performance.
Babel tries using the least amount of code possible with no dependence on a bulky runtime.
This may be difficult to do in cases, and there are "assumptions" options that tradeoff spec compliancy for readability, file size, and speed.