How to set up Babel 101

Devin Roche — Wed, 05 Dec 2018 03:43:47 +0000

I'm constantly having to look up how to set up babel to convert ES6 to ES5 so I figured I would write a post to help myself and possibly others!

Project Set Up

Ok so lets create a project directory and initialize our package.json

mkdir babel-dummy-dir
npm init

Now lets install the needed babel packages.

npm install --save-dev babel-cli babel-preset-env

babel-preset-env is the main library that we use to convert our ES6 to ES5. It works by having version mappings which allows babel to take our ES6 features and find ES5 features.

After that has finished we need to create our .babelrc file in the root directory.

touch .babelrc

Then we need to add the following.

{
  "presets": ["env"]
}

Now let's create our src folder!

mkdir src
cd src && touch index.js

Start Hacking

Now we can enter some fancy ES6 code into our index.js. I'll be using the code below.

class Dog {
  constructor (name) {
    this.name = name;
  }

  static bark(){
    console.log('woof');
  }
}

Dog.bark();

Now we are ready to run our program, but first we need to go into our package.json and add our build command. We can add two commands to our package!

"build": "babel src -d build",
"start": "node build/index.js"

Build & Run

We are ready to run our code now. Lets call our build command with npm run build, this will build all the files in our src directory into our build directory. Now it's time to run our ES5 code! Enter npm start and you should see something like the output below...

babel-dummy@1.0.0 start .../babel-dummy
node build/index.js

woof

There we have it, we compiled our ES6 code into ES5 using babel!

Forem: Devin Roche

How to set up Babel 101

Project Set Up

Start Hacking

Build & Run