Moderní JavaScript toolchain — npm scripts, Babel, ESLint

JavaScript v roce 2016 není JavaScript z roku 2010. ES6 (ES2015) přinesl arrow functions, classes, modules, promises, destructuring. Problém: prohlížeče to zatím neumí. Řešení: Babel transpiler, webpack bundler, ESLint linter.

Babel: budoucí JavaScript dnes¶

Babel kompiluje ES6+ kód do ES5, který zvládne každý prohlížeč. Píšete moderní JavaScript, Babel ho přeloží do kompatibilní verze. Preset env automaticky detekuje potřebné transformace podle cílových prohlížečů.

// ES6 (zdrojový kód)
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) — funguje všude

ESLint: konzistentní kód¶

ESLint kontroluje styl a kvalitu kódu. Přednastavené konfigurace (airbnb, standard) pro konzistenci v týmu. Integrace s IDE — chyby vidíte při psaní. V CI pipeline: build selže na lint chybách.

npm scripts místo Grunt/Gulp¶

Pro jednoduché projekty nepotřebujete task runner. npm scripts v package.json stačí: "build": "webpack --mode production", "test": "jest", "lint": "eslint src/". Méně závislostí, méně konfigurace.

Moderní toolchain je investice¶

Babel + webpack + ESLint = základ moderního JS projektu. Setup zabere den, ale vývojářský komfort a kvalita kódu se zlepší dramaticky.