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 🎉