Configuring

Damian Mullins

6 Preparing the workspace

package.json

Create package.json file

npm init

npm install babel-cli -save-dev

"scripts": {}

"build": "babel src --out-dir dist"

{
  "scripts": {
    "build": "babel src --out-dir dist"
  },
  "devDependencies": {
    "babel-cli": "^6.5.1"
  }
}

Install babel-cli package

Add "scripts" object

Add "build" script

Workspace

mkdir src

Create "src" directory

function sayHello(name = 'World') {
    return `Hello ${name}!`;
}

function sayGoodbye(name = 'World') {
    return `Goodbye ${name}!`;
}

var helloKeith = sayHello('Keith');
var goodbyeKeith = sayGoodbye('Keith');

console.log(helloKeith);
console.log(goodbyeKeith);

Add "index.js" script

Let's transpile!

Run the npm script

npm run build

> @ build c:\babel
> babel src --out-dir dist

src\index.js -> dist\index.js

ES5

function sayHello(name = 'World') {
    return `Hello ${name}!`;
}

function sayGoodbye(name = 'World') {
    return `Goodbye ${name}!`;
}

var helloKeith = sayHello('Keith');
var goodbyeKeith = sayGoodbye('Keith');

console.log(helloKeith);
console.log(goodbyeKeith);

FTW!

Wait...?

Nothing happened

The setup section on the Babel website provides the answer:

Pre-6.x, Babel enabled certain transformations by default. However, Babel 6.x does not ship with any transformations enabled. You need to explicitly tell it what transformations to run.

H?!

T

W

In this futuristic land of Babel 6 no transformations are applied by default; plugins are now opt-in which explains why the code remained the same!

That's great and all but how do we tell Babel to transform our code?

Diagnosing problems with the Doctor

A nice way to tell if there are any issues with our Babel setup is to run the "babel-doctor" command which is part of babel-cli

"doctor": "babel-doctor"

Add "doctor" to package.json scripts

npm run doctor

Run

× Found no .babelrc config
√ No duplicate babel packages found
√ All babel packages appear to be up to date
√ You're on npm >=3.3.0

Ahh so we're missing a configuration file, .babelrc, in which we can specify Babel API options.

The diagnosis

Configuration

.babelrc

Let's create a .babelrc file in the root of the project, adding an empty object as the content

{}

Configuring plugins

To enable transformation of the default parameters we need to add the ES2015 parameters transform.

Add the parameters transform plugin

npm i babel-plugin-transform-es2015-parameters -D

Add the template literals transform plugin

npm i babel-plugin-transform-es2015-template-literals -D

Adding plugins to config

So now we have some plugins installed let's add them to the .babelrc config file.

{
    "plugins": [
        "transform-es2015-parameters",
        "transform-es2015-template-literals"
    ]
}

Run the npm script

npm run build

> @ build c:\babel
> babel src --out-dir dist

src\index.js -> dist\index.js

ES5


function sayHello() {
    var name = arguments.length <= 0 || arguments[0] === undefined ? 'World' : arguments[0];

    return 'Hello ' + name + '!';
}

function sayGoodbye() {
    var name = arguments.length <= 0 || arguments[0] === undefined ? 'World' : arguments[0];

    return 'Goodbye ' + name + '!';
}

var helloKeith = sayHello('Keith');
var goodbyeKeith = sayGoodbye('Keith');

console.log(helloKeith);
console.log(goodbyeKeith);

FTW!

The Power of the Preset

As you can probably tell this would quickly become very time consuming as you start using more es2015 features. Let's look at how to simplify our workflow.

As well as specifying each package individually, giving us full control over what is transforms, we can also use presets.

Presets group together a bunch of plugins, for example the es2015 preset contains everything we need in order to transform es2015 features.

Adding a preset

Add the es2015 preset by running

Add the preset to the .babelrc file

npm i babel-preset-es2015 -D

{
  "presets": ["es2015"]
}

Run the NPM script

'use strict';

function sayHello() {
    var name = arguments.length <= 0 || arguments[0] === undefined ? 'World' : arguments[0];

    return 'Hello ' + name + '!';
}

function sayGoodbye() {
    var name = arguments.length <= 0 || arguments[0] === undefined ? 'World' : arguments[0];

    return 'Goodbye ' + name + '!';
}

var helloKeith = sayHello('Keith');
var goodbyeKeith = sayGoodbye('Keith');

console.log(helloKeith);
console.log(goodbyeKeith);

Configuring plugins

There are other presets available from the Babel website such as one for each ECMAScript stage, and one for React.

There are a lot more available on NPM.

Damian Mullins

@DJMelonz

Short tutorial available at github.com/DJMelonz/starting-out-with-babel