Babel


This is a quick and dirty rundown of Babel.

Babel is, at its core, a transpiler. It basically takes code written in ES6 and converts it to ES5 so your browser understands your code. This does introduce some limitations, as not all ES6 code can be transpiled into something that can be reproduced in ES5.

For the purposes of playing with ES6 code within our browser in bootcamp, Babel has a few different ways we can implement it. With the most current version, the devs have modularized the entire package so that developers can pick and choose only what they actually need. This does make it a little more complicated for new developers, as there are now extra steps that have to be taken to get Babel up and running.

Babel-standalone



Add the following to your HTML document:





Install the env preset locally inside our project directory which allows the ES6 to be converted to ES5:

npm install babel-preset-env --save-dev


Now we have to create a .bablerc file inside of our project directory and enter the following code inside the file:


{
	"presets": ["env"]
}