Chapitre 21 – Outils modernes

Le développement JavaScript moderne s'appuie sur une suite d'outils puissants qui facilitent l'écriture, la compilation, l'organisation et la vérification du code. Ce chapitre offre une introduction à ces outils incontournables.

1. Introduction à Node.js

Node.js est un environnement d'exécution JavaScript côté serveur. Il permet d'exécuter du JavaScript en dehors du navigateur.

• Utilisé pour construire des serveurs, des scripts d'automatisation, et des outils en ligne de commande.
• Installe également npm, le gestionnaire de paquets.
• Basé sur le moteur V8 de Chrome, très performant.

// Exemple simple avec Node.js
const fs = require('fs');

fs.readFile('fichier.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

2. npm et yarn

npm (Node Package Manager) et yarn sont deux gestionnaires de paquets.

• Permettent d'installer, mettre à jour et gérer des bibliothèques JavaScript.
• npm est installé avec Node.js ; yarn est une alternative plus rapide et fiable.
• Utilisent un fichier package.json pour décrire le projet et ses dépendances.

# Initialiser un nouveau projet
npm init -y

# Installer une dépendance
npm install express

# Installer une dépendance de développement
npm install eslint --save-dev

# Exécuter un script
npm run start

3. Transpilation avec Babel

Babel est un transpilateur JavaScript. Il transforme du code moderne (ES6+) en code compatible avec les anciens navigateurs.

• Permet d'utiliser les dernières fonctionnalités sans craindre l'incompatibilité.
• Utilisé en combinaison avec des bundlers.
• Configurable via un fichier .babelrc ou babel.config.json.

// Configuration Babel simple
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

4. Bundlers : Vite, Webpack, Parcel

Les bundlers regroupent tous les fichiers JavaScript, CSS, images… dans un ou plusieurs fichiers finaux.

• Webpack : très flexible, mais configuration parfois complexe.
• Parcel : configuration minimale, zéro configuration de base.
• Vite : rapide, support natif des modules ES, très populaire aujourd'hui.

# Démarrer un projet avec Vite
npm create vite@latest mon-projet --template react
cd mon-projet
npm install
npm run dev

5. ESLint et Prettier

ESLint analyse le code pour repérer les erreurs et incohérences. Prettier le formate automatiquement selon des règles définies.

• Utiles pour maintenir un style de code cohérent dans une équipe.
• Peuvent être intégrés à l'éditeur de code pour un feedback immédiat.
• Souvent utilisés ensemble dans les projets professionnels.

// Configuration ESLint de base
{
  "extends": "eslint:recommended",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}