ES Modules: All You Need To Know
--
ESM and CommonJS are Javascript’s module systems. Let’s understand how they compare and when to choose which system.
ES Modules (or short: ESM) and CommonJS (or short: CJS) are the two module systems in Javascript that are actively being used. Module Systems allow us to share and reuse code easily. For example, we can write a module for image compression which can then be distributed via npmjs.com and used by developers around the world.
What is CommonJS?
CommonJS was introduced as the default module system for Node.js. Since this was way before ES Modules were released, most of the tooling and packages you find on npmjs.com and yarnpkg.com were initially written in CommonJS.
In Node, each file is treated as a separate module. You can import and export with the following CommonJS syntax:
While Node.js has been using the CommonJS standard for years, the browser never had a module system, as every major decision such as a module system must be first standardized by ECMAScript and then implemented by the browser.
What are ES Modules?
This standardization process has been completed with ES6. It defines ES Modules as the ECMAScript standard for working with modules in the browser.
The syntax for importing and exporting is slightly different compared to CommonJS:
Frontend frameworks like React or Vue have been using the ESM syntax even before it became a standard in the browser. Though they used tools like Babel to transpile it to CommonJS syntax. Hence, most frontend devs are more familiar with ESM than CJS.
Incompatibilities Between ES Modules and CommonJS
Effectively, we now had two module systems that had a different syntax as well as some internal things that worked differently: ESM as the standard in browser-land, and CJS as…
