ESM and CommonJS
CJS
CJS is short for CommonJS. Here is what it looks like:
//importing
const doSomething = require('./doSomething.js');
//exporting
module.exports = function doSomething(n) {
// do something
}
Some of you may immediately recognize CJS syntax from node. That’s because node uses CJS module format. CJS imports module synchronously.
You can import from a library node_modules or local dir. Either by const myLocalModule = require(‘./some/local/file.js’) or var React = require(‘react’); works.
When CJS imports, it will give you a copy of the imported object.
CJS will not work in the browser. It will have to be transpiled and bundled.
ESM
ESM stands for ES Modules. It is Javascript’s proposal to implement a standard module system. I am sure many of you have seen this:
import React from 'react';
Other sightings in the wild:
import {foo, bar} from './myLib';
...
export default function() {
// your Function
};
export const function1() {...};
export const function2() {...};
Works in many modern browsers
It has the best of both worlds: CJS-like simple syntax and AMD’s async
Tree-shakeable, due to ES6’s static module structure
ESM allows bundlers like Rollup to remove unnecessary code, allowing sites to ship less codes to get faster load.
Can be called in HTML
Summary
- ESM is the best module format thanks to its simple syntax, async nature, and tree-shakeability.
- UMD works everywhere and usually used as a fallback in case ESM does not work
- CJS is synchronous and good for back end.
- AMD is asynchronous and good for front end.
CJS executes imports as it finds them, blocking until they finish. ESM waits to execute any code in a module until all of it’s imports have been loaded and parsed, then does the binding/side-effects stuff in the relative order that they happen.
