Re-exporting from Modules

Re-exporting

Re-export lets a module aggregate exports from multiple sub-modules, creating a clean public API.

Example

// components/index.js — barrel file
export { Button } from "./Button.js";
export { Input } from "./Input.js";
export { Modal } from "./Modal.js";
export { default as Card } from "./Card.js";

// Re-export with rename
export { Button as Btn } from "./Button.js";

// app.js — clean single import
import { Button, Input, Modal } from "./components/index.js";

JAVASCRIPT

Full Editor

Pro Tip

Barrel files (index.js) simplify imports but can break tree-shaking in some bundlers — check your bundler docs.

Related Resources

JavaScript Reference

Complete tag & property list

JavaScript How-To Guides

Step-by-step practical guides

JavaScript Exercises

Practice what you've learned