Node.js & npm

Présentation

Historiquement, le langage Javascript a été conçu uniquement pour répondre aux besoins de programmation au sein d’un navigateur web. Par conséquent, dans les années 2000, il n’existait pas de logiciel permettant d’exécuter du code Javascript en dehors des navigateurs (ou de certains logiciels très spécifiques).

Node.js fut créé en 2010 pour permettre l’exécution de code Javascript en dehors d’un navigateur. Il s’agit donc d’un interpréteur de code Javascript. Toutefois, le logiciel ne se limite pas à cela. Il est également capable d’exécuter un certain nombre de commandes lui permettant d’interagir avec la machine : navigation dans les dossiers, lecture, copie et écriture de fichiers, connexion à un port réseau de la machine, etc. L’ensemble de ces commandes ne font pas partie du langage Javascript puisqu’elles n’ont pas leur utilité au sein d’un navigateur web.

Par conséquent, un script Node.js n’est pas équivalent à un script Javascript. Si l’interpréteur Node.js est en mesure de lire un grand nombre de commandes Javascript comme des conditions ou des boucles, il ne sera pas en mesure de comprendre des commandes natives du DOM d’un navigateur web comme les objets document et la classe Window. Inversement, votre navigateur ne sera pas en mesure d’interpréter une commande Node.js permettant de copier le contenu d’un fichier sur votre machine.

Dans ce chapitre, nous verrons une partie très réduite de l’usage de Node.js focalisée autour du développement web front-end. Nous verrons ce qu’est un environnement de développement Node.js et comment y ajouter des librairies tierces grâce à npm.

INFO

💡 Vous pouvez installer Node.js sur le site du logiciel.

Les environnements de développement Node.js

Node.js vous permet de créer des environnements de développement. Ces environnements accueillent des projets pouvant répondre à des besoins très divers qui ne se limitent pas au développement web. Vous pouvez réaliser des scripts qui agissent sur les fichiers de votre machine, qui interagissent avec vos autres logiciels installés, ou qui constituent le back-end d’une application web.

Ce que l’ensemble des projets Node.js ont en commun est un fichier de données package.json situé au niveau du dossier racine. Ce fichier contient des informations générales sur le projet comme son nom, son ou ses auteurs, sa version, etc. Mais il permet surtout de gérer très facilement les dépendances de votre projet.

En effet, conventionnellement, l’ensemble des librairies que vous utilisez dans un projet Node.js doivent être placées dans un dossier nommé node_modules à la racine de votre projet. Le fichier package.json doit contenir la liste de toutes les libraires de votre projet et leur version. Ainsi, si vous mettez à disposition votre projet, sur un repository Git par exemple, vous pouvez ignorer le dossier node_modules, souvent volumineux : les autres développeurs pourront connaître les dépendances de votre projet uniquement grâce au fichier package.json.

Pour créer un environnement de développement Node.js, rendez-vous dans le dossier où vous souhaitez placer le projet avec le terminal Node.js et faites :

npm init

Cette commande va initier la création d’un fichier package.json en vous demandant une série d’informations sur votre nouveau projet.

INFO

💡 Les frameworks front-end tels que Vue.js et Angular.js incluent dans leur propre système d’initialisation de projet la configuration du fichier package.json et de certaines dépendances. Il ne vous est, dans ce cas, pas nécessaire d’initier vous-même un environnement Node.js

La librairie npm

NPM, pour Node Package Manager, est une application installée nativement avec Node.js et qui, comme son nom l’indique, vous permet de gérer les librairies tierces utilisées dans vos projets.

Son fonctionnement est très similaire à celui de nombreux autres packages managers, comme APT par exemple sur linux.

Une fois dans le dossier de votre projet, la commande npm install myLibrary vous permet d’installer facilement une librairie dans le dossier node_modules de votre projet. Les informations de la librairie sont automatiquement ajoutées au package.json de votre projet. Il vous est également possible d’installer une librairie de façon globale sur votre machine en ajoutant l’option -g. La commande uninstall vous permet de façon similaire de supprimer une librairie de votre projet :

