« Gestion des dependencies » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 16 : Ligne 16 :
==Logiciels de gestion de dependencies==
==Logiciels de gestion de dependencies==
===npm===
===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 logiciel permet de télécharger puis d'installer les dépendances (third party code) nécessaire à un projet. En plus du développement, npm est primordial pour la maintenance du projet.
''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 logiciel permet de télécharger puis d'installer les dépendances (third party code) nécessaire à un projet. En plus du développement, npm est primordial pour la maintenance du projet.


==== Installation ====
==== Installation ====
Ligne 27 : Ligne 27 :


<code>npm init</code>
<code>npm init</code>
ou si vous voulez lancer votre projet avec les paramètres par défaut:
<code>npm init -y</code>
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 <code>npm</code>
==== 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===
===webpack===
===webpack===



Version du 2 février 2023 à 12:36

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 logiciel permet de télécharger puis d'installer les dépendances (third party code) nécessaire à un projet. En plus du développement, npm est primordial pour la maintenance du projet.

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

webpack

Ressources

npm: site officiel

npm : Tout comprendre du gestionnaire de paquets Node JS

yarn: site officiel

webpack: site officiel