ES6 In Depth: Modules

When I started on Mozilla’s JavaScript team back in 2007, the joke was that the length of a typical JavaScript program was one line. This was two years after Google Maps launched. Not long before that, the predominant use of JavaScript had been form validation, and sure enough, your average handler would be… one line of code. Things have changed. JavaScript projects have grown to jaw-dropping sizes, and the community has developed tools for working at scale. One of the most basic things you need is a module system, a way to spread your work across multiple files and directories—but still make sure all your bits of code can access one another as needed—but also be able to load all that code efficiently. So naturally, JavaScript has a module system. Several, actually. There are also several package managers, tools for installing all that software and coping with high-level dependencies. You might think ES6, with its new module syntax, is a little late to the party. Well, today we’ll see whether ES6 adds anything to these existing systems, and whether or not future standards and tools will be able to build on it. But first, let’s just dive in and see what ES6 modules look like.