Ich erinnere mich, als ich mit dem Codieren begann, sah ich einige JS-Dateien, die require() verwendeten, um Module und andere Dateien mit import zu importieren. Das verwirrte mich immer, da ich nicht wirklich verstand, was der Unterschied war oder warum es zwischen den Projekten Inkonsistenzen gab. Wenn Sie sich dasselbe fragen, lesen Sie weiter!

Was ist CommonJS?

CommonJS ist eine Reihe von Standards, die zur Implementierung von Modulen in serverseitigem JavaScript, hauptsächlich Node.js-Umgebungen, verwendet werden. In diesem System werden Module synchron geladen, was bedeutet, dass die Skriptausführung blockiert ist, bis das Modul geladen ist. Dies ist ein unkomplizierter Ansatz, der Nachteil ist jedoch ein Leistungseinbruch, wenn Sie versuchen, eine Reihe verschiedener Module zu laden, da diese nacheinander geladen werden müssen, bevor etwas anderes ausgeführt werden kann.

Wenn Sie CommonJS verwenden, verwenden Sie module.exports zum Exportieren der Funktionalität und require() zum Importieren.

Hier ist ein Beispiel dafür, wie das im Code aussehen würde.

// In file multiple.js

module.exports = function multiply(x, y) {
    return x * y;
};

// In file main.js

const multiply = require(‘./multiply.js’);

console.log(multiply(5, 4)); // Output: 20

Was ist ECMAScript (ES6)?

ES6, auch bekannt als ECMAScript, ist eine neuere Version von JavaScript, die 2015 veröffentlicht wurde. Mit dieser Version wurde die Möglichkeit eingeführt, Module asynchron mithilfe der Import- und Exportanweisungen zu importieren. Dies bedeutet, dass das von Ihnen ausgeführte Skript weiterhin ausgeführt werden kann, während das Modul geladen wird, sodass es nicht zu Engpässen kommt. Dies ermöglicht auch eine Effizienz namens Tree-Shaking, auf die ich in einem späteren Beitrag eingehen werde. Im Grunde bedeutet dies jedoch, dass Sie JavaScript nur aus einem Modul laden, das Sie verwenden, und toter Code (nicht verwendeter Code) nicht geladen wird in den Browser. Dies alles ist möglich, da ES6 sowohl statische als auch dynamische Importe unterstützt.

Hier ist das gleiche Beispiel von zuvor, aber dieses Mal verwenden wir Import und Export.

// In file multiply.js

export const multiply = (x, y) => x * y;

// In file main.js

import { multiply } from ‘./multiply.js’;

console.log(multiply(5, 4)); // Output: 20

Die Hauptunterschiede: erforderlich vs. Import

require() ist Teil des CommonJS-Modulsystems, während import Teil des ES6-Modulsystems ist. Sie werden require() in Node.js-Umgebungen für die serverseitige Entwicklung sehen, hauptsächlich bei Legacy-Projekten, die ES6 noch nicht eingeführt haben. Sie werden sehen, dass Import sowohl in der serverseitigen als auch in der Frontend-Entwicklung verwendet wird, insbesondere bei neueren Projekten und mit allen Frontend-Frameworks wie React oder Vue.

Warum ist Import besser als erforderlich?

Wie bereits erwähnt, erfolgt der Import asynchron, was insbesondere bei großen Anwendungen zu einer besseren Leistung führen kann. Da der Import außerdem statisch analysiert werden kann, können Tools wie Linters und Bundler den Code effektiver optimieren und Tree Shaking implementieren, was zu kleineren Bundle-Größen und schnelleren Ladezeiten führt. Die Syntax ist auch einfacher zu lesen als require(), was zu einer besseren Entwicklererfahrung führt, und das wollen wir alle!

Wann würden Sie „Require Vs Import“ verwenden?

Sie würden require() verwenden, wenn:

• Sie arbeiten an einem alten Node.js-Projekt, das vor der Veröffentlichung von ES6 gestartet wurde und nicht aktualisiert wurde.

• Sie müssen Module zur Laufzeit dynamisch laden, beispielsweise in einer Konfigurationsdatei, oder wenn Sie Module bedingt laden müssen.

Sie würden Import verwenden, wenn:

• Jeder andere Zeitpunkt, da dies jetzt der Standard und effizienter ist.

Zusammenfassung

Im Allgemeinen wird empfohlen, wann immer möglich Import zu verwenden, da es mehr Vorteile bietet und das neuere, weiter verbreitete Modulsystem ist. Es kann jedoch Fälle geben, in denen require() immer noch die bessere Wahl ist, abhängig von Ihren spezifischen Anforderungen und der Umgebung, in der Sie arbeiten.

Wenn Sie diesen Artikel hilfreich fanden, abonnieren Sie meinen Newsletter, in dem ich wöchentlich weitere Inhalte dieser Art direkt an Ihren Posteingang sende!