liveBook · Manning

Static module system

As explained in The Joy of JavaScript

A module system in which module dependencies and exports are declared by fixed language syntax that can be analyzed before execution.

A static module system declares dependencies and exports with fixed language syntax, using import and export rather than runtime loader calls. This makes a module’s contract visible before execution. section 6.3

Static imports must appear at the top of a file, allowing compilers and tools to map application structure ahead of time. That visibility supports prefetching, preloading, stronger static analysis, and removing unreachable code from packages. section 6.3

Static and dynamic systems differ in how they express loading:

  • CommonJS and RequireJS use JavaScript functions such as require to load modules dynamically. section 6.3
  • ESM uses declarations such as import { Success } from './Validation.js'; to express dependencies statically. section 6.3

Imported bindings reflect module state

An ESM consumer can call setFeePercent(0.7), after which netTotal(10) returns 7 and feePercent reads 0.7. Direct assignment to the imported feePercent is not the mechanism for changing it. section 6.3

Table 6.1 Loading the Transaction class with different module systems (continued) (view table figure)

System

Type

Example

CommonJS

Dynamic

const Transaction =

require('./domain/Transaction.js');

RequireJS

Dynamic

 

requirejs(['domain/Transaction.js'], Transaction => {

//... use Transaction

});

ESM

Static

import Transaction from './domain/Transaction.js';

Compare CommonJS, RequireJS, and ESM loading syntax side by side. section 6.3

How The Joy of JavaScript covers it

How deep it goes
Explains syntax, top-level placement, tooling advantages, and contrasting loading calls, but stops short of detailed runtime semantics.
Examples
Uses CommonJS, RequireJS, and ESM loading snippets plus a calculator module whose fee state changes through an exported setter.
What you can do after
Evaluate static and dynamic loading syntax and understand why explicit imports support preloading and package-size optimization.
How it connects
Connects static module systems to ESM, dynamic module systems, CommonJS, RequireJS, module loaders, and static-code analysis.
Cover of The Joy of JavaScript
liveBookmanning.com
Read The Joy of JavaScript on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of The Joy of JavaScript. The section links point to the parts of the book it draws on.