Babeljs Page

Babel - @babeljs - Transpiling ES6

Babel is a JavaScript compiler. Use next generation JavaScript, today.

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.

In the past, the only way to use the latest JavaScript features was to wait until browsers supported them.

Now, transpiling has made it possible to use the latest features of JavaScript right away. The transpiling step makes JavaScript similar to other lanugages.

Transpiling is not compiling - our code isn't compiled to binary. Instead, it's transpiled into syntax that can be interpreted by a wider range of browsers (ES5). Also, JavaScript now has source code, meaning that there will be some files that belong to your project that don't run in the browser or need deploying.

Most software languages allow you to compile your source code. JavaScript is an interpreted language, the browser interprets the code as text so there is no need to compile JavaScript. However, browsers do not yet support the latest ES6 and ES7 syntax, and no browser supports JSX syntax. Since we want to use the latest features of JavaScript along with JSX, we are going to need a way to convert our fancy source code into something that the browser can interpret. This process is called transpiling, and it is what Babel is designed to do.

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.

You can transpile JavaScript directly in the browser using the inline Babel transpiler. You just include the browser.js file, and any scripts with type="text/babel" will be converted. Even though Babel 6 is the current version of Babel, only the CDN for Babel 5 will work.


<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)


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Examples</title>
  </head>
  <body>
    <div class="react-container"></div>
    <script src="//fb.me/react-15.1.0.js"></script>
    <script src="//fb.me/react-dom-15.1.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/
	babel-core/5.8.29/browser.js"></script>
    <script type="text/babel">
        // JSX code here. 
		// Or link to separate JavaScript file that contains JSX.
    </script>
  </body>
</html>

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

Another simple way to get started with Babel is to use their online Try it out feature or one of the other code in a browser services like CodePen, JsFiddle, jsbin, Cloud9.

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 Presets

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.

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

Stage Presets

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

Transpiler Links

Babel

TypeScript

Visual Studio