Installer Node.js & NPM pour compiler nos blocs Gutenberg

Avant, on pouvait coder du JavaScript qui ne nécessitait pas de compilation. Après tout, JS est un langage nativement compris par le navigateur. Mais lorsqu’on utilise React, qui est une surcouche, on doit faire appel à un compilateur.

Cela nous permettra d’écrire du pseudo-code JS plus simple à comprendre, qui sera ensuite compilé dans un JS compréhensible par tous les navigateurs. Dans ce cours, on va justement voir comment mettre en place tout le nécessaire sans encombre.

Node.js et NPM, c’est quoi ?

Avant de commencer, je vais vous présenter 2 technologies qui vont nous être nécessaires pour la suite de cette formation : Node.js et NPM.

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.

Ça peut paraître contre-intuitif de parler de serveur JavaScript, puisque ce langage est connu pour être avant tout un langage front-end. Mais on retrouve de plus en plus JS comme un langage serveur aujourd’hui !

En fait, lorsque le créateur de Node 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 web pour des applications web et SaaS performants ;
2. En local sur la machine du développeur pour compiler des fichiers en temps réel ;
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 les installer dans son projet : 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.

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/ à la racine de votre projet. De là il sera très facile de mettre à jour ces packages ultérieurement sans devoir aller tout télécharger à la main.

Pourquoi on a besoin de Node.js et NPM ?

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

Et bien comme Gutenberg utilise React, qui a besoin d’être compilé pour fonctionner, on va utiliser le système de dépendances de NPM pour indiquer que l’on a besoin de React et pleins d’autres librairies au passage.

Plus haut, je vous ai montré 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 qui permet de compiler les fichiers JavaScript lorsqu’on les modifie sur notre machine et que l’on va utiliser.

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.

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 estampillée LTS (Long Term Support) afin d’être à jour en terme de fonctionnalités et sécurité.

Télécharger l’installeur Node.js

L’installation devrait être une formalité : cliquez simplement sur continuer jusqu’à ce que l’assistant en ait terminé.

Une fois l’installation terminée, Node.js est opérationnel sur votre système. Il n’y a pas d’interface, tout se fera de manière transparente.

Vérifier que tout fonctionne

Afin de vérifier que Node.js et NPM sont bien accessibles, on va faire un test rapide à partir de notre terminal.

Sur Windows, vous pouvez lancer le Powershell et sur Mac, ouvrez simplement l’application Terminal. Par la suite, on utilisera le terminal intégré à notre éditeur de code.

Lancez votre terminal et inscrivez node -v, puis validez en appuyant sur Entrée. Si tout va bien le numéro de version de Node.js devrait apparaître. Faites la même chose pour npm :  npm -v.

Voici ce que j’obtiens de mon côté au moment où j’écris cette formation. En théorie, vous devriez voir apparaître des numéros de version plus récents.

C’est tout ce dont on a besoin pour faire du React en local. Ce n’était pas si compliqué au final !

---

Parfait, on est désormais paré pour la suite. Dans le prochain cours on va découvrir la librairie WordPress qui va créer automatiquement la base de notre extension pour pouvoir créer nos blocs.