Moderne JavaScript-Toolchain — npm scripts, Babel, ESLint

JavaScript im Jahr 2016 ist nicht das JavaScript von 2010. ES6 (ES2015) brachte Arrow Functions, Classes, Modules, Promises, Destructuring. Das Problem: Browser können es noch nicht. Die Lösung: Babel Transpiler, webpack Bundler, ESLint Linter.

Babel: JavaScript von morgen schon heute¶

Babel kompiliert ES6+-Code zu ES5, das jeder Browser verarbeiten kann. Sie schreiben modernes JavaScript und Babel übersetzt es in eine kompatible Version. Preset env erkennt automatisch die notwendigen Transformationen basierend auf den Zielbrowsern.

// ES6 (source code)
const fetchUsers = async () => {
  const response = await fetch('/api/users');
  const { data, total } = await response.json();
  return data.map(user => ({ ...user, active: true }));
};

// ES5 (Babel output) — works everywhere

ESLint: konsistenter Code¶

ESLint prüft Codestil und -qualität. Vordefinierte Konfigurationen (airbnb, standard) für Team-Konsistenz. IDE-Integration — Sie sehen Fehler beim Tippen. In der CI-Pipeline: der Build scheitert bei Lint-Fehlern.

npm scripts statt Grunt/Gulp¶

Für einfache Projekte brauchen Sie keinen Task Runner. npm scripts in package.json reichen aus: "build": "webpack --mode production", "test": "jest", "lint": "eslint src/". Weniger Abhängigkeiten, weniger Konfiguration.

Eine moderne Toolchain ist eine Investition¶

Babel + webpack + ESLint = die Grundlage eines modernen JS-Projekts. Das Setup dauert einen Tag, aber Entwicklerkomfort und Codequalität verbessern sich dramatisch.