Verstehen Sie die verschiedenen Formate von Javascript-Modulen

BY admin
|

Wenn es darum geht, Ihre Anwendung zu erstellen, fragen Sie sich, wenn Sie wie ich sind, immer: Welches Format soll ich verwenden? CJS ? AMD ? UMD ? ESM ? Worin bestehen die Unterschiede? Warum so viele Formate?

In diesem Artikel werde ich versuchen, diese Fragen zu beantworten 😊.

#Die verschiedenen Formate

#CommonJS (CJS)

Dies ist eines der ersten Formate, die geschaffen wurden. Ich bin mir ziemlich sicher, dass du es schon benutzt hast. Es ist das Modulsystem, das ursprünglich NodeJS inspiriert hat.

Dieses System beruht auf dem Importieren und Exportieren von Modulen dank einiger bekannter Schlüsselwörter: require und exports. Das module.exports-Objekt ist wirklich spezifisch für NodeJS.

 // utils.js // we create a function function add(r){ return r + r; } // export (expose) add to other modules exports.add = add; // index.js var utils = require('./utils.js'); utils.add(4); // = 8

Das CommonJS-Team hat diese API als eine synchrone API entwickelt, was für Browser nicht so gut ist… Außerdem wird Commonjs nicht nativ von Browsern verstanden; es erfordert entweder eine Loader-Bibliothek oder eine Transpilierung.

#Asynchronous Module Definition (AMD)

AMD ist eine Art Abspaltung von CommonJS. Es wurde von Mitgliedern des CJS-Teams geschaffen, die mit der Richtung, die der Rest des Teams eingeschlagen hat, nicht einverstanden waren.

Sie haben beschlossen, AMD zu schaffen, um asynchrones Modul-Laden zu unterstützen. Dies ist das Modulsystem, das von RequireJS verwendet wird und das clientseitig (in Browsern) funktioniert.

 // add.js define(function() { return add = function(r) { return r + r; } }); // index.js define(function(require) { require('./add'); add(4); // = 8 }

Dieses Beispiel funktioniert nur, wenn Sie Requirejs auf Ihrer Website haben. Sie können einige andere AMD-Beispiele finden.

#Universal Module Definition (UMD)

Wie Sie vielleicht verstanden haben, sind diese 2 Formate leider gegenseitig unverständlich für einander. Aus diesem Grund wurde die UMD geschaffen. Es basiert auf AMD, enthält aber einige Sonderfälle, um die Kompatibilität mit CommonJS zu gewährleisten.

Leider bringt diese Kompatibilität eine gewisse Komplexität mit sich, die das Lesen und Schreiben erschwert. Wenn Sie möchten, können Sie mehrere Vorlagen von UMD-Code auf diesem Github-Repository finden.

#ES2015 Modules (ESM)

Da diese 3 Formate nicht so einfach zu lesen sind, schwer für statische Code-Analysatoren zu analysieren sind und nicht überall unterstützt werden, hat das ECMA-Team (das Team hinter der Standardisierung von Javascript) beschlossen, den ECMAScript 2015 (auch bekannt als ES6) Standard zu erstellen.Dieses Format ist sehr einfach zu lesen und zu schreiben und unterstützt sowohl synchrone als auch asynchrone Arbeitsweisen.

 // add.js export function add(r) { return r + r; } // index.js import add from "./add"; add(4); // = 8

Außerdem können es-Module statisch analysiert werden, was es Build-Tools (wie Webpack oder Rollup) ermöglicht, Tree-Shaking am Code durchzuführen. Tree-shaking ist ein Prozess, der unbenutzten Code aus Bundles entfernt.

Leider hat dieses Format immer noch 2 Nachteile (aber sie verbessern sich):

  • ESM unterstützt keine dynamisch importierten Module, aber es gibt seit Monaten einen Vorschlag, der in einigen Browsern implementiert wird.
  • Es wird nicht von allen Browsern unterstützt, aber glücklicherweise kann dies „behoben“ werden, dank… Transpilierung !

#Transpilierung

Transpilierung ist der Prozess der Übersetzung einer Sprache oder Version einer Sprache in eine andere. Die Idee ist also, ES6 nach ES5 zu transpilieren, um eine bessere Browserunterstützung zu erhalten. Leider hat diese Transpilierung einen Preis, da sie zusätzlichen Code hinzufügt, um die fehlenden Features von ES6 zu patchen, die in ES5 nicht existieren.

Der berühmteste Transpiler, der in diesem Fall verwendet wird, ist Babel.

#Weitere Lektüre

Wenn Sie weiter gehen wollen (durch Beispiele, Erklärungen, etc.), um zu verstehen, wie diese verschiedenen Formate funktionieren, hier sind einige Lektüren, die ich gefunden habe und die mich inspiriert haben:

  • JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015
  • Sie sollten esm verwenden
  • Modulares JavaScript schreiben mit AMD, CommonJS & ES Harmony
  • Was ist AMD, CommonJS und UMD?
  • Modularisierungstechniken (hier gibt es mehrere Seiten)
  • Der Zustand von JavaScript-Modulen