Closure CavesISSUE #52 of 61

modules · import · export

LambdaVSThe Mutator

Lambda saysES modules split code into files that import and export named bindings.

export exposes a value; import { thing } from './file.js' brings it in. Modules have their own scope (no globals leaking), run in strict mode, and load deferred. Use <script type="module"> in HTML. They're the modern standard, replacing IIFEs and global namespaces.

Power-ups you unlock

export exposes; import brings in
Each module has its own scope
type="module" in HTML; strict by default
The standard replacement for global scripts

The Mutator attacks — common mistakes

Forgetting the file extension in the import path
Mixing CommonJS require with ES import syntax
Expecting top-level vars to be global

Boss battleSketch a module that exports a function and another that imports it.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>// math.js
export function add(a,b){ return a+b; }

// app.js
import { add } from './math.js';
console.log(add(2,3));

&lt;script type="module" src="app.js"&gt;&lt;/script&gt;</pre></body></html>

▶ Open the interactive comic issue

‹ Strict Mode · "Use Strict"Modules · Default Vs Named ›