Arbeiten mit Svelte und npm (Einführung)

Diese Anleitung führt euch Schritt für Schritt durch den Prozess der Einrichtung und Verwendung von Svelte mit npm. Wir werden in dieser Anleitung ein einfaches Svelte-Projekt erstellen, Rollup als Modul-Bundler verwenden und die notwendigen Plugins installieren, um das Projekt erfolgreich zu bauen und zu entwickeln.

Was ist Svelte?

Svelte ist ein modernes Werkzeug zur Erstellung von Webanwendungen, das sich durch seinen einzigartigen Ansatz zur Handhabung der UI-Entwicklung auszeichnet. Im Gegensatz zu herkömmlichen Frameworks verlagert Svelte einen Großteil der Arbeit vom Browser auf den Build-Schritt. Das bedeutet, dass Svelte Ihre Komponenten in hocheffizienten JavaScript-Code kompiliert, der das DOM direkt aktualisiert und so schnellere und effizientere Anwendungen ermöglicht.

Was ist npm?

npm ist der weltweit größte Paketmanager für die JavaScript-Programmiersprache. Es bietet eine zentrale Plattform für Entwickler, um Codepakete (auch Module genannt) zu erstellen, zu teilen und zu verwalten. npm hilft dabei, die Entwicklung zu beschleunigen, indem es wiederverwendbare Komponenten bereitstellt und die Zusammenarbeit in Projekten vereinfacht.

Was ist degit?

degit ist ein Werkzeug, das es ermöglicht, Projektvorlagen aus Git-Repositories schnell und einfach zu kopieren, ohne die Git-Historie mitzunehmen. Es ist besonders nützlich für die Erstellung neuer Projekte aus bestehenden Vorlagen. Im Gegensatz zu einem normalen git clone-Befehl, der die gesamte Repository-Historie kopiert, holt degit nur die aktuellen Dateien und Ordner des Repositories, was den Kopiervorgang beschleunigt und das resultierende Projekt sauberer hält.

Was ist npx?

npx ist ein Werkzeug, das mit npm geliefert wird. Es ermöglicht das Ausführen von npm-Paketen, ohne sie vorher installieren zu müssen. Man kann damit direkt Befehle ausführen, die in npm-Paketen definiert sind.

Was ist ein Modul-Bundler?

Ein Modul-Bundler ist ein Werkzeug, das verschiedene JavaScript-Dateien und deren Abhängigkeiten zusammenfasst (oder "bündelt") und in einer oder wenigen Dateien ausgibt, die dann im Browser verwendet werden können. In modernen Webanwendungen besteht der Code häufig aus vielen einzelnen Modulen, die jeweils bestimmte Funktionen oder Komponenten definieren. Ein Modul-Bundler hilft dabei, diese Module effizient zu verwalten und zu laden.

Was ist Rollup?

Rollup ist ein beliebter Modul-Bundler für JavaScript. Es ist bekannt für seine Fähigkeit, sehr kleine und effiziente Bundles zu erstellen. Im Gegensatz zu einigen anderen Modul-Bundlern, die hauptsächlich für große Anwendungen gedacht sind, ist Rollup ideal für Bibliotheken und Projekte, die eine schlanke und performante Ausgabedatei benötigen.

Installation von Node.js und npm

Für Linux:

1. Node.js installieren:

   sudo apt update
   sudo apt install nodejs npm

2. Überprüfen der Installation:

   node -v
   npm -v

Für Windows:

1. Node.js herunterladen und installieren:

   • Besuche die offizielle Node.js-Website.

   • Lade den Windows-Installer (LTS-Version) herunter und führe ihn aus.

   • Überprüfe die Installation:

     node -v
     npm -v

Für Mac:

1. Node.js mit Homebrew installieren:

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   brew install node

2. Überprüfen der Installation:

   node -v
   npm -v

Schritt 1: Initialisieren des Projekts

Installiere die Svelte-CLI

Wenn du die Svelte-CLI noch nicht installiert hast, installiere sie global mit npm:

npm install -g degit

Erstelle ein neues Svelte-Projekt

Erstelle ein neues Projekt mit dem degit Befehl:

npx degit sveltejs/template svelte-app
cd svelte-app

Schritt 2: Installation der Abhängigkeiten

Installiere die notwendigen Abhängigkeiten:

npm install

Schritt 3: Projektstruktur

Die Projektstruktur müsste jetzt bei dir etwa so aussehen:

svelte-app
├── public
│   ├── global.css
│   ├── index.html
│   └── favicon.png
├── src
│   ├── App.svelte
│   ├── main.js
├── .gitignore
├── package.json
├── rollup.config.js
└── README.md

Schritt 4: Entwicklungsserver starten

Starte den Entwicklungsserver mit:

npm run dev

Navigiere zu http://localhost:5000. Du solltest jetzt die Svelte-Komponente sehen, die den Text "Hello world!" anzeigt.