Require vs Import: Mastering ES6 Modules and CommonJS in JavaScript

Require Era Modules

In Node programming, modules are a core concept that enables large‑scale JavaScript engineering. Before ES6 modules, tools like RequireJS and SeaJS dominated browser‑side modularization, while Node used the CommonJS require and module.exports pattern.

Node’s module system follows CommonJS, RequireJS follows AMD, and SeaJS follows CMD; despite differences, developers aim for a unified coding style.

To keep a highly consistent style, browser modules use a define function for closure, while the rest of the code can remain identical.

Although AMD and CMD offer richer patterns, this article focuses on the Node environment and does not expand on them.

Modules in ES6

ES6 introduced a native module system that does not adopt CommonJS; require and module.exports remain Node‑specific globals and are unrelated to the standard.

export – exporting module interfaces

The export syntax is complex; examples can be found in the linked documentation. In short, placing export before a declaration makes it part of the module’s public API.

Exporting a bare value like export a is invalid because the exported name must correspond to a variable inside the module; the correct form is export {a}. It is common to place a single export statement at the end of the file that lists all public symbols.

import – importing modules

The import syntax differs from require and must appear at the top of a file; no other statements may precede it.

Like export, import has many forms; documentation provides details. The basic form uses curly braces to list the names that correspond one‑to‑one with exported identifiers, which requires understanding of object destructuring.

as – aliasing

The as keyword gives an exported member a different name. In export you can rename a local identifier, and in import you can rename the imported binding to avoid conflicts.

default – default export

Some tutorials treat default as a separate concept, but it is essentially syntactic sugar for an alias. When importing a default export you can omit the curly braces.

Thus the following pattern is equivalent to {default as $}:

* – namespace import

The asterisk imports the entire module namespace as a single object, allowing access to all exported members via property access.

Although convenient, using * can import unused symbols; it is generally better to list only the needed members in curly braces.

Should you use require or import?

require

simply returns whatever module.exports provides, whether it is an object, number, string, or function, and can be called anywhere, even with an expression as its argument.

In contrast, import is a compile‑time construct; it must appear at the top of the file and selects only the specified bindings, which can improve performance.

Conceptually, require is an assignment operation, while import is a destructuring operation. The two forms differ when handling a default export:

var $ = require('jquery');

import $ from 'jquery';

Currently, no JavaScript engine fully supports native import in Node; developers use Babel to transpile ES6 modules to CommonJS. When engines eventually implement ES6 modules, code that already uses import will require fewer changes than code that relies on require.