Anwendung vom ESM Modulen im Browser

[Rolf B]

Hallo Jonathan,

ich hatte Michaels Frage gelesen und mich bisher zurückgehalten, weil ich mit der Verwendung von NPM-Modulen im Browser keine Erfahrung habe.

Was ich insbesondere nicht weiß, ist, wie sich die Logik von Node von der Browserlogik unterscheidet. Die ES6-Spec sagt nämlich, dass der Modulname, der im Import angegeben wird, abhängig von der Hostumgebung interpretiert wird. Der Host ist entweder Node, oder der Browser. Und in einer package.json kann man wohl angeben, ob das Paket für Node oder für den Browser geeignet ist. Bei file-type ist das der Fall, soweit konnte ich schon ins Thema einsteigen.

Wenn ich in einem node.js Programm import { xyz } from 'some-module'; schreibe, und some-module der Name eines per NPM installierten Moduls ist, dann ist es meines Wissens node.js, der die package.json interpretiert und von dort erfährt, welche .js Datei zu laden ist. Und node.js ist es auch, der die package.json-Dateien der abhängigen Module einliest und daher weiß, wie er Folge-Imports aufzulösen hat.

Im Browser gibt's das nach meiner Kenntnis so nicht, dort muss ich "./somefile.js" als Modulname angeben, sprich: direkt die benötigte .js Datei. Und bei Folgeimports ist keine Instanz dazwischen, die bei einem import ... from 'other-module'; eingreift und in einer package.json nachschaut, welche .js Datei im Browser-Kontext zu laden ist. Und genau an der Stelle dürfte auch Michaels Problem sein.

Es gibt diverse Beispiele im Netz, die erklären möchten, wie man das im Browser tut. Zentral dafür scheint das NPM-Paket browserify zu sein, und man muss wohl auch ein Kapselmodul erstellen, von dem aus man die NPM-Module importiert.

Ob das tatsächlich alles so ist und wo die Fallstricke liegen, dafür müsste ich mich ein paar Stunden hinsetzen und basteln. Dafür hatte ich nur bisher keine Zeit. Wenn Du einschlägige Erfahrungen hast, dann würde ich mich freuen, wenn Du die Punkt für Punkt darstellen könntest. Gerne als Blog-Beitrag.

Rolf