Gestion des dependencies

Introduction

Dans un projet de développement web, il y a la possibilité d'utiliser du third party code. C'est du code qui a été mis à disposition par des développeurs extérieur au projet. Pour intégrer ces bibliothèques et composants tiers, il y a la possibilité de télécharger les fichiers manuellement et de les téléverser sur son serveur web (voir Démo incorporation de third-party code dans un projet dans STIC I - exercice 6 (Concordia)).

L'autre méthode est d'utiliser un Content Delivery Network, CDN qui implique de simplement mettre un lien dans le code renvoyant à ce code externe.

La dernière méthode, celle qui va être présenter sur cette page, consiste à utiliser des logiciels de gestion de dependencies (dépendances). comme:

npm

Yarn

webpack

Ces outils permettent de gérer facilement les dépendances dans un projet de développement web.

Logiciels de gestion de dependencies

npm

npm est l'acronyme de Node Package Manager. C'est un gestionnaires de paquets open source pour les projets javascript et plus particulièrement Node.js. Ce gestionnaire permet de télécharger puis d'installer les dépendances (third party code) nécessaires à un projet. En plus du développement, npm est primordial pour la maintenance du projet.

Un autre aspect important est que npm permet de prendre en charge la version des dépendances. Cela évite que l'on ait à faire manuellement les différents changements qu’incombe les changements de versions des dépendances, si on souhaite que cela soit fait automatiquement.

L'avantage d'utiliser npm c'est qu'il est soutenu par une large communauté de développeurs qui proposent des packages npm permettant de simplifier les projets en utilisant du code déjà écrit.

Installation

Pour installer npm sur une machine, il suffit d'installer Node.js sur le système. En effet, npm est inclus par défaut.

Pour installer Node.js, vous pouvez suivre les étapes sur la page EdutechWiki Node.js.

Démarrer un projet avec npm

Dans le dossier de votre projet, que vous avez préalablement ouvert avec un éditeur de texte (par exemple: Visual studio code), lancez le terminal de commande et utiliser la commande suivante:

npm init

ou si vous voulez lancer votre projet avec les paramètres par défaut:

npm init -y

Ces commandes vont permettre de lancer un assistant de configuration pour créer un fichier package.json avec les paramètres de votre projet (nom, auteur, version, description etc.)

Une fois le projet lancer, vous pourrez installer divers paquets avec la commande npm

Installer un paquet

Pour les besoins d'un projet, il est possible de rechercher un paquet développer par un tiers pour réutiliser le code externe. En se rendant sur https://www.npmjs.com/, il suffit de rechercher dans la barre de recherche ce dont on a besoin.

Par exemple, si l'on aimerait du code nous permettant de faire des Qr code dans notre projet, dans la barre de recherche nous allons chercher "QR Code". Cela va nous renvoyer plusieurs résultat et il faudra choisir celui qui convient. Chaque développeur qui met à disposition son code, propose un tutoriel, avec les lignes de commandes, pour installer son paquet dans notre projet.

yarn

yarn est un outil de gestion de paquets semblable à npm. Comme ce dernier, il permet le téléchargement et l'installation de dépendances utiles à un projet. yarn est également utile dans la gestion des versions.

Ressources

npm: site officiel

npm : Tout comprendre du gestionnaire de paquets Node JS

yarn: site officiel

webpack: site officiel