ES Modules
ECMAScript Modules
- In Turkish
- ES Modülleri
- Pronunciation
- ee-es MOJ-oolz
In short
ES modules are JavaScript's built-in module system: each file keeps its own scope and shares code with other files through import and export.
What are ES modules?
A module is a file whose variables and functions stay private unless it exports them. With ES modules, a file marks what it shares with export, and another file pulls those pieces in with import. The standard arrived in ECMAScript 2015, also called ES6, and every modern browser and Node.js now support it.
Before ES modules, JavaScript had no module system of its own. Browsers loaded scripts that all shared one global scope, and Node.js used CommonJS, with require() and module.exports. ES modules differ in one important way: imports and exports are static, written at the top level, so tools can see the whole dependency graph before running anything. That is what lets bundlers drop unused code, known as tree shaking, and split the rest into chunks.
In the browser, a script becomes a module with <script type="module">; module scripts are deferred and always run in strict mode. In Node.js, a file is a module if it ends in .mjs or if the nearest package.json says "type": "module". For code that should load only when it is needed, the import() function loads a module on demand and returns a promise.
Key takeaways
- ES modules share code with
exportandimport, and keep everything else private. - They are part of the language standard and run in browsers and Node.js.
- Static imports let tools see the dependency graph, which makes tree shaking possible.
import()loads a module only when it is needed.
Example
// math.js
export const PI = 3.14159;
export function area(radius) {
return PI * radius ** 2;
}
// app.js
import { area } from "./math.js";
console.log(area(2)); // 12.56636Readers ask
What is the difference between ES modules and CommonJS?
CommonJS is Node.js's older module system: require() loads a module while the code runs, and module.exports shares values. ES modules use import and export, load asynchronously and are analyzed before the code runs. Node.js supports both, and new code usually uses ES modules.
Why does the browser say "Cannot use import statement outside a module"?
The file was loaded as a classic script. Add type="module" to its <script> tag; in Node.js, name the file .mjs or set "type": "module" in package.json.
See also
- JavaScriptWeb Development, p. 24JavaScript is the programming language that runs in web browsers to make pages interactive, and it also runs on servers through runtimes like Node.js.
- BundlerWeb Development, p. 3A bundler is a build tool that combines JavaScript modules and their dependencies into a few optimized files that browsers can download and run quickly.
- Tree ShakingWeb Development, p. 49Tree shaking is a build optimization that removes code a program never uses from the final bundle, based on which ES module exports are actually imported.
- Code SplittingWeb Development, p. 5Code splitting is a technique that breaks a web app's JavaScript into smaller chunks loaded on demand, so the first page load downloads only the code it needs.
- Node.jsBackend & APIs, p. 32Node.js is an open-source JavaScript runtime that runs JavaScript outside the browser, most often to build web servers, APIs, and command-line tools.
- npmWeb Development, p. 32npm is Node.js's default package manager and the world's largest software registry; it downloads a project's dependencies and tracks their versions.
- LibraryProgramming Fundamentals, p. 34A library is a collection of ready-made code, such as functions and classes, that a program calls to do common jobs without writing that code itself.
Sources
Spotted a mistake or something missing on this page?Suggest an edit