Import von Nicht-ESM-Bibliotheken in ES-Modulen, mit clientseitigem Vanilla JS

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Wir leben in einer seltsamen Ära, in der es Unmengen von JavaScript-Bibliotheken gibt, die dazu gedacht waren, als <script>-Tags verwendet zu werden, die verfügbare Globals freilegen. UND es gibt Unmengen von JavaScript-Bibliotheken, die über Modul-Loader verwendet werden sollen. UND es gibt Unmengen von JavaScript-Bibliotheken, die davon ausgehen, dass Sie sie über npm verwenden. UND es gibt Unmengen von Bibliotheken, die für ES6-Imports erstellt wurden. Wenn Sie eine JavaScript-Bibliothek schreiben und auf maximale Nutzung abzielen, würden Sie sie auf all diese Arten funktionsfähig machen, auch wenn das eine lästige Mehrarbeit ist.

Ich liebe Leas Ideen hier, wie man Bibliotheken, die nie wirklich für den ES6 import vorgesehen waren, trotzdem so verwendet.

Zum Beispiel:

window.module = {};
import("https://cdn.jsdelivr.net/gh/reworkcss/css@latest/lib/parse/index.js").then(_ => {
  console.log(module.exports);
});

Und eine Funktion, falls Sie dabei sicherer sein müssten, wie eine kleine Abstraktion

Schauen Sie sich den Artikel für einen weiteren cleveren kleinen Trick an.

Direkter Link →