Modules ES et npm : organiser votre projet

Vous structurez un projet Node avec package.json, les modules ES, les dépendances npm et les scripts.

9 min · 3 questions

Un vrai projet ne tient pas dans un seul fichier : on le découpe en modules, des fichiers qui exportent ce qu'ils proposent et importent ce dont ils ont besoin. Vous connaissez déjà la syntaxe import / export du parcours JavaScript ; voyons comment Node l'active. Tout commence par package.json, la carte d'identité de votre projet : un fichier au format JSON qui décrit son nom, sa version et ses réglages. Pour le créer, placez-vous dans un dossier vide et lancez npm init -y (l'option -y accepte toutes les réponses par défaut). Ajoutez ensuite la ligne "type": "module" : elle indique à Node que vos fichiers .js utilisent les modules ES.

JSON

{
  "name": "mon-projet",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node main.js",
    "dev": "node --watch main.js"
  }
}

Votre package.json après npm init -y, complété avec la ligne type et deux scripts que nous utiliserons plus bas.

Créons deux fichiers dans ce dossier : math.js exporte une fonction, main.js l'importe. Détail propre à Node : l'import d'un fichier local commence obligatoirement par ./ et se termine par l'extension .js. Les deux sont requis, contrairement à ce que tolèrent certains outils web.

JAVASCRIPT

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from "./math.js";

console.log(add(2, 3));

Deux fichiers séparés. Lancez node main.js : le résultat 5 s'affiche.

La grande force de npm, c'est sa bibliothèque mondiale de paquets (packages) : du code écrit par d'autres, prêt à l'emploi. La commande npm install télécharge un paquet dans le dossier node_modules de votre projet et l'ajoute à la section dependencies du package.json : la liste des paquets dont votre projet a besoin pour fonctionner. Un fichier package-lock.json, créé automatiquement, mémorise les versions exactes installées, pour que tout le monde obtienne la même chose. Essayons avec chalk, un paquet qui colore le texte affiché dans le terminal.

BASH

npm install chalk

Après cette commande, chalk apparaît dans dependencies et dans node_modules ; vous pouvez alors l'importer comme un module.

Dernier pilier : les scripts npm, des raccourcis de commandes déclarés dans la section scripts du package.json. npm run dev exécute la commande enregistrée sous le nom dev, quelle que soit sa longueur réelle. Notre script dev utilise node --watch, une option qui relance automatiquement le programme à chaque modification d'un fichier : très confortable pendant le développement.

BASH

npm run start
npm run dev

Chaque commande lance le script du même nom. Arrêtez le mode watch avec Ctrl+C.

Ne modifiez jamais le contenu de node_modules et ne l'envoyez pas sur Git : ce dossier se régénère à l'identique avec un simple npm install, grâce à package.json et package-lock.json. Ajoutez la ligne node_modules à votre fichier .gitignore.

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

Quel est le rôle du fichier package.json ?
- Décrire le projet : nom, version, scripts et dépendances
- Contenir le code JavaScript principal du projet
- Stocker le code des paquets téléchargés
- Remplacer le dossier node_modules
Que se passe-t-il quand vous lancez npm install chalk ?
- chalk est copié directement dans votre fichier main.js
- chalk est seulement téléchargé, sans laisser de trace
- chalk est placé dans node_modules et ajouté aux dependencies
Pourquoi ajouter la ligne type module dans package.json ?
- Pour que npm installe les paquets plus rapidement
- Pour que Node lise les fichiers .js comme des modules ES (import/export)
- Pour publier automatiquement le projet sur npm