Praktische Verwendung von NPM Scripts über Build und Start hinaus

Frontend-Entwickler beginnen oft mit einfachen npm run build- oder npm run start-Befehlen, aber NPM Scripts können viel mehr für Ihren Workflow leisten. Sie können NPM Scripts nutzen, um wiederkehrende Aufgaben zu automatisieren, die Entwicklung zu optimieren und Ihre Projekte wartbarer zu gestalten.

Was sind NPM Scripts und warum sollten Sie sie verwenden?

NPM Scripts sind benutzerdefinierte Befehle, die in Ihrer package.json-Datei unter dem Abschnitt "scripts" definiert werden. Sie bieten eine einfache Möglichkeit, Kommandozeilen-Tools auszuführen und Aufgaben zu automatisieren, ohne globale Pakete oder komplexe Build-Tools zu installieren.

{
  "name": "my-project",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

Die Hauptvorteile von NPM Scripts gegenüber Task-Runnern wie Gulp oder Grunt:

• Null-Konfiguration: Verwenden Sie sie direkt mit jedem npm-Projekt
• Direkter Zugriff auf CLI-Tools: Keine Abstraktionsschichten oder Plugins, um die Sie sich sorgen müssen
• Abhängigkeitsverfolgung: Tools werden als Projektabhängigkeiten installiert, wodurch sichergestellt wird, dass alle dieselben Versionen verwenden
• Vereinfachter Workflow: Keine Notwendigkeit, die Syntax eines anderen Tools zu erlernen

10 praktische NPM Scripts für Frontend-Entwickler

1. Code-Linting und -Formatierung

Konsistenter Code-Stil verbessert die Lesbarkeit und reduziert Fehler. Fügen Sie diese Scripts hinzu, um Ihren Code automatisch zu linten und zu formatieren:

"scripts": {
  "lint": "eslint src/**/*.js",
  "lint:fix": "eslint src/**/*.js --fix",
  "format": "prettier --write \"src/**/*.{js,jsx,css,scss,json}\""
}

Führen Sie npm run lint aus, um nach Problemen zu suchen, oder npm run format, um Ihren Code automatisch zu formatieren.

2. Build-Verzeichnisse bereinigen

Vor der Erstellung eines neuen Builds bereinigen Sie vorherige Build-Artefakte:

"scripts": {
  "clean": "rimraf dist",
  "prebuild": "npm run clean",
  "build": "webpack"
}

Das prebuild-Script wird automatisch vor build ausgeführt und sorgt jedes Mal für einen sauberen Zustand.

3. Tests mit verschiedenen Konfigurationen ausführen

Erstellen Sie verschiedene Test-Scripts für unterschiedliche Szenarien:

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage",
  "test:e2e": "cypress run"
}

4. Umgebungsvariablen verwalten

Richten Sie verschiedene Umgebungen für Entwicklung, Testing und Produktion ein:

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack serve",
  "build:dev": "cross-env NODE_ENV=development webpack",
  "build:prod": "cross-env NODE_ENV=production webpack"
}

Das cross-env-Paket stellt sicher, dass diese Scripts auf verschiedenen Betriebssystemen funktionieren.

5. Änderungen überwachen

Automatisch neu erstellen, wenn sich Dateien ändern:

"scripts": {
  "watch:css": "sass --watch src/styles:dist/styles",
  "watch:js": "webpack --watch",
  "watch": "npm-run-all --parallel watch:*"
}

Das npm-run-all-Paket ermöglicht es, mehrere Scripts parallel auszuführen.

6. Umgebungsdateien synchronisieren

Erstellen Sie ein Script zum Kopieren von Umgebungsvorlagen-Dateien:

"scripts": {
  "sync-env": "node -e \"require('fs').copyFileSync('.env.example', '.env', fs.constants.COPYFILE_EXCL)\"",
  "postinstall": "npm run sync-env"
}

Der postinstall-Hook wird automatisch nach npm install ausgeführt und stellt sicher, dass neue Teammitglieder die Umgebungsdatei erhalten.

7. Paketabhängigkeiten validieren

Prüfen Sie auf veraltete, doppelte oder verwundbare Abhängigkeiten:

"scripts": {
  "check:deps": "npm outdated",
  "check:security": "npm audit",
  "check:duplicates": "npx depcheck"
}

