npm packages in einer html Webseite nutzen möglich?

Mit <script>…</script> kann man ja mit JavaScript seine Webseite etwas "aufpeppen". Ist es aber möglich, npm packages in solchen Webseiten aber auch zu nutzen?

Ich weiss ja, dass npm ausgeschrieben "Node Package Manager" bedeutet und ich somit eventuell die Webseite mit node aufstarten muss. Wenn das der einzige weg ist, wie mache ich das genau? Weil html und Node.js haben ja nicht vieles gemeinsam.

Alles was ich mit dem fragen will, ist:

Kann ich z.B. in <script>…</script> npm packages nutzen? Und wenn nicht, kann man das irgendwie möglich machen?

Answer 1

[regex9]

Du kannst ein CDN nutzen, bspw. UNPKG oder jsDelivr. Die für dich relevanten Teile des npm-Packages (bspw. die min.js) werden also via URL zur Verfügung gestellt, du brauchst sie nur noch via script-Tag einbinden.

Beispiel:

<script src="https://cdn.jsdelivr.net/npm/d3@6.2.0/dist/d3.min.js"></script>

Comments

[Jiron37]

Danke! Ist es aber möglich, ein npm package via Konsole runterzuladen um es somit dann auch im Programm zu nutzen?

[regex9]

@Jiron37

Ja. Die Abhängigkeiten kannst du über eine package.json verwalten. Mit npm install (im Kontext des Ordners mit der json-Datei) kannst du dann dafür sorgen, dass die Abhängigkeiten heruntergeladen werden. Danach brauchst du sie nur noch in dein HTML-Dokument einbinden. Mit Generator Tools wie Yeoman oder einer Skriptsprache wie PowerShell könntest du den Buildprozess noch weiter abstrahieren, damit auch das zu bestimmten Events automatisch angestoßen wird.

Answer 2

[NackterGerd]

Keine Ahnung wozu du das brauchst, HTML5 CSS3 und PHP sowie etwas minimales JS bieten ja schon fast alles was du für eine gute Homepage brauchst.

Wichtig damit eine Seite gut gefunden wird, ist auch dass keine unnötig großen Scripte geladen werden.

Außerdem wird von Google im Grunde nur das HTML ausgewertet.

Zum Anderen müssen Seiten auch gut mobil nutzbar sein.

Hier spielt natürlich auch die Datenübertragung eine erhebliche Rolle.

Die Animationen über CSS3 z.b. kosten keine große extra Datenmenge

Dynamische Seiten sind auch mit PHP und einfachen JS zu bewerkstelligen

Von da her sind solche Implementierungen mit großen JS Dateien immer sehr mit Vorsicht zu genießen.

Answer 3

[ichhabefragenxx]

http://www.agile-coding.net/html-dateien-in-node-js-einbinden/#:~:text=Da%20alle%20Dienste%20bei%20Node,)%7B%20%2F%2Finclude%20the%20test.

Comments

[Jiron37]

Naja, das ist eigendlich das gegenteil von was ich sehen wollte. Ich will npm in meinem html code verwenden und nicht html in node.js verwenden.

Danke aber!