Arbeiten mit Svelte und npm (Einführung)

Svelte Projekt Anleitung

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.

Einleitung

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, SvelteKit als Framework verwenden und die notwendigen Plugins installieren, um das Projekt erfolgreich zu bauen und zu entwickeln.

Installation von Node.js und npm

Für Linux:

sudo apt update
sudo apt install nodejs npm

Überprüfen der Installation:

node -v
npm -v

Für Windows:

• 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:

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

Überprüfen der Installation:

node -v
npm -v

Projektstruktur

Eure Projektstruktur sollte wie folgt aussehen:

/svelte-project
  - package.json
  /src
    - routes
      - +page.svelte

Schritt 1: Initialisieren des Projekts

Erstelle ein neues Verzeichnis und initialisiere ein SvelteKit-Projekt:

mkdir svelte-project
cd svelte-project
npm create svelte@latest

Folge den Anweisungen, um das Projekt zu konfigurieren. Wähle "Skeleton project" und füge die folgenden zusätzlichen Optionen hinzu (Space-Key für Auswählen und Enter Taste für Bestätigen):

• TypeScript: Ja.
• ESLint: Empfohlen, um die Codequalität sicherzustellen.
• Prettier: Empfohlen, um den Code konsistent zu formatieren.
• Playwright: Optional, für End-to-End-Tests, falls benötigt.
• Vitest: Optional, für Komponententests, falls benötigt.

Schritt 2: Installation der notwendigen Abhängigkeiten

Installiere die Abhängigkeiten:

npm install

Schritt 3: Adapter konfigurieren

Installiere den Static Adapter:

npm install -D @sveltejs/adapter-static

Lösche den alten Inhalt von svelte.config.js und füge diesen ein:

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: null,
      precompress: false,
      strict: true
    })
  }
};

export default config;

Schritt 4: Prerendering aktivieren

Erstelle die Datei src/routes/+layout.js und füge folgendes hinzu, um die Seiten für das Prerendering zu definieren:

// This can be false if you're using a fallback (i.e. SPA mode)
export const prerender = true;

Schritt 5: Erstellen der Svelte-Komponente

Füge in src/routes/+page.svelte folgendem Inhalt hinzu und lösche den alten Inhalt:

<script>
  let name = "Welt";
</script>

<main>
  <h1>Hallo {name}!</h1>
</main>

<style>
  h1 {
    color: purple;
  }
</style>

Schritt 6: Aktualisieren der package.json

Lösche den alten Inhalt von package.json und füge diesen ein:

{
"name": "svelte-project",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"dependencies": {
"@sveltejs/kit": "^1.30.0",
"svelte": "^4.2.7"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-static": "^1.0.0",
"@sveltejs/vite-plugin-svelte": "^2.0.0",
"@types/eslint": "^8.56.7",
"eslint": "^9.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.36.0",
"globals": "^15.0.0",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"svelte-check": "^3.6.0",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"typescript-eslint": "^8.0.0-alpha.20",
"vite": "^4.0.0"
}
}

Schritt 7: Abhängigkeiten installieren

Führe den folgenden Befehl aus, um alle Abhängigkeiten zu installieren:

npm install --legacy-peer-deps
npm install

Schritt 8: Projekt bauen

Um das Projekt zu bauen, führe den folgenden Befehl aus:

npm run build

Schritt 9: Entwicklungsmodus starten

Um den Entwicklungsmodus zu starten, führe den folgenden Befehl aus:

npm run dev

Schritt 10: Projekt im Browser öffnen

Navigiere zu http://localhost:5173/. Du solltest die Svelte-Komponente sehen, die den Text "Hallo Welt!" anzeigt.