Configuring Babel 7 with Node

After almost 2 years, 4k commits, over 50 pre-releases, and a lot of help we are excited to announce the release of Babel 7. It’s been almost 3 years since the release of Babel 6! There’s a lot of moving parts so please bear with us in the first weeks of release. Babel 7 is a huge release: we’ve made it faster, created an upgrade tool, JS configs, config “overrides”, more options for size/minification, JSX Fragments, TypeScript, new proposals, and more!

JavaScript is great. It can handle IO intensive tasks easily. It has a nice and friendly syntax and whatever you use it more, you’ll love it more. Each release brings new features to the table. But it takes time for runtime environments like NodeJS to implement those features. Luckily Babel is here to the resque! Here we want to help you create a basic project and configure Node to use Babel to transpile new features to already supported syntax. Enough verbosity. Roll up your sleeves and get ready for the fun part!

Initializing npm project

First of all Create a new project with

npm init -y

then create src folder in the root folder and change main property in the package.json file to src/index.js and create src/index.js file and add some code that NodeJS can’t handle without Babel

// index.js
import greet from "./greet";
greet("Aref Aslani");

then create src/greet.js file

// greet.js
export default (name) => console.log(`Hi, ${name}`);
// package.json
...
"main": "src/index.js",
...

Now try to run the source code without Babel

node src/index.js

As you can see, it complains about using unsupported syntax.

Install dependencies

Add required Babel dependencies

npm install @babel/cli @babel/core @babel/preset-env --save-dev

create .babelrc file in the root folder with

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

Transpiling and running

Transpile source code using babel

npx babel src --out-dir dist

Now you can run the javascript file using node

node dist/index.js
// => Hi, Aref Aslani

Configuring scripts for development and production

With the configurations we made so far, every time you make a change you should build the source code first so that you can run new code. Using babel-node, you can run new code without rebuilding it.

npm install @babel/node --save-dev

add dev property to package.json scripts section

// package.json
...
"scripts": {
  "dev": "babel-node src/"
},
...

Now you can run source with npm run dev without building it. If you’ve noticed, there’s a performance drop using babel-node instead of node and it isn’t suitable for production environment. Thus we should add more scripts to build and run the code in production environment.

//package.json
...
"scripts": {
  "dev": "babel-node src/",
  "build": "babel src/ --out-dir dist/ --copy-files",
  "start": "node dist/"
}
...

Now we have three scripts:

• dev: for running the project in development mode
• build: for transpiling the source code
• start: for running the project in production mode

That’s it! Now you can start coding in tomorrow’s syntax 🎉