Using ES2020 features in NodeJS

I know that since you rarely set up a project from scratch, usually with a framework boilerplate. However, I think that it is necessary to understand how it is configured with Babel alone.

Thomas –

August 14th, 2023

3 minute read

On this page

Using ES2020 features in NodeJS
What is Babel?
Get in the action

Using ES2020 features in NodeJS

I know that since you rarely set up a project from scratch, usually with a framework boilerplate. However, I think that it is necessary to understand how it is configured with babel alone.

Learning a framework is not just studying the structure, features it provides, but we also need to understand why it can deliver such things. I personally consider it a good habit to learn anything, always dig deep. Normally, we mistake import/export provided in the modern NodeJS framework as a built-in NodeJS feature, while it is not. It requires Babel to work.

What is Babel?

Many newbie developers often mistake between Webpack and Babel and even consider Webpack and Babel as a bundler.

To be clear, Babel is a transpiler, Webpack is a bundler. In the world of Javascript, new syntaxes are adopted at a pace that the development of the browser cannot match up with. However, luckily, it is just new syntax, just sugar coat, it can be converted to back to old syntax. That is where the Babel comes in so everyone can write the JS code in the syntax you love, not need to care much about the syntax not yet released to the browser.

Webpack comes into play to bundle all of those transpiled JS files into one or more chunks for the sake of lazy loading, or simply make it easier for the browser not to go back and forth to download many resources instead of only a few.

Back to the case of NodeJS, import/export is not natively supported in NodeJS. Some would say that once NodeJS release a new version, it may support that. Unluckily, not everything is as simple as that. If you rent a server, we have to use that server NodeJS version, not at our fingertips every time. If you are using a cloud platform like Firebase, AWS, not all support the latest version, more likely offer the stable ones.

So if you are using React as your frontend and familiar with import/export syntax, in addition to that, you are setting some cloud functions which require the code to be minimal (no feature-rich framework used), then you may need this.

Get in the action

First, you can try to init a new JS project to test this out: npm init -y

Edit your package.json file like this:

{
  "name": "node-test",
  "version": "0.0.1",
  "main": "dist/index.js",
  "engines": {
    "node": "10"
  },
  "scripts": {
    "production": "babel src --out-dir dist --copy-files --include-dotfiles",
    "development": "babel src --out-dir dist --copy-files --include-dotfiles",
    "watch": "babel src --out-dir dist --copy-files --include-dotfiles --watch --verbose"
  },
  "devDependencies": {
    "@babel/cli": "^7.6.0",
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.9.5"
  }
}

In the src folder, create two files: index.js and posts.js

import posts from "./posts";
// Optional chaining syntax
posts.forEach(post => {
    const authorName = post?.author?.name;
    console.log(authorName);
});
const posts = [
    {
        id: 1,
        title: 'This is a post from Medium',
        author: {
            name: "Thomas Nguyen",
            email: "thomas@gmail.com"
        }
    },
    {
        id: 2,
        title: 'New morning post'
    },
];

export default posts;

The most important part here is the .babelrc file:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

Once done, you can run npm run watch to transpile the files from the src folder to the dist folder. And now, the dist folder should be the place where your app should actually run.

You can view the source code here on github. Or you can see my youtube video:

https://www.youtube.com/watch?v=ghfWjCr8tOo&t=21s

I hope that this might help. Happy coding!

Babel

React

Es2020