import vs require – ESM & commonJs module differences

require	import
Dynamic evaluation	Static evaluation
Throws error at runtime	Throws error while parsing
Non lexical	Lexical

As Node.js uses commonJS moduling, I will refer to the workflow of node to address the commonJS modules. And will refer the ECMAScript modules as ESM.

Syntax difference

CommonJS

dep.js

1 2 3 4 5 6

dep = {     foo: function(){},     bar: 22 } module.exports = dep;

app.js

1 2 3 4

var dep = require("dep"); console.log(dep.bar); dep.foo();

ESM

dep.js

1 2 3

export foo function(){}; export const bar = 22;

app.js

1 2 3 4

import {foo, bar} from "dep"; console.log(bar); foo();

Loading technique difference

The actual loading of any module using require() happens in 5 steps.

• Resolution
• Loading
• Wrapping
• Evaluation
• Caching

import()

There is a proposal of import() function too to create nested import statements. Unlike the lexical import keyword, import() function is processed at the time or evaluation (more like require). The syntax is like the following.

1 2 3 4 5 6 7

import("foo").then((module) => {     module.bar();     console.log(module.someProp); }).catch((err)=>{     //handle error here });

use cases

• On demand module load is possible.
• Conditional load of modules are also possible
• Promise like asynchronous handling.