Shipping ES6 ES2015 Modules to Browsers

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

1. Include your main.js script as a module

   <script type="module" src="main.js"></script>

2. There is no step 2

Shipping your code to browsers that don’t support ES6 Modules (and thus don’t support ES6)

1. Use tools – like Rollup – to combine all your ES6 modules into one single file
2. Transpile the generated module from ES6 to ES5
3. 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 🙂