A Well-Designed JavaScript Module System is Your First Architecture Decision | CSS-Tricks

"JavaScript modules are not just a way of splitting code across files, but mainly a way to design boundaries between parts of your system."

"The CommonJS module system was the first JavaScript module system. It was created to be compatible with server-side JavaScript, and as such, its syntax was not natively supported by browsers."

"The import mechanism for CommonJS relies on the require() function, and being a function, it is not restricted to being called at the top of a module; it can also be called in an if statement or even a loop."

"The same cannot be said for ESM: the import statement has to be at the top. Anything else is regarded as an invalid syntax."

JavaScript modules provide a solution to the challenges of writing large programs by creating private scopes and defining global accessibility. Before modules, scripts in the global scope often led to variable conflicts. The two primary module systems are CommonJS and ECMAScript Modules. CommonJS allows dynamic imports using the require() function, while ESM requires import statements to be at the top of the module. Without proper principles for using modules, maintaining large codebases can become difficult.

Read at CSS-Tricks