Node.js: Eine kurze Geschichte von CJS, Bundlern und ESM
Einführung
Wenn Sie ein Node.js-Entwickler sind, haben Sie wahrscheinlich schon von CJS- und ESM-Modulen gehört, sind sich aber möglicherweise nicht sicher, warum es zwei gibt und wie diese in Node.js-Anwendungen nebeneinander existieren. Dieser Blogbeitrag führt Sie kurz durch die Geschichte der JavaScript-Module in Node.js (mit Beispielen?), damit Sie sich im Umgang mit diesen Konzepten sicherer fühlen können.
Der globale Geltungsbereich
Anfangs hatte JavaScript nur einen globalen Geltungsbereich, in dem alle Mitglieder deklariert wurden. Dies war beim Teilen von Code problematisch, da zwei unabhängige Dateien möglicherweise denselben Namen für ein Mitglied verwenden. Zum Beispiel:
greet-1.js
function greet(name) {
return `Hello ${name}!`;
}
greet-2.js
var greet = "...";
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Collision example</title>
</head>
<body>
<!-- After this script, `greet` is a function -->
<script src="greet-1.js"></script>
<!-- After this script, `greet` is a string -->
<script src="greet-2.js"></script>
<script>
// TypeError: "greet" is not a function
greet();
</script>
</body>
</html>
CommonJS-Module
Node.js hat das Konzept der JavaScript-Module offiziell mit CommonJS (auch als CJS bekannt) eingeführt. Dadurch wurde das Kollisionsproblem gemeinsam genutzter globaler Bereiche gelöst, da Entwickler entscheiden konnten, was exportiert (über module.exports) und importiert (über require()) werden soll. Zum Beispiel:
src/greet.js
// this remains "private"
const GREETING_PREFIX = "Hello";
// this will be exported
function greet(name) {
return `${GREETING_PREFIX} ${name}!`;
}
// `exports` is a shortcut to `module.exports`
exports.greet = greet;
src/main.js
// notice the `.js` suffix is missing
const { greet } = require("./greet");
// logs: Hello Alice!
console.log(greet("Alice"));
npm-Pakete
Die Entwicklung von Node.j erfreute sich dank npm-Paketen, die es Entwicklern ermöglichten, wiederverwendbaren JavaScript-Code zu veröffentlichen und zu nutzen, immer größerer Beliebtheit. NPM-Pakete werden standardmäßig im Ordner „node_modules“ installiert. Die in allen npm-Paketen vorhandene Datei package.json ist besonders wichtig, da sie Node.js über die Eigenschaft „main“ anzeigen kann, welche Datei der Einstiegspunkt ist. Zum Beispiel:
node_modules/greeter/package.json
{
"name": "greeter",
"main": "./entry-point.js"
// ...
}
node_modules/greeter/entry-point.js
module.exports = {
greet(name) {
return `Hello ${name}!`;
}
};
src/main.js
// notice there's no relative path (e.g. `./`)
const { greet } = require("greeter");
// logs: Hello Bob!
console.log(greet("Bob"));
Bündeler
npm-Pakete steigerten die Produktivität von Entwicklern erheblich, indem sie die Arbeit anderer Entwickler nutzen konnten. Allerdings hatte es einen großen Nachteil: cjs war nicht mit Webbrowsern kompatibel. Um dieses Problem zu lösen, wurde das Konzept der Bundler geboren. browserify war der erste Bundler, der im Wesentlichen dadurch funktionierte, dass er einen Einstiegspunkt durchquerte und den gesamten require()-ed-Code in einer einzigen .js-Datei „bündelte“, die mit Webbrowsern kompatibel ist. Im Laufe der Zeit wurden weitere Bundler mit zusätzlichen Funktionen und Unterscheidungsmerkmalen eingeführt. Vor allem Webpack, Parcel, Rollup, Esbuild und Vite (in chronologischer Reihenfolge).
ECMAScript-Module
Als Node.js- und CJS-Module zum Mainstream wurden, beschlossen die Betreuer der ECMAScript-Spezifikation, das Modulkonzept einzubeziehen. Aus diesem Grund werden native JavaScript-Module auch als ESModules oder ESM (kurz für ECMAScript-Module) bezeichnet.
esm definiert neue Schlüsselwörter und Syntax für den Export und Import von Mitgliedern und führt neue Konzepte wie den Standardexport ein. Im Laufe der Zeit haben ESM-Module neue Funktionen wie Dynamic Import() und Top-Level-Await erhalten. Zum Beispiel:
src/greet.js
function greet(name) {
return `Hello ${name}!`;
}
src/part.js
var greet = "...";
src/main.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Collision example</title>
</head>
<body>
<!-- After this script, `greet` is a function -->
<script src="greet-1.js"></script>
<!-- After this script, `greet` is a string -->
<script src="greet-2.js"></script>
<script>
// TypeError: "greet" is not a function
greet();
</script>
</body>
</html>
Im Laufe der Zeit wurde ESM von Entwicklern dank Bundlern und Sprachen wie TypeScript weit verbreitet, da diese in der Lage sind, die ESM-Syntax in CJS umzuwandeln.
Node.js CJS/ESM-Interoperabilität
Aufgrund der wachsenden Nachfrage hat Node.js in Version 12.x offiziell Unterstützung für ESM hinzugefügt. Die Abwärtskompatibilität mit cjs wurde wie folgt erreicht:
- Node.js interpretiert .js-Dateien als CJS-Module, es sei denn, package.json setzt die Eigenschaft „type“ auf „module“.
- Node.js interpretiert .cjs-Dateien als CJS-Module.
- Node.js interpretiert .mjs-Dateien als ESM-Module.
Wenn es um die Kompatibilität von NPM-Paketen geht, können ESM-Module NPM-Pakete mit CJS- und ESM-Einstiegspunkten importieren. Das Gegenteil bringt jedoch einige Vorbehalte mit sich. Nehmen Sie das folgende Beispiel:
node_modules/cjs/package.json
// this remains "private"
const GREETING_PREFIX = "Hello";
// this will be exported
function greet(name) {
return `${GREETING_PREFIX} ${name}!`;
}
// `exports` is a shortcut to `module.exports`
exports.greet = greet;
node_modules/cjs/entry.js
// notice the `.js` suffix is missing
const { greet } = require("./greet");
// logs: Hello Alice!
console.log(greet("Alice"));
node_modules/esm/package.json
{
"name": "greeter",
"main": "./entry-point.js"
// ...
}
node_modules/esm/entry.js
module.exports = {
greet(name) {
return `Hello ${name}!`;
}
};
Folgendes läuft einwandfrei:
src/main.mjs
// notice there's no relative path (e.g. `./`)
const { greet } = require("greeter");
// logs: Hello Bob!
console.log(greet("Bob"));
Folgendes wird jedoch nicht ausgeführt:
src/main.cjs
// this remains "private"
const GREETING_PREFIX = "Hello";
// this will be exported
export function greet(name) {
return `${GREETING_PREFIX} ${name}!`;
}
Der Grund, warum dies nicht zulässig ist, liegt darin, dass ESM-Module das Warten auf oberster Ebene zulassen, während die Funktion require() synchron ist. Der Code könnte umgeschrieben werden, um dynamisches import() zu verwenden, aber da er ein Promise zurückgibt, erzwingt er etwas wie Folgendes:
src/main.cjs
// default export: new concept
export default function part(name) {
return `Goodbye ${name}!`;
}
Um dieses Kompatibilitätsproblem zu mildern, stellen einige NPM-Pakete sowohl CJS- als auch MJS-Einstiegspunkte bereit, indem sie die „exports“-Eigenschaft von package.json mit bedingten Exporten nutzen. Zum Beispiel:
node_modules/esm/entry.cjs:
// notice the `.js` suffix is required
import part from "./part.js";
// dynamic import: new capability
// top-level await: new capability
const { greet } = await import("./greet.js");
// logs: Hello Alice!
console.log(greet("Alice"));
// logs: Bye Bob!
console.log(part("Bob"));
node_modules/esm/package.json:
{
"name": "cjs",
"main": "./entry.js"
}
Beachten Sie, dass „main“ auf die CJS-Version verweist, um Abwärtskompatibilität mit Node.js-Versionen zu gewährleisten, die die Eigenschaft „exports“ nicht unterstützen.
Abschluss
Das ist (fast) alles, was Sie über CJS- und ESM-Module wissen müssen (Stand Dezember 2024?). Teilen Sie mir unten Ihre Gedanken mit!
Das obige ist der detaillierte Inhalt vonNode.js: Eine kurze Geschichte von CJS, Bundlern und ESM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1668
14
1427
52
1329
25
1273
29
1256
24
JavaScript -Engines: Implementierungen vergleichen
Apr 13, 2025 am 12:05 AM
Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.
Python vs. JavaScript: Die Lernkurve und Benutzerfreundlichkeit
Apr 16, 2025 am 12:12 AM
Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.
Von C/C nach JavaScript: Wie alles funktioniert
Apr 14, 2025 am 12:05 AM
Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.
JavaScript und das Web: Kernfunktionalität und Anwendungsfälle
Apr 18, 2025 am 12:19 AM
Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.
JavaScript in Aktion: Beispiele und Projekte in realer Welt
Apr 19, 2025 am 12:13 AM
Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.
Verständnis der JavaScript -Engine: Implementierungsdetails
Apr 17, 2025 am 12:05 AM
Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.
Python gegen JavaScript: Community, Bibliotheken und Ressourcen
Apr 15, 2025 am 12:16 AM
Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.
Python vs. JavaScript: Entwicklungsumgebungen und Tools
Apr 26, 2025 am 12:09 AM
Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.
