Snowpack

Snowpack. Ich liebe diesen Namen. Das ist das Neue von den Pika-Leuten, die etwas Großartiges vorhaben. Es ist sozusagen eine Bundler-Alternative. Es läuft über Pakete, die man von npm zieht, um sicherzustellen, dass diese ES-Modul-kompatibel sind (native Imports).

So verstehe ich das. Wenn man eine Codezeile schreibt wie

import React from "react";

Das ist eigentlich ungültiges JavaScript. Es sieht wie ein nativer Import aus, ist es aber nicht. (Damit es gültig wäre, müsste es mit einem Pfadzeichen wie ./ beginnen und auf .js enden.) Es ist nur eine Vereinbarung von großen Bundlern wie: „Oh, ich weiß, was du meinst. Du meinst, ich soll in node_modules nach diesem Ding suchen.“ Dann tut es das.

Viele Dinge auf npm sind nicht für ES-Module bereit. Sie sind in einem anderen Modulformat (z.B. CommonJS) und gehen davon aus, dass man mit ihnen einen Bundler verwendet. Eine Annahme, die ihnen eine Weile gute Dienste geleistet hat, aber eine Annahme, die für Front-End-Entwickler langsam zu einem Dorn im Auge wird.

UNPKG hatte eine Funktion, bei der man ?module an das Ende ihrer URLs anhängen konnte, um eine ES-Modul-freundliche Version des Pakets zu erhalten, aber das war lange Zeit im experimentellen Stadium, weil es anscheinend ein schwer zu lösendes Problem ist. Welche Pakete sind bereit für ES-Module? Können sie im Handumdrehen dafür vorbereitet werden?

Selbst der Pika CDN löst nicht die Probleme von Paketen, die nicht für die Verwendung über ES-Module geschrieben wurden. Da React zum Beispiel nicht direkt für die Verwendung mit ES-Modulen geschrieben ist, kann man es einfach nicht (aber man kann es immer noch über ein <script>-Tag verwenden).

Snowpack hat das anscheinend gelöst. Es führt seine Magie über die installierten (lokalen) Pakete aus und bereitet sie für die Verwendung mit ES-Modulen vor. Also, nachdem Snowpack gelaufen ist, kann man jetzt dies tun (was man vorher nicht konnte)

import React from '/web_modules/react.js';

Was gültiger Code für ES-Module ist. Außerdem, wenn man ohnehin Babel verwendet, muss man diese ursprüngliche Zeile nicht einmal ändern.

Daher ihr Marketing/ihre Erklärung

1) Anstatt bei jeder Änderung zu bündeln, führen Sie Snowpack einfach einmal direkt nach npm install aus.
2) Snowpack installiert Ihre Abhängigkeiten als einzelne JS-Dateien in ein neues Verzeichnis web_modules/ neu.
3) Schreiben Sie Code, importieren Sie diese Abhängigkeiten über einen ESM import und führen Sie dann alles im Browser aus.
4) Überspringen Sie den Bundling-Schritt und sehen Sie Ihre Änderungen im Browser sofort nach dem Speichern reflektiert.
5) Verwenden Sie weiterhin Ihre bevorzugten Web-Frameworks und Build-Tools! Babel & TypeScript werden unterstützt.

Es ist so, als würde man kostenloses natives Code Splitting erhalten, und man hofft einfach, dass ES-Module genauso schnell sein werden wie Bundling mit diesem Vorteil. Ich bin optimistisch. Ich denke, es ist noch am Anfang und wäre nervös bei großen Produktionssachen, aber ich denke auch, dass native ES-Module wahrscheinlich die Zukunft sind.