Node & NPM : outils et librairies nécessaires

Node.js et NPM, c’est quoi ?

Node.js

Node.js pour faire simple, c’est un serveur en Javascript qui permet tout un tas de choses. Il peut être utilisé par exemple comme un serveur web, ou encore en local sur sa machine pour assister le développeur lorsqu’il créé un site ou une application.

Il n’y a rien qui cloche dans ce que je viens dire ? Un serveur en Javascript vraiment ? On m’a toujours dit que JS c’était un langage de programmation côté client non ?

Et bien si, tout à fait ! Mais lorsque son créateur a imaginé un environnement temps réel basé sur des événements pour en faire un outil passe-partout, il s’est dit que Javascript était le langage le mieux adapté pour ça !

Du coup on utilise aujourd’hui Node.js dans des cas très divers et variés. Il peut-être utilisé :

1. Comme serveur pour des applications web qui affichent des informations en temps réel (par exemple des applications de visio).
2. En local sur la machine du développeur pour compiler et transformer des fichiers lors de l’enregistrement
3. Pour gérer les dépendances d’un projet (toutes les librairies externes) grâce à NPM

C’est surtout les points 2 et 3 qui vont nous intéresser pendant cette formation.

NPM

NPM est le système de gestion de paquets pour Javascript. On y retrouve des dizaines de milliers de librairies utilisables pour tous types de projets web.

NPM est totalement écrit en JS et intégré de base dans Node, c’est pour cette raison que l’on va l’installer.

Il consiste en un répertoire en ligne qui centralise toutes les librairies Javascript. Un développeur peut alors facilement, dans son projet, dire qu’il a besoin de certaines librairies JS : on parle de dépendances.

Au début de la période jQuery on devait manuellement télécharger nos scripts externes, comme par exemple : jQuery, Moment.js (qui permet de simplifier la gestion de dates en JS, un incontournable), et Select2 (un champ select amélioré et personnalisable).

On ne s’en sortait pas. Et c’est NPM qui a permis de corriger ce problème.

Sur le principe, on utilise NPM en ligne de commande, et on indique quelles sont les dépendances nécessaires à notre projet via la commande : npm install <nomdelalib>.

Un fichier package.json est alors créé à la racine de votre projet contenant les dépendances et la version minimale à télécharger :

Ces librairies, seront ensuite stockées dans le dossier /node_modules. De là il sera très facile de mettre à jour ces packages ultérieurement sans devoir aller tout télécharger à la main.

Dans quels cas on va utiliser Node et NPM

Bon c’est super tout ça mais quel est le rapport avec Gutenberg ?

Et bien comme Gutenberg utilise React (qui pour le coup est une simple librairie comme jQuery), on va utiliser le système de dépendances pour indiquer que l’on a besoin de React et pleins d’autres librairies au passage.

De plus, je vous ai montré plus haut un exemple simple et standard. Mais en réalité NPM va plus loin. Il permet de télécharger des dépendances qui vont servir seulement pendant la phase développement, comme Webpack (que l’on va utiliser), qui permet de compiler les fichiers Javascript lorsqu’on les modifie sur notre machine.

En effet le code que l’on va écrire, et notre organisation de fichiers ne seraient pas compris nativement par un navigateur. C’est pour ça qu’on aura besoin qu’un outil vienne compiler et transformer tout ça.

Si vous avez déjà utilisé des préprocesseurs CSS comme Sass, Less ou Stylus, c’est exactement le même principe.

Dans les 2 prochains cours on va voir tout cela plus en détails. Ce qu’il faut retenir pour l’instant c’est que Webpack utilise Node pour fonctionner.

Installer Node.js sur son ordinateur

C’est ici la partie la plus simple : Node.js dispose d’un installeur classique compatible avec tous les systèmes d’exploitation.

Il suffit donc de le télécharger et lancer l’installation. Prenez la version la plus récente afin d’être à jour en terme de fonctionnalités et sécurité.

Pour ce que l’on va faire ensuite, nous aurons besoin de la version 8 au minimum, donc si ça fait un petit moment que vous l’avez installé, faites une mise à jour !

Télécharger l’installeur Node.js

L’installation ne pose aucun souci, cliquez sur continuer jusqu’à ce que l’assistant en aie terminé.

La dernière fenêtre de l’assistant nous indique qu’il a bien installé Node.js ainsi que NPM !

Outils de ligne de commande

Pendant cette formation, nous allons utiliser Webpack qui va compiler notre code. Il utilise NPM que l’on vient d’installer.

Pour lancer le tout on a besoin d’un outil de ligne de commande (Command Line interface), ou pour faire simple, un terminal.

Sur Windows vous avez le PowerShell et sur Mac le terminal natif. Pour ma part j’utilise iTerm2 que je trouve un peu plus sexy.

Mais franchement pour le peu que l’on va s’en servir, inutile d’en télécharger un autre.

Vérifier que tout fonctionne

Lancez donc votre terminal et tapez npm -v, puis validez. Si tout va bien le numéro de version de NPM devrait apparaitre. Faites la même chose pour node :  node -v.

Super, tout va bien ! Si ça ne fonctionne pas, laissez-moi un commentaire en bas de page. Il se peut qu’il faille ajouter le chemin à votre $PATH global.

Installer la syntaxe JSX dans son éditeur

Une dernière chose pendant qu’on est dans l’installation des outils : pour bien afficher la syntaxe particulière de React, appelée JSX dans votre éditeur de code, pensez à ajouter le package correspondant pour que la coloration de votre code fonctionne correctement.

Dans Atom par exemple allez dans Preferences... > Install et tapez JSX dans la recherche.

Sélectionnez le module language-javascript-jsx et installez-le !

Parfait, on est désormais paré pour la suite. Dans le prochain cours on va découvrir rapidement Webpack, qui nous permettra de compiler les fichiers JS et simplifier la vie du développeur.