Configuring Babel

    This is because we haven’t told Babel to do anything yet.

    You can give Babel instructions on what to do by installing plugins or presets (groups of plugins).

    Before we start telling Babel what to do. We need to create a configuration file. All you need to do is create a .babelrc file at the root of your project. Start off with it like this:

    This file is how you configure Babel to do what you want.

    Let’s start by telling Babel to compile ES2015 (the newest version of the JavaScript standard, also known as ES6) to ES5 (the version available in most JavaScript environments today).

    We’ll do this by installing the “es2015” Babel preset:

    Next we’ll modify our .babelrc to include that preset.

    Setting up React is just as easy. Just install the preset:

    1. $ npm install --save-dev babel-preset-react

    Then add the preset to your .babelrc file:

    This process is broken through a 5 stage (0-4) process. As proposals gain more traction and are more likely to be accepted into the standard they proceed through the various stages, finally being accepted into the standard at stage 4.

    These are bundled in babel as 4 different presets:

    • babel-preset-stage-0
    • babel-preset-stage-3

    Each of these presets requires the preset for the later stages. i.e. babel-preset-stage-1 requires babel-preset-stage-2 which requires babel-preset-stage-3.

    Simply install the stage you are interested in using:

    1. $ npm install --save-dev babel-preset-stage-2