8. Dokumentation generieren

Automatisch Dokumentation aus Code-Kommentaren generieren:

"scripts": {
  "docs": "jsdoc -c jsdoc.json",
  "predeploy": "npm run docs"
}

9. Benutzerdefinierte Release-Workflows

Versionierung und Releases automatisieren:

"scripts": {
  "version:patch": "npm version patch",
  "version:minor": "npm version minor",
  "version:major": "npm version major",
  "release": "npm run build && npm publish"
}

10. Assets optimieren

Bilder und andere Assets komprimieren:

"scripts": {
  "optimize:images": "imagemin src/images/* --out-dir=dist/images",
  "prebuild": "npm run clean && npm run optimize:images"
}

Erweiterte NPM Script-Techniken

Scripts mit Pre/Post-Hooks verketten

NPM führt automatisch Scripts aus, die mit “pre” oder “post” vorangestellt sind, vor oder nach dem Haupt-Script:

"scripts": {
  "prebuild": "npm run lint",
  "build": "webpack",
  "postbuild": "npm run test"
}

Wenn Sie npm run build ausführen, wird automatisch prebuild, dann build, dann postbuild ausgeführt.

Argumente an Scripts übergeben

Übergeben Sie Argumente an Ihre Scripts mit --:

npm run lint -- --fix

Dies übergibt das --fix-Flag an den tatsächlichen Linting-Befehl.

Umgebungsvariablen in Scripts verwenden

Greifen Sie über Umgebungsvariablen auf package.json-Daten zu:

"scripts": {
  "echo-version": "echo $npm_package_version"
}

Wenn Sie npm run echo-version ausführen, wird Ihre Paketversion ausgegeben.

Plattformübergreifende Kompatibilität

Stellen Sie sicher, dass Ihre Scripts auf allen Betriebssystemen funktionieren, mit diesen Tools:

1. rimraf - Plattformübergreifende Alternative zu rm -rf
2. cross-env - Umgebungsvariablen plattformübergreifend setzen
3. npm-run-all - Mehrere Scripts sequenziell oder parallel ausführen

Beispiel für plattformübergreifende Scripts:

"scripts": {
  "clean": "rimraf dist",
  "copy": "copyfiles -u 1 src/**/*.html dist",
  "dev": "cross-env NODE_ENV=development npm-run-all clean copy --parallel watch:*"
}

Praxisbeispiel: Vollständiger Frontend-Workflow

Hier ist ein umfassendes Set von Scripts für ein modernes Frontend-Projekt:

{
  "scripts": {
    "clean": "rimraf dist",
    "lint:js": "eslint src/**/*.js --fix",
    "lint:css": "stylelint src/**/*.scss --fix",
    "lint": "npm-run-all --parallel lint:*",
    "test": "jest",
    "test:watch": "jest --watch",
    "format": "prettier --write \"src/**/*.{js,jsx,scss,json,md}\"",
    "validate": "npm-run-all --parallel lint test",
    "build:css": "sass src/styles:dist/styles --style compressed",
    "build:js": "webpack --mode production",
    "build": "npm-run-all clean lint --parallel build:*",
    "watch:css": "sass --watch src/styles:dist/styles",
    "watch:js": "webpack --watch",
    "serve": "browser-sync start --server dist --files dist",
    "dev": "npm-run-all clean --parallel watch:* serve",
    "prepublish": "npm run build",
    "version": "npm run format && git add -A src",
    "postversion": "git push && git push --tags"
  }
}

Diese Konfiguration bietet:

• Code-Qualitätsprüfungen mit Linting und Testing
• Automatisierte Formatierung
• Optimierte Builds für die Produktion
• Entwicklungsserver mit Hot Reloading
• Versionsverwaltung und Publishing-Workflow

Fazit

Durch die Implementierung dieser praktischen NPM Scripts optimieren Sie Ihren Entwicklungsprozess, verbessern die Code-Qualität und machen Ihre Projekte wartbarer. Beginnen Sie klein, indem Sie Scripts für die Aufgaben hinzufügen, die Sie am häufigsten ausführen, und erweitern Sie dann schrittweise Ihr Automatisierungs-Toolkit.

Häufig gestellte Fragen