Proper websites, done properly

ES Modules

6 parts / Total read time: 39 mins

ES Modules, also known as ECMAScript Modules, is a modular, modern way to approach JavaScript in the browser.

Introduction

Available in all evergreen browsers since 2018, ES Modules are a great way to avoid having to run your code through build tools if you don't need to do anything too complex, and don't require a task runner to minify/compress your code.

This site uses ES Modules. They work really, really well.

In this guide, we'll walk through implementing a modular approach to a common JavaScript scenario: mobile menus. We'll cover writing classes, importing and exporting modules, and getting them running in your browser.

If you've been through the Eleventy guide, you'll already have a functioning website with a local development set up ready to go. To make things easier to run in this tutorial, you'll find things much easier if you have done this!