INTRODUCTION
ECMAScript 2015 or ES6 was the second major revision to JavaScript. Many of you probably might be using it with popular front-end libraries such as react. Even though ES6 syntax is much better and as developers we loved to use it quite often, there are few versions of browsers that won't support ES6. Due to this reason we use babel a javascript transpiler to compile the ES6 code to lower versions. This is done in tools such as create react app.
Now let's come to Nodejs a javascript runtime that runs javascript outside the browser. Let's see how a simple express app would look while using ES6 and ES6
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World');
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
// ES6 version
import express from 'express';
var app = express();
app.get('/', (req, res)=> {
res.send('Hello World');
})
app.listen(3000, () => {
console.log("Example app listening at port 3000")
})
Some of the changes we can observe here are,the use of ES6 imports and arrow functions but it's not limited to that, you can check here for more differences and additions.
METHODS TO WRITE ES6 CODE
METHOD 1
From nodejs 13+ ES6 has been added as an experimental feature. You can enable this by adding type = "module" to your package.json.
{
"name": "demo",
"version": "1.0.0",
"type":"module", <
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
}
}
METHOD 2
Here if use babel to transpile our ES6 code to ES5 code. We need to install the following packages to do that.
npm install --save-dev @babel/cli @babel/core @babel/node @babel/preset-env
We can also install an additional dependency called nodemon to restart our server automatically when we make changes
npm install
Now lets us configure our package.json to use babel to transpile our ES5 code to ES6
Create a folder called src at the root of the project and move the index.js(the file with your express app) file into it
Let's add the following scripts to our package.json
"scripts": {
"build": "babel ./src --out-dir dist",
"start": "nodemon --exec babel-node src/index.js "
},
Run the following code to start the development server and to transpile your code respectively.
npm start // starts a development server
npm run build //transpile the code to ES6 and store it in a directory called dist
The final project structure would look like the one bellow
The final package.json will look the like the one bellow
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel ./src --out-dir dist",
"start": "nodemon --exec babel-node src/index.js "
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"@babel/cli": "^7.14.8",
"@babel/core": "^7.15.0",
"@babel/node": "^7.14.9",
"@babel/preset-env": "^7.15.0"
}
}
That's it , you are now ready to get up and running with ES6 🎉. If you have any queries reach out to me via Twitter .
