As you may know, browsers are starting to catch up with ES6. However, not everything works as smooth as expected, and this can be a time-consuming and tedious problem to solve. If something goes wrong, trying to identify if the problem lies in the code or the browser is not an easy process.

But don’t worry, I’ll show you how you can quickly install and write ES6 code, and most importantly, make it compatible to all browsers that support ES5.

ES5 to ES6

In order to write ES6 code, we need to install something that can compile it to ES5. We will be using, Rollup. It compiles small pieces of code into something larger and more complex, such as a library or application. This allows you to use OOP (object-oriented-programming) which makes your code look cleaner, structured and modular, along with other useful functionalities. To clarify, JS is object-oriented, but is not a class-based object-oriented language like Java, C++, C#, etc, until the release of ES6.

Otherwise, the closest you can come to OOP in regards to include classes with ES5 is to use IIFE (Immediately Invoked Function Expression), or install external libraries. But why rely on external resources when you have a core-language that supports the OOP paradigm? Many of the most widely used programming languages already support it (like C++, Java, C# and PHP).

Why ES6?

Personally, I use it because it allows me to organize my code into separate files, which makes it easier to scale and maintain the code.

For instance, in my HTML, I have one script that loads main.js, and inside main.js, I load multiple JS files using import and export statements. Instead of having multiple scripts in my HTML file, I only need one (less code).

Prerequisites

  • Linux or macOS (Debian based)
  • NPM (package manager) installed
  • Basic CLI knowledge

Step one: Install Rollup

In order to use Rollup we must install it globally. Remember to use sudo. This allows you to access Rollup commands in whatever project you work with.

Step two: File structure

After you’ve installed Rollup globally, the next step is to setup up the folder structure and create two folders src and dest inside your project. In addition, create index.html.

  • src → ES6 files (Where you’ll write the code)
  • dest → Generates an ES5 (Compiled versions of ES6)
rr27ThFPxfFLGvHax9OptosBHLWBhRhXumoa
Project ES6 folder structure

Keep in mind, the bundle.js file is auto-generated when the Rollup command is executed. We will talk about this later.

Step three: Create a configuration file

Create a new file and name it rollup.config.js . Then add this code:

QYC3JcSz2eunCjok-wZVevaKxAVJHIkhJ-bP
Configuration file for rollup.config.js

Make sure that the input and output source path is correct with your folder structure, and that this file is placed in the main folder.

Step four: Load the script file in HTML

We are almost ready, but first we need to link to the right source file in our HTML template. This will load the ES5 file which is compiled from ES6.

2s5VhC9I2wYk1AaXriy6ybxXYQliIXSupBhs
HTML template loads ES6 script

Step five: Setup JS files

In order to verify that the Rollup command works, we need to setup a simple OOP structure. We will create a car.js class, and default export it to main.js.

Keep in mind that this file exports a new instance of the car.js class, and this allows to access the methods directly rather than writing const car = new Car() in the main.js class.

Since I am a lazy software engineer, dealing with a few extra characters of code is time-consuming :)

5aKZz1Ppg7yzGGIPj16zbAqnSY7VDA7gpPzo
car.js class

Next, import the car.js class to main.js in order to access the method’s type().

TAsHat7IhM9h1BgK-rdFNv1pHxCB0MPyTSv4
main.js class

Step six: Compile ES6 to ES5

To execute the configuration file we’ve created, run this command $ rollup -c or $ rollup --config — both are the same.

After running one of the commands, open index.html through a browser, then open inspect (ctrl + shift + I) on the browser, and go to console. If you see the text "Tesla Model S", it means everything worked successfully.

Keep in mind that every time you make changes with ES6 files, you must update it by running the command.

Optional

Since you have installed Rollup globally, you can compile ES6 without needing to have the file rollup.config.js . It does exactly the same thing:

$ rollup src/main.js — o dest/bundle.js — f iife

Personally, I would recommend running $ rollup -c as shown in step six since there is less code required. Remember that you must have the file rollup.config.js included when running this command.

If you found this short installation approach setup for ES6 useful, please comment and clap. It’s good karma.