How ESM made quick prototyping and scripting with node.js so much easier (no babel, webpack or rollup needed!)

My best discovery of the week-end is, without a doubt, ESM.
(and this tool is so awesome that I can’t keep it for myself!)

All node.js developer have struggled at least once configuring their node.js environment. All the webpack, babel, rollup, you_name_it things to configure is a major pain and a big waste of time.

The goal

Today, I was working on a project, big one, using node 6, aws, Next.js, lots of things, lots of boilerplate and configuration tools I’m not so familiar with. And I wanted to add a single script, something I hadn’t used in this project before.

No big deal, right?
“Add a new script in package.json , and I’m good to go, right?”, is what I first thought.

The pain

That could have been it, but unfortunately the script needed to require other scripts, and those script were written in ES2018 + import/export.

See where it’s heading? In a word: Pain.

I couldn’t load those file by simply do a node script.js , node doesn’t support import/export , no matter what version of node you use. I needed to go through the babel/webpack configuration, which I hate, because it evolves too fast that it’s very hard to keep track of how you should do it right now, with so many outdated examples out there, so many options and too much time wasted.

I did try, I just wanted to call one file after all, maybe there was a way to do a “on-the-fly” thing, with no need to generated a compiled version, etc.

I probably lost about a good 30min before deciding to quit, my project is really big with too much of webpack config to my taste already, lots of things done underneath by the Next.js framework, and I’m just not familiar enough with all the tooling configuration to try to change it, I’ll just end up breaking stuff.

The awesome

That’s where Christian Murphy came to my aid and told me about ESM.

And, long story short, this underrated tool just provided everything I was looking for. (and even more!)

No need for babel, webpack or rollup. Just call a JS file and be done with it. This package states that:

Out of the box esm just works, no configuration necessary.

And that’s the thing. It just works indeed.

Doing a node -r esm ./index.js basically loads the index.js file with ESM support (by requiring the esm package before loading the index.js file)

And ESM supports many things, including import/export.

I put more examples together at https://github.com/Vadorequest/es2018-esm-examples

I hope this very quick introduction to ESM will help you getting things done with node faster! It did the trick for me :)

ESM doesn’t aim at replacing the other available tools, as far as I can tell it can be used with webpack/rollup. Running a script is much simpler than a project, this post is about running a single script and in this case there is really no need for webpack/rollup, but bigger projects may likely need more than just ESM.