Heim >Web-Frontend >js-Tutorial >Node.js: Eine kurze Geschichte von CJS, Bundlern und ESM

Node.js: Eine kurze Geschichte von CJS, Bundlern und ESM

Mary-Kate OlsenOriginal: 2024-12-15 05:36:10390Durchsuche

Node.js: A brief history of cjs, bundlers, and 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!

JavaScript typescript json ecmascript html npm webpack if for include require Conditional Property JS function default this promise history Other

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie kann ich mit jQuery den ausgewählten Text aus einer Dropdown-Liste abrufen?Nächster Artikel：Wie kann ich mit jQuery den ausgewählten Text aus einer Dropdown-Liste abrufen?

In Verbindung stehende Artikel

Mehr sehen