With Node 12 and up supporting ES Modules natively and Node 10 — the last version to not support it unflagged — going EOL, it’s time to start migrating your code to ES Modules. Aral Balkan took the time to convert his tool “Place” to embrace them and documented his work:
Yesterday, I refactored Place, which is a non-trivial Node.js app, to use ECMAScript Modules (ESM). Here’s a diff of the full set of changes.
This is the approach I took and some of the issues I ran into, in case it helps someone else
First step: set "type": "module" in your package.json …
Must say I’m quite excited about Snowpack (formerly known as @pika/web, which I covered here) which just got released.
With Snowpack you can build modern web apps (with React, Vue, etc.) without a bundler (like Webpack, Parcel, Rollup). No more waiting for your bundler every time you hit save. Instead, changes are ready in the browser instantly.
You only have to run Snowpack once. By doing so it will generate ES Modules for all of your dependencies, which you can then directly use in the browser.
Once again a highly entertaining video by Heydon Pickering. This time he’s tackling ES Modules: how and where (e.g. in which browsers) can you use them?
Dynamic import() introduces a new function-like form of import, which allows one to import on demand. It returns a promise for the module namespace object of the requested module, which is created after fetching, instantiating, and evaluating all of the module’s dependencies, as well as the module itself.
Say you have a lightbox or dialogbox. You could offload its importing to the very moment it is needed:
Stage-3 is the Candidate Stage where the feature is considered complete and only critical changes will happen based on implementation experience. If all goes well the proposal will advance to Stage 4 without any changes, after which it will to become part of the ECMAScript Specification.
Good workflow fleshed out by Sam Thorogood on using ES2015/ES6 modules with browsers that support, whilst also keeping older browsers (that don’t support it) happy.
The modules
Let’s take these 2 simple modules for example:
// main.js
import {x} from ./foo.js
x().then(y => log(y));
// foo.js
export async function x() {
let y = await fetch('...');
y = await y.json();
return y;
}
Shipping your code to browsers that do support ES6 Modules
Include your main.js script as a module
<script type="module" src="main.js"></script>
There is no step 2
Shipping your code to browsers that don’t support ES6 Modules (and thus don’t support ES6)
Use tools – like Rollup – to combine all your ES6 modules into one single file
Transpile the generated module from ES6 to ES5
Include the transpiled script as you’d normally do, but with a nomodule attribute so that the browsers that do support ES6 modules don’t load it (*)
<script nomodule src="compiled.js"></script>
As both methods exclude each other, use ‘m both and you’re good to go 🙂
