Named exports: importing several things

The named export shape

// utils.js
export const PI = 3.14159;
export function double(n) { return n * 2; }
export function triple(n) { return n * 3; }

// app.js
import { PI, double } from "./utils.js";
console.log(double(PI));   // 6.28318

Every export keyword in the source file creates a named export. The import { ... } syntax in another file pulls them out by name. Names must match exactly — there's no auto-pluralization, no guessing.

What goes inside the curlies

import { double, triple as triple3x }   from "./utils.js";   // rename on import
import { PI as π }                       from "./utils.js";   // any valid identifier
import * as utils                        from "./utils.js";   // grab everything as a namespace

import * as utils is the escape hatch when you want every export grouped under one object. Use it sparingly — it defeats tree-shaking (C3-06).

Where the file paths go

Browser module specifiers must be either:

• Relative — "./utils.js" or "../helpers/format.js". Note the .js extension — required.
• Absolute URL — "https://cdn.example.com/lib.mjs".
• Root-relative — "/lib/utils.js".

Bare names like "react" only work after a bundler (or import maps — C3-06).