What is Babel?

    • Transform syntax
    • Source code transformations (codemods)
    • And more! (check out these videos for inspiration)

    ES2015 and beyond

    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 to get started.

    Babel can convert JSX syntax! Check out our React preset to get started. Use it together with the package to bring syntax highlighting to a whole new level.

    You can install this preset with

    Type Annotations (Flow and TypeScript)

    Babel can strip out type annotations! Check out either our 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

    1. npm install --save-dev @babel/preset-flow

    or the typescript preset with

    1. npm install --save-dev @babel/preset-typescript

    Create a plugin on the fly with or use generator-babel-plugin to generate a plugin template.

    1. // A plugin is just a function
    2. export default function({ types: t }) {
    4.     visitor: {
    5.         let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
    6.         path.node.name = name
    7.           .split("")
    9.           .join("");
    10.       },
    11.     },
    12.   };
    13. }

    Debuggable

    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.

    Compact

    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 options that tradeoff spec compliancy for readability, file size, and speed.