React • Projet Node.js

Introduction

Dans cet article, nous allons faire un rapide résumé des outils utilisés pour réaliser une application web (Angular, React, Svelte, Vue, etc.) :

• l’environnement d’exécution Node.js ;
• le gestionnaire de dépendances npm ;
• le bundler.

Node.js

Node.js est un environnement d’exécution (runtime) multi-plateformes permettant d’exécuter du code écrit en Javascript.

Le code Javascript est nativement exécuté dans un navigateur web, tel que Chrome, FireFox ou Safari. Le navigateur possède un moteur Javascript qui lui permet de comprendre, d’interpréter et d’exécuter du Javascript.

Node.js permet de créer des applications écrites en Javascript et exécutées en dehors du navigateur.

Si la plupart des API Javascript sont disponibles à la fois dans le navigateur et dans Node.js, certaines sont exclusives à l’un ou à l’autre. Ainsi Navigator et Window ne sont pas disponibles dans Node.js.

Note

Le site officiel de Node.js propose de nombreuses ressources :

• Apprendre
• À propos
• Documentation de l’API

Autres environnement d’exécution

Il existe d’autres environnements d’exécution Javascript :

• Deno
• Bun

Voici également un tableau comparatif de compatibilité d’API des différents environnements d’exécution Javascript : Runtime compatibility

NPM

npm (Node.js Package Manager) propose deux outils :

• npm CLI (Commande Line Interface) ;
• npm Registry.

Node.js est livré avec l’interface en ligne de commande : npm CLI. npm CLI propose des commandes qui permettent de gérer les dépendances d’un projet Node.js.

Une dépendance est un ensemble autonome de code (package) fourni par un tiers, mis à disposition dans un dépôt (repository ou registry) et intégré dans le projet Node.js.

Le dépôt officiel de npm, npm Registry, héberge des millions de dépendances. Ce service est fourni par GitHub.

Les dépendances sont listées dans le fichier package.json.

package.json

{
  "name": "react-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

Il existe deux types principaux de dépendances :

• dependencies ;
• devDependencies .

Les dépendances incluses sous dependencies sont strictement nécessaires à la bonne exécution du code généré par le projet Node.js. Dans l’exemple ci-dessus react et react-dom sont les librairies React à destination du navigateur web. Elles seront incluses dans le code final.

Les dépendances listées sous devDependencies sont utilisées dans les phases de développement et de génération (build) du projet Node.js. Par contre, elles ne seront pas présentes dans le code final, même si elles ont servies à le générer.

Chaque dépendance est associée à une version qui peut être :

• sans prefix → exactement la version spécifiée : 18.2.0 ;
• avec le prefix ~ → la version spécifiée et les versions de type correctif (patch release) : 18.2.x ;
• avec le prefix ^ → la version spécifiée et les versions mineures (minor release) : 18.x.

Semantic versioning

Cette page présente le semantic versioning appliqué par npm.

Il suit les règles définies par une norme qui définit qu’une version a le format :

MAJOR.MINOR.PATCH

où :

• MAJOR : version majeure qui introduit des modifications pouvant casser la rétrocompatibilité (breaking changes) avec la version majeure précédente ;
• MINOR : version mineure qui ajoute des fonctionnalités rétrocompatibles ;
• PATCH : version corrective qui corrige des bugs de façon rétrocompatible.

Voici quelques commandes npm fréquemment utilisées :

• npm install : ajoute une nouvelle dépendance ;
• npm run : exécute l’un des scripts défini sous scripts ;
• npm update : met à jour les dépendances en respectant le versioning.

Note

Le site officiel de Node.js propose une Introduction à NPM.

npm CLI dispose également d’une documentation complète.

Autres gestionnaires de dépendances

Il existe d’autres gestionnaires de dépendances :

• pnpm ;
• yarn.

Bundler

Le bundler est un outil qui va « transformer » tous les fichiers de code source présents dans un projet Node.js en un bundle, c’est-à-dire un ensemble de fichiers (HTML, CSS, JS) directement utilisables par un navigateur web.

Le bundler effectue les actions suivantes :

• contrôler la syntaxe et la validité du code source ;
• gérer les dépendances entre les modules (import / export) ;
• transpiler/compiler du code (TS → JS, SCSS → CSS, JSX → JS, etc.) ;
• regrouper/fusionner les bouts de code générés en un seul fichier ;
• optimiser/minifier les fichiers générés.

Un bundler peut éventuellement :

• ajouter des polyfills afin d’être compatible avec des navigateurs plus anciens ;
• optimiser les ressources/assets (images, vidéos) ;
• nettoyer les bouts de code orphelins (par exemple une classe CSS déclarée et non utilisée).

En phase de développement, le bundler propose un comportement différent. Il continue à produire des fichiers utilisables par le navigateur. Néanmoins, son fonctionnement change et il permet alors de :

• mettre à jour très rapidement le code envoyé au navigateur ;
• conserver le lien (mapping) entre le code exécuté par le navigateur et le code source afin de pouvoir débugger.

Ainsi les optimisations visant à réduire la taille des fichiers et des ressources sont remplacées par des optimisations basées sur la vitesse : compilation partielle, chargement des modules à la demande, etc.

Ces deux modes de fonctionnement sont généralement appelés :

• mode développement ;
• mode production.

Les bundlers

Webpack est le bundler le plus utilisé. D’autres bundlers existent :

• Parcel
• Rollup
• Vite