Closure CavesISSUE #55 of 61

modules · re-exports · barrel files

LambdaVSThe Mutator

Lambda saysRe-exports and barrel files gather many modules behind one import path.

export { x } from './x.js' re-exports without importing locally. A barrel (index.js that re-exports a folder's modules) lets consumers write import { a, b } from './components' instead of many paths. Convenient, but oversized barrels can hurt tree-shaking and load time — use deliberately.

Power-ups you unlock

export … from re-exports another module
Barrel = index.js aggregating a folder
One tidy import path for consumers
Big barrels can hurt tree-shaking

The Mutator attacks — common mistakes

Huge barrels pulling in unused code
Circular dependencies through barrels
Re-exporting defaults awkwardly

Boss battleSketch a barrel index.js that re-exports two component modules.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>// components/index.js (barrel)
export { Button } from './Button.js';
export { Card } from './Card.js';

// usage
import { Button, Card } from './components';</pre></body></html>

▶ Open the interactive comic issue

‹ Dynamic Import · Code Splitting ES6 Recap · Let · Const · Arrow · Class ›