Frontend Academy · Lesson

Modules: import and export

Split code into ES modules with named and default exports, import selectively, and understand how module bundlers resolve the dependency graph.

Modules: import and export is a free Frontend Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Modules?

Before modules, all JavaScript ran in the global scope. Variables collided. Code order mattered. Files had to load in sequence. ES Modules give every file its own scope, explicit imports, and tree-shakable exports.

Named Exports

Export specific values with the export keyword. A file can have many named exports. Consumers import exactly what they need.

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

Named Imports

Import named exports with curly braces. You can import multiple exports from one module in a single statement.

import { PI, add, Vector } from './utils.js';

console.log(PI);        // 3.14159
console.log(add(2, 3)); // 5

Default Exports

Each module can have one default export — typically the main thing the module provides. Import it without curly braces and give it any name.

// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works

Re-exporting

A module can re-export from other modules to create a barrel file — a single entry point that re-exports multiple things.

// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';

// Consumer:
import { Button, Input, Modal } from './components';

Namespace Imports

Import everything from a module into a namespace object with import * as name. Useful when you need many exports or want to make the origin explicit.

import * as utils from './utils.js';

console.log(utils.PI);        // 3.14159
console.log(utils.add(1, 2)); // 3

Side-Effect Only Imports

Some modules are imported purely for their side effects (polyfills, registering event handlers). Import them without binding.

import './polyfills.js'; // runs the code, imports nothing

Dynamic import() — Code Splitting

The dynamic import() function returns a Promise. Use it to load a module lazily — only when needed. Bundlers automatically create a separate chunk for dynamically imported modules.

// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
  const { processFile } = await import('./fileProcessor.js');
  processFile(data);
});

import.meta

import.meta is a special object available inside modules. import.meta.url is the module's URL. Vite uses import.meta.env for environment variables.

// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'

Module Resolution

Bundlers like Vite resolve modules from the file system (relative paths like './utils'), node_modules ('lodash'), or path aliases ('@/components' configured in vite.config.js).

CommonJS vs ES Modules

Node.js originally used CommonJS (require / module.exports). The browser uses ES Modules (import / export). Modern Node.js also supports ES Modules with type: "module" in package.json.

// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };

// ES Modules (modern):
import fs from 'fs';
export { myFunc };

Quick Check

What is the main advantage of using dynamic import() instead of a static import?

Recap: ES Modules

Named exports/imports for multiple values. Default export/import for the main thing. Re-exports create barrel files. Dynamic import() enables lazy loading and code splitting. import.meta provides module metadata. Bundlers resolve aliases, node_modules, and relative paths.

Frequently asked questions

Is the “Modules: import and export” lesson free?

Yes — the full text of “Modules: import and export” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Modules: import and export”?

Split code into ES modules with named and default exports, import selectively, and understand how module bundlers resolve the dependency graph. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Modules: import and export” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy