Modern JavaScript toolchain — npm scripts, Babel, ESLint

JavaScript in 2016 is not the JavaScript of 2010. ES6 (ES2015) brought arrow functions, classes, modules, promises, destructuring. The problem: browsers cannot handle it yet. The solution: Babel transpiler, webpack bundler, ESLint linter.

Babel: tomorrow’s JavaScript today¶

Babel compiles ES6+ code to ES5, which every browser can handle. You write modern JavaScript and Babel translates it into a compatible version. Preset env automatically detects the necessary transformations based on target browsers.

// 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: consistent code¶

ESLint checks code style and quality. Predefined configurations (airbnb, standard) for team consistency. IDE integration — you see errors as you type. In the CI pipeline: the build fails on lint errors.

npm scripts instead of Grunt/Gulp¶

For simple projects you do not need a task runner. npm scripts in package.json are sufficient: "build": "webpack --mode production", "test": "jest", "lint": "eslint src/". Fewer dependencies, less configuration.

A modern toolchain is an investment¶

Babel + webpack + ESLint = the foundation of a modern JS project. Setup takes a day, but developer comfort and code quality improve dramatically.