npm install myLibrary // install in the current project
npm install -g myLibrary // install globally on the machine
npm uninstall myLibrary // uninstall the library in the current project

NPM met à disposition un très grand nombre de librairies développées par la communauté, répondant à la plupart des besoins que vous pourriez imaginer. Que se soit pour faire de la 3D, de l’AI, de la data-visualisation, du cryptage ou simplement générer des identifiants uniques, vous pourrez y trouver votre bonheur.

INFO

📖 Vous pouvez rechercher des librairies directement sur le site de NPM, ou simplement en tapant “npm” suivi de votre besoin dans un moteur de recherche pour facilement trouver le nom de la librairie dont vous avez besoin.

Lorsque vous récupérez un projet sans son dossier node_modules, vous pouvez rapidement installer l’ensemble des dépendances du projet à l’aide de la commande :

npm install

Import / Export en Node.js

En Node.js (et en Javascript depuis la version ES6), il vous est possible d’importer des éléments d’un fichier Javascript dans un autre via les commandes import et export.

La commande export

Lorsque, dans un fichier Javascript, vous souhaitez qu’une variable, une fonction ou une classe soit utilisable dans un autre fichier Javascript, il vous est possible de l’exporter :

let myVar = { "field": "value" }
const myFunc = () => { console.log("Hello World") }

export { myVar, myFunc }

Comme le montre cet exemple, il vous est possible d’exporter plusieurs éléments depuis un même fichier. Vous pourrez ensuite les importer individuellement en vous référant à leur nom. C’est pourquoi il peut être intéressant de les renommer lors de leur export comme ceci :

export { myVar as basicObject, myFunc as printHelloWorld }

Dans la plupart des cas, vous souhaiterez exporter un seul élément depuis vos fichiers. Dans ce cas, il est préférable d’effectuer un export par défaut :

export default myFunc

La commande import

La commande import vous permet facilement dans un fichier Javascript d’aller récupérer le ou les éléments exportés depuis un autre fichier. Vous devrez alors spécifier le nom des éléments que vous souhaitez importer et le chemin du fichier contenant les éléments exportés :

import { myVar, myFunc } from "path/to/file.js"

Vous pouvez maintenant disposer des éléments importés comme n’importe quelle autre variable de votre fichier. Comme pour l’export, il vous est possible de renommer les éléments importés :

import { myVar as basicObject, myFunc as printHelloWorld } from "path/to/file.js"

Si vous voulez importer un élément exporté par défaut, vous n’êtes pas obligé de le récupérer avec le nom sous lequel il est exporté, vous pouvez directement lui donner le nom que vous voulez à l’import :

import printHelloWorld from "path/to/file.js"

Les chemins de fichier dans un environnement Node.js

Si vous spécifiez un chemin absolu en Node.js, le chemin pointera par défaut sur le dossier node_modules de votre projet.

Cela est bien pratique car vous êtes souvent amené à importer des éléments depuis une librairie tierce. Si vous installez une librairie awesomeLib dans votre projet, contenant un élément exportable par défaut, il vous suffit de faire :

import myElement from "awesomeLib"

Si j’utilise un chemin relatif par contre, le chemin sera bien évidemment relatif au fichier réalisant l’import :

import myElement from "./childFolder/file"

TIP

👌 Vous n’êtes pas obligé de spécifier l’extension .js de votre fichier lors de l’import. Node.js s’attendra par défaut à ce qu’il s’agisse d’un fichier Javascript.

De nombreux frameworks utilisant Vite ou Webpack configurent également des alias, qui permettent de cibler facilement certains endroits de l’architecture de votre projet. Ces alias sont ensuite remplacés par le bundler à la compilation.

INFO

👉 Vue.js définit par exemple l’alias @ qui vous permet facilement de pointer sur le dossier src de votre projet : import MyComponent from "@/components/myComponent.vue"

Aller plus loin

• Sur Node.js :
  • la documentation sur l’installation d’un environnement de développement back-end
• Sur NPM :
  • le site
  • Wikipedia