Babel - @babeljs - Transpiling ES6
Most web browsers don't yet support ES6, and even those that do, don't support everything.
The only way to be sure that your ES6 code will work is to convert it to ES5 code before running it in the browser.
This process is called transpiling. One of the most popular tools for transpiling is Babel.
Babel was created by Sebastian McKenzie whilst he was still at high school in Australia. The first version of the project was called 6to5, and it was released in September 2014.
6to5 was a tool that could be used to convert ES6 syntax to ES5 syntax, which is more widely supported by the browser. As the project grew, it aimed to be a platform to support all of the latest changes in ECMAScript. It also grew to support transpiling JSX into pure React. The project was more appropriately renamed to Babel in February of 2015.
Babel is used in production at Facebook, Mozilla, Airbnb and more companies. Previously, Facebook had created a JSX transformer that was their standard, but soon retired that in favor of Babel. Its also used in Google Web Starter Kit.
There are many ways of working with Babel. The easiest way to get started is to include a link to the babel-core transpiler directly in your HTML which will transpile any code in script blocks that have a type of "text/babel". Babel will transpile the source code on the client before running it. Although this may not be the best solution for production, it is a great way to get started.
Transpiling in the Browser
This approach means that the browser does the transpiling at runtime. This is not a good idea for production because it will slow your application down a lot.
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/ 5.8.23/browser.js"> </script> <script src="script.js" type="text/babel"> </script>
Including babel-core (Babel v5.8 required)
To transpile code in the browser, use Babel v. 5.8. Using Babel 6.0+ will not work as an in-browser transformer.
Transpiling with Online Editors
When ES6 is fully supported by browsers - We won't have to use Babel anymore right?
Well as soon as this happens, we will want to use ES7 and beyond features, we'll likely be using Babel in the foreseeable future.
So how do we Transpile for production?
Build Steps - Gulp? Webpack? Or ?
We will provide an answer to this question very soon.
Babel 6 breaks possible transformations up into modules called presets. It requires engineers to explicitly define which transformations should be run by specifying which presets to use. The goal was to make everything more modular to allow developers to decide which syntax should be converted. The plugins fall into a few categories, and all are opt-in based on the needs of the application:
babel-preset-es2015 - Compiles ES2015, or ES6, to ES5
babel-preset-react - Compiles JSX to React.createElement calls
When a new feature is proposed for inclusion in the ECMAScript spec, it goes through stages of acceptance from Stage 0 Strawman (newly proposed and very experimental), to Stage 4, Finished (accepted as part of the standard). Babel provides presets for each of these stages, so you choose which stage you want to allow in your application.
- babel-preset-stage-0: Strawman
- babel-preset-stage-1: Proposal
- babel-preset-stage-2: Draft
- babel-preset-stage-3: Candidate