01. Les bases de NPM pour le développement front

Dans cette leçon vous apprendrez les bases de NPM en tant qu’outil pour le développement front. Il est maintenant impossible de passer à côté lorsque l’on travaille sur des projets JavaScript modernes utilisant des frameworks tel qu’Angular ou React. Il convient donc avoir quelques notions pour appréhender efficacement ces frameworks.

Qu’est-ce que NPM ?

NPM pour Node Package Manager est tout simplement le gestionnaire de paquets de NodeJs. C’est, par exemple, l’équivalent de Nuget pout C#, RubyGems pour Ruby ou encore Composer pour PHP. Si par hasard vous n’avez pas encore entendu parler de NodeJS il est temps d’au moins regarder ce que c’est. En résumé, c’est un outil qui permet de faire fonctionner du JavaScript en dehors du navigateur afin de développer des applications en JavaScript comme on pourrait le faire en C# ou JAVA. Depuis sa sortie, de nombreuses applications ont été développées, le plus souvent sous forme d’outil en ligne de commandes. Mais pas que, nous verrons ça dans d’autres leçons.

Installer NPM

Pour pouvoir utiliser NPM il faut donc installer NodeJS. Pour ce faire, rendez-vous sur le site de node et téléchargez la version correspondante à votre OS. Suivez l’instruction d’installation sans oublier de cocher « path », pour que les commandes soient disponibles globalement.

Pour tester l’installation de Node et NPM, ouvrez une invite de commande ou un terminal et tapez :

$> node --version # affiche la version de node ex: v4.2.2

$> npm --version # affiche la version de npm ex: 2.14.7

Les commandes de base

Puisque nous nous plaçons dans le rôle du développeur front, nous allons voir ici comment initier un nouveau projet puis travailler avec NPM.

Tout d’abord, créez un nouveau dossier pour le projet et se placer dedans. Pour rester simple, nous utiliserons le même nom de dossier que pour notre projet. Il faut donc éviter les lettres majuscules. Voir la doc package.json pour les consignes de nommage.

Pour initier un nouveau projet nous allons utiliser la commande init.

$> npm init

Plusieurs questions vous serons posés. A la fin un fichier sera créé : le package.json qui contient toutes les informations sur notre projet et ses dépendances.

{
  "name": "mon-nouveau-projet",
  "version": "1.0.0",
  "description": "Un nouveau projet pour tester NPM",
  "main": "index.html",
  "scripts": {
  }
}

L’option –y permet de répondre aux questions avec les valeurs par défaut et donc de créer instantanément le projet.
$> npm init –y

Les dépendances

NPM gére deux niveaux de dépendances:

les dépendances directes du projet
les dépendances de développement du projet

Les dépendances projet

Les dépendances directes sont celles utiliseées dans notre projet pour fonctionner, comme par exemple jQuery ou Bootstrap. Profitons-en pour les installer avec l’option install (--save indique que c’est une dépendance directe)

$> npm install jquery --save
$> npm install bootstrap --save

La version abrégé, i pou install et -S pour --save
$> npm i jquery bootstrap –S

On retrouve alors la dépendance dans notre fichier de configuration. Un nouveau répertoire node_modules a été ajouté. A l’intérieur se trouve le contenu des dépendances installées.

{
  "name": "mon-nouveau-projet",
  "version": "1.0.0",
  "description": "Un nouveau projet pour tester NPM",
  "main": "index.html",
  "scripts": {},
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1"
  }
}

J'expliquerais plus bas le système de version des dépendances.

Maintenant que nous avons nos dépendances, créons un fichier HTML qui contiendra notre application afin de les utiliser. Comme c’est notre point d’entrée, nous l’appelons index.html et allons chercher les dépendances dans le répertoire node_modules.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mon nouveau projet</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    <h1><span class="glyphicon glyphicon-user"></span> Mon nouveau projet</h1>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</body>
</html>

J'ai ajouté un H1 avec un icône bootstrap afin de vérifier que tout fonctionne bien

Les dépendances de développement

Maintenant que nous avons terminé notre projet, nous voulons le tester. Pour cela, il nous faut un serveur web. C’est là qu’intervient une nouvelle fois NPM avec les dépendances de développement. C’est-à-dire les dépendances qui ne servent que pendant la phase de développement.

