JavaScript Compilation With Babel

6to5

var square = (n) => n * n

"use strict";

var square = function (n) {
  return n * n;
};

Babel

ES6

ES7

JSX

...

.babelrc

{
    "plugins": [
        "check-es2015-constants",
        "transform-es2015-arrow-functions",
        "transform-es2015-block-scoped-functions",
        "transform-es2015-block-scoping",
        "transform-es2015-classes",
        "transform-es2015-computed-properties",
        "transform-es2015-destructuring",
        "transform-es2015-duplicate-keys",
        "transform-es2015-for-of",
        "transform-es2015-function-name",
        "transform-es2015-literals",
        "transform-es2015-modules-commonjs",
        "and 9 other plugins"
    ]
}

.babelrc

{
    "plugins": [],
    "presets": ["es2015"]
}

Compilation

Parse

Traverse & Transform

Generate

Plugin Example

var greeting = "Hello"

var greeting = "Hi";

Parse

var greeting = "Hello"

astexplorer.net

Traverse & Transform

module.exports = function(babel) {
    return {
        visitor: {
            Literal: function(path) {
                path.node.value = "Hi"
            }
        }
    }
}

Generate

var greeting = "Hi";

Demo

// subfolder/app.js
import utils from "../utils"

console.log(utils);

// utils.js
export default "Successfully imported utils!"

@mattzeunert

bit.ly/jsm-babel

bit.ly/babel-demo

Slides

Demo Code

Questions