Are you ready for ES Modules?
Jordan Finneran
Posted on March 22, 2021
Contents
Intro
Currently in JavaScript there are several ways to import packages which you might be familiar with:
- CommonJS — module.exports and require used in Node.js
- Asynchronous Module Definition (AMD)
- Universal Module Definition (UMD)
None of these are in the JavaScript standards. :(
In ES6 the JavaScript standards, a single universal module system was introduced.
ES Modules arrived!
What are ES Modules?
You might already be familiar with the syntax.
You can export functions or variables:
export const hoursInDay = 24
export const multiply = (a, b) => {
return a * b
}
You can export many methods and/or variables per file.
These can then be imported and used like so:
// import individual items
import {hoursInDay, multiply} from './somefile.js'
// import the whole file
import * as test from './somefile.js'
You can also use dynamic imports to lazy load code, by using the import syntax in your code which returns a promise.
switch (page) {
case 'home':
import('./home-page');
break;
case 'register':
import('./register-page');
break;
You can also work with them in browsers natively:
<script type="module" src="./somefile.js"></script>
It works across all major browsers! Yay standards!
You can work with them in Node.js by setting "type": "module" in your package.json - I would recommend this way.
But there are a few other ways documented by the Node team.
These are all available in Node.js 14 and above.
Why do I care?
We all know the JavaScript world moves on fast!
ES Modules are supported across all browsers, its supported in Node.js, it's now universal!
Plenty of packages are moved over to it already, with lots more on the way.
So why should you care:
Universal support
You can use them anywhere you write JavaScript!!
One way of working in browsers or Node.js!
Standards based
Following on from Universal Support, is standards!
It's in the same standards as those that define all the syntax you are used to in JavaScript!
Performance
ES Modules help improve tree shaking when you are bundling.
Can reduce the amount of config in your build scripts as you can ship ES Modules to the browser so there is less config required.
Eventually with importmaps being built into browsers, but not yet widely supported, you will be able to ship ES Modules with little to no build config!
The Dream!
Checker
I built a tool to help you check how ready your package or application is for ES Modules!
You can search for a package or upload your package.json and it will check if your package supports ES Modules!
Try it out, I'd love to hear what you think!
It uses Cloudflare Workers so it's really fast! Blog on that coming soon :D
Summary
In summary, ES Modules are coming fast across all platforms!
It makes your code easier to work with across browsers and Node.js!
You can simplify your build processes too!
Check out your packages, I'd love to hear how you get on.
A package maintainer? Use this badge on your repo to let people know you are ES Module Ready!
[](https://esmodules.dev/)
Happy Building!
Posted on March 22, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
