Expressjs: Javascript written in ECMAScript 2015 (ES6)
Tags: express, esm, babel, es6
Published: 2021-12-19 12:08:33

#### Prerequisites

This tutorial assumes that you have the following:

* Basic knowledge of Node
* Node installed on your machine
* Any code or text editor of your choice 

Initially, create Express application with command in terminal. 

```
npx express-generator < your-project-name > --no-view
```

Here, --no-view flag means that we will not use any template engine such as handlebars, ejs or pug, for our skeleton Express application. 

After creating your application, you need to go to your application directory. For Windows Powershell and Linux terminals, use:

cd your-project-name

Then open your desired text editor. For me I only use VSCode so I have my terminal and my text editor open at the same time. But you can use any text editor you want.

Install dependencies with the following command:

```
npm install
```
Once we have the generated project ready, we need to install the dependencies and move some folders. Run this command to install other packages.

Here we can use three different kinds or methods to do our job with ease. 

**First Method**:

Type the following in terminal: 

```
npm install esm
```

and also install nodemon for specific project only as
```
npm install --save-dev nodemon  or npm install -D nodemon
```
Nodemon automatically restarts your application and allows you to test new changes to your Express app faster, or install as a global NPM dependency
```
npm install -g nodemon  
```
Enable esm for packages: Use esm to load the main ES module and export it as CommonJS in the main entry file, index.js. 

```
require = require("esm")(module);
module.exports = require("./app.js");
```
create a new file, app.js and add the following.
 
```
const express = require('express');
import express from 'express';

var app = express();
var PORT = 3000;
 
app.listen(PORT, function(err){
    if (err) console.log("Error in server setup")
    console.log("Server listening on Port", PORT);
})
```
run the app with:

npm start

at this stage if you had any problems use the
[codesendbox link](https://codesandbox.io/s/workforweb-5hy3e) as a reference.


**Second Method**: 

add the following in project's package.json file. 

```
"type": "module"
```
and voila, but you need to add extensions with all files, which you want to add as import, like  (filename.js), as example: 

import userRoutes from './routes/userRoutes.js';

at this stage if you had any problems use the 
[codesendbox link](https://codesandbox.io/s/workforweb-1ecrh) as a reference.

**Third Method**:

using Babel setup

What is Babel?

Babel is a JavaScript compiler, that helps you use the ES6 functions of the JavaScript programming language. 

add the following packages, we use the command

```
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node babel-plugin-module-resolver rimraf
```

or

```
npm install -D @babel/core @babel/cli @babel/preset-env @babel/node babel-plugin-module-resolver rimraf
```

after installing the packages, add the following in project's package.json file.

```
"scripts": {
    "build": "npm run clean && babel ./src --out-dir dist --copy-files",
    "clean": "rimraf dist",
    "prod": "npm run -s build",
    "start": "node dist/app.js",
    "dev": "nodemon --exec babel-node src/app.js"
},
```

So once you are done with the installation, create a new file called .babelrc to configure babel. Add the following text in it. 

```
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "@routes": "./src/routes"
        }
      }
    ]
  ]
}
```

### conclusion

We learned how to use ES6 in our Node.js project to write the latest JavaScript functions in the best way.

Feel free to check the code on [GitHub Repository](https://github.com/workforweb/express-babel-starter.git) if you had any trouble following the last part of this article, when we included Babel as a JavaScript compiler. 

If you have any questions or comments about this article, please do not hesitate to reach out.

Thank you for reading. 

### Credits

**Express.js**, the minimal and flexible Node.js web application framework: https://expressjs.com/

**Esm**, Tomorrow's ECMAScript modules today!: https://github.com/standard-things/esm#readme

**Nodemon**, reload, automatically: https://nodemon.io/

**Babel**, is a JavaScript compiler: https://babeljs.io/docs/en/usage