Best practice für JS-Bibliotheken

[Rolf B]

Hallo Michael_K,

Ich finde es aktuell sehr unglücklich, dass viele gute Node-JS Bibliotheken nicht so ohne weiteres im Browser genutzt werden können.

Das hat vor allem einen Grund: AMD vs CJS. Brian Leroux schreibt hier darüber (und erklärt auch die Abkürzungen).

Node.js hat sich der CJS Moduldefinition verschrieben und die Browser nutzen das AMD-System, das auf einer define-Funktion aufsetzt. So, wie ich das verstehe, passem diese beiden Ansätze nicht gut zusammen. Der Grund ist, dass der Ansatz mit let modul = require("./modul.js") synchron ist. Auf einem Server ist das okay, im Browser geht das einfach nicht. Ich kann ein Script nicht hängen lassen, während ein weiteres File vom Server geholt wird. Deswegen bringt eine mir bekannte AMD Bibliothek - requirejs - einen CJS Adapter mit. Aber: der ist offline, er transformiert das CJS-Modul auf Sourcecode-Ebene in ein für AMD verwendbares Format. Ich habe nicht damit experimentiert, ob man CJS-Module auch direkt mit require.js einbinden kann.

In diesem Github-Projekt sind diverse Templates aufgeführt, wie man AMD und CJS verheiraten kann. Je nach den Erfordernissen kann man ein einfacheres oder komplexeres Template auswählen. Diese Templates ermöglichen das Schreiben vom Modulen, die von AMD-Loadern wie requirejs oder von CJS Loadern wie Node.js geladen werden können.

ES6? Fehlanzeige. Mit ES6 Modulen geschah, was Randall Munroe in seiner Weisheit vor 10 Jahren zeichnete: Standards proliferation

Das schlimmste an ES6 Modulen ist, dass man nicht abfragen kann, ob man exportieren darf. Abfragen kann man (via imports.meta) zwar noch, aber das export-Statement ist kein Statement. Es ist eine Deklaration. Wenn diese Deklaration in einem if oder try/catch auftaucht, bricht das Script mit einem Error ab. Wenn sie auftaucht und das Script nicht mit type="module" geladen wird, bricht das Script mit einem Error ab.

D.h. sobald man "export" in seinem Script hat, lässt es sich nur noch als type="module" laden.

Heißt: Entweder ES6, oder UMD. Beides in einer Datei geht nicht.

Man kann sicherlich einen Toolstack aufbauen, der Dir aus einem Sourcefile beide Modulvarianten erzeugt. Aber zwei Varianten müssen es wohl sein. Und ich hoffe, mich widerlegt jetzt jemand 😉

Rolf