Pour cela, nous allons ajouter une dépendance qui s’appelle lite-server qui permet de lancer un serveur web dans notre répertoire de travail. C’est la même commande qu’auparavant, mais attention cette fois ci l’option est --save-dev.

$> npm install lite-server --save-dev

Notre fichier de configuration est automatiquement mis à jour avec cette nouvelle dépendance.

{
  "name": "mon-nouveau-projet",
  "version": "1.0.0",
  "description": "Un nouveau projet pour tester NPM",
  "main": "index.html",
  "scripts": {},
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1"
  },
  "devDependencies": {
    "lite-server": "^2.2.2"
  }
}

La section scripts

Maintenant comment lancer notre serveur de développement ? Il faut savoir que certaines dépendances s’utilisent en ligne de commande. Pour se faire, elles sont installées avec un script permettant de les utiliser. Si vous regardez à nouveau le répertoire node_modules vous verrez qu’en plus des 3 répertoires correspondants aux 3 dépendances installées, il y a maintenant un répertoire .bin qui contient tous les scripts des outils utilisables en ligne de commande.

Pour lancer notre server, nous pourrions donc tout simplement taper la commande vers ce script et cela fonctionnerait :

$> .\node_modules\.bin\lite-server

Mais, il existe un mécanisme permettant de simplifier ceci: la section scripts du package.json. Il est possible dans cette section de configurer des scripts que nous appellerons avec NPM.

Nous allons ajouter un nouveau script que nous appellerons server et qui lancera notre outil lite-server.

"scripts": {
    "server":"lite-server"
}

Pour appeler ce script, il suffit alors d'utiliser la commande run de NPM:

$> npm run server

Nous avons aléatoirement choisi d'appeler notre script server, mais il faut savoir qu’il existe par convention plusieurs noms de script prédéfini tel que start, postinstall, … qui ont des rôles bien définis afin de se retrouver plus facilement dans les projets des uns et des autres.

Par exemple, le script start sert à lancer le projet. Ainsi, quand quelqu’un récupère un projet, il n’a pas à se poser de question. S’il veut l’exécuter, il utilise la commande start.

Pour cela, configurons notre projet pour associer notre script à la commande start. Ce qui donne au final:

{
  "name": "mon-nouveau-projet",
  "version": "1.0.0",
  "description": "Un nouveau projet pour tester NPM",
  "main": "index.html",
  "scripts": {
    "server":"lite-server",
    "start":"npm run server"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1"
  },
  "devDependencies": {
    "lite-server": "^2.2.2"
  }
}

Et, il n'y a plus qu'à utiliser la commande start pour lancer notre server et donc éxécuter notre application.

$> npm start

Le navigateur doit alors s'ouvrir sur votre page et afficher son contenu.

Versionning des dépendances

Comme nous l'avons vu, notre fichier package.json contient toutes les dépendances de notre projet avec leur version. Cela permet de ne pas avoir à sauvegarder dans notre gestionnaire de sources le répertoire node_modules puisque nous pouvons le reconstruire avec le fichier de configuration par la commande install sans paramètre :

$> npm install

Cette commande réinstallera toutes les dépendances dans le projet.

Par contre, si vous avez fait attention, vous avez dû voir que devant le numéro de version, par défaut, il y a un accent circonflexe ^. C’est une des nombreuses options de notation des versions dont en voici quelques une des plus courantes:

^2.1.3 version compatible avec la version 2.1.3
2.1.3 exactement la version 2.1.3
2.1.* n’importe quelle version 2.1

Conclusion

Voilà, nous avons créé un premier projet de base par le biais de NPM et l'avons configuré pour être utilisé de manière aisée par les autres développeurs qui n’auront qu'à taper les deux commandes conventionnelles après avoir récupéré un projet pour l’installer et l’exécuter :

$> npm install
$> npm start

Maintenant, il convient de profiter de la richesse de l’écosystème de NodeJS pour ajouter des outils à notre projet afin d’améliorer nos processus de développement. Il existe à peu près un outil pour chaque chose que l’on souhaite faire.

Nous étudierons prochainement Grunt et Gulp qui servent à éxecuter des tâches et nous éviter des travaux rébarbatifs et répétitifs.