This site runs best with JavaScript enabled.Super Simple Start to ESModules in the Browser

Super Simple Start to ESModules in the Browser


All major browsers support ESModules now. Here's how to get started using them.

Watch "Use JavaScript Modules in the browser" on egghead.io

I've been writing JavaScript since before JavaScript had modules. When the EcmaScript specification added support for modules I was thrilled, but I was disappointed to learn that it would be a while before this feature was actually implemented and supported.

Well, it's been a while and now all major browsers support ES Modules. So I'd like to show you the super simple start to ES Modules!

First, we need a JavaScript file that we want to load into our site:

1// append-div.js
2function appendDiv(message) {
3 const div = document.createElement('div')
4 div.textContent = message
5 document.body.appendChild(div)
6}
7
8export {appendDiv}

Next, let's make an HTML file to load that file:

1<!-- index.html -->
2<script type="module">
3 import {appendDiv} from './append-div.js'
4 appendDiv('Hello from inline script')
5</script>

Notice the type="module" attribute there. That's all we need to do to inform the browser that the JavaScript code is a "module" rather than a "script". There are several differences in how the runtime environment handles the JavaScript file based on whether it's a script or a module, but suffice-it to say that one of those differences is when it's a "module" you're allowed to use modules!

Ok, so in our inline script above, we're importing the appendDiv function from the append-div.js file. Unfortunately, to load the module, we can't just open the HTML file in our browser. We have to be using a local server and open the file from that. If you have node.js installed, then you can open your terminal to the directory where you have these files and run this to get a server going:

1npx serve

That will output information for where the server is being run and you can open it up (I think the default location is localhost:5000). With that, "Hello from inline script" should appear on the screen. Tada! We've loaded a real EcmaScript Module! Hooray 🎉

Normally we don't write our JavaScript in an inline script in our HTML file, so let's load a module from a file:

1// script-src.js
2import {appendDiv} from './append-div.js'
3
4appendDiv('Hello from external script')

To load that up, we just add another script tag to our HTML:

1<!-- index.html -->
2<script type="module">
3 import {appendDiv} from './append-div.js'
4 appendDiv('Hello from inline script')
5</script>
6<script type="module" src="./script-src.js"></script>

And now if we pull that up on our server, we'll also have "Hello from external script" appear on the screen.

One thing that's important to note here is the inclusion of the .js in our import statement. We may be spoiled by NodeJS and Babel, but in the modules specification we really do have to provide the extension.

One last thing I want to show is that dynamic imports work well too. So if we add another file:

1// async-script.js
2import {appendDiv} from './append-div.js'
3
4function go() {
5 appendDiv('Hello from async script')
6}
7
8export {go}

Then we can load that using a dynamic import statement:

1// script-src.js
2import {appendDiv} from './append-div.js'
3
4appendDiv('Hello from external script')
5
6import('./async-script.js').then(
7 moduleExports => {
8 moduleExports.go()
9 },
10 error => {
11 console.error('there was an error loading the script')
12 throw error
13 },
14)

The dynamic import likewise also must point directly to a JavaScript file (with the extension). And to be clear, what's important is not the extension, but the fact that when the browser makes a request to that URL, it receives back a text file which it can execute as JavaScript.

This means that if you happen to have a URL that returns a JavaScript file but doesn't end in .js you are fine omitting that.

1import * as d3 from 'https://unpkg.com/d3?module'

The point is, the thing you put in the quotes in your import statements has to point to a JavaScript resource on some server somewhere. Learn more about unpkg.com.

Conclusion

I hope that was helpful/interesting to you! I've put the code for this up on GitHub and you can play around with it yourself. Enjoy!

P.S. A few other resources you might find helpful on this topic:

Discuss on TwitterEdit post on GitHub

Share article
loading relevant upcoming workshops...
Kent C. Dodds

Kent C. Dodds is a JavaScript software engineer and teacher. He's taught hundreds of thousands of people how to make the world a better place with quality software development tools and practices. He lives with his wife and four kids in Utah.