A quoi servent les peerDependencies dans le package.json ?

‍

Lors d'une installation npm ou bien de la lecture d'un <span class="css-span">package.json</span>, vous avez sans doute remarqué qu'il y avait deux grands groupes de dépendances : les <span class="css-span">dependencies</span> et les <span class="css-span">devDependencies</span>.

Le premier représente les dépendances directes de votre projet (ce dont on a besoin pour que cela fonctionne).

Le second représente ce qui entoure votre projet dans sa phase de développement (les outils qui vont permettre à celui-ci de fonctionner/builder/deployer par exemple).

Il existe un troisième groupe à ne pas négliger : les <span class="css-span">peerDependencies</span>.

Dans cet article, on va vous expliquer ce que peut apporter le champs <span class="css-span">peerDependencies</span> dans votre <span class="css-span">package.json</span>.

Ça sert à quoi les peerDependencies ?

En ajoutant une <span class="css-span">dependencie</span> dans cette section de votre <span class="css-span">package.json</span>, vous indiquez :

• Que votre code est compatible avec la version de la <span class="css-span">dependencie</span> indiquée
• Si la version de la <span class="css-span">dependencie</span> n'existe pas dans les node_modules, on va lever un warning
• Si la version de la <span class="css-span">dependencie</span> existe dans les node_modules, on ne fait rien

Si le package que vous êtes en train de développer a pour objectif d'être inclus dans d'autres packages, les <span class="css-span">peerDependencies</span> vont vous permettre d'indiquer l'utilisation d'une <span class="css-span">dependencie</span> qui vous incombe et lancer un warning pour le signaler.

Cas d'école

Ce cas est valable pour une version <span class="css-span">npm </span>> 3 et < 7 (on en parle à la fin de l'article).

Prenons un projet qui a pour dépendance a :

<pre><code>// Extrait du package.json de notre projet
{
 //...
 "dependencies": {
   "a": "1.0.0"
 }
}<code><pre>

Si on se penche sur le package.json de la dépendance a nous avons :

<pre><code>// Extrait du package.json de la dépendance a
{
 //...
 "peerDependencies": {
   "b": "^1.0.0"
 }
}<code><pre>

Un warning assez commun

Il vous est peut-être arrivé de tomber sur ce genre de message :

<pre><code>/npm WARN react-datepicker@0.25.0 requires a peer of react@^0.14.0 but none was installed.<code><pre>

Comme indiqué plus haut, ce warning vous informe qu'un package possède une <span class="css-span">dependencie</span> qui n'est pas installée (non présente dans vos <span class="css-span">node_modules</span>).

Dans notre cas d'école, on va avoir :

<pre><code>npm WARN a@1.0.0 requires a peer of b@^1.0.0 but none was installed.<code><pre>

C'est donc à vous d'installer cette dépendance en l'ajoutant aux <span class="css-span">dependencies</span> de votre projet.

<pre><code>// Extrait du package.json de notre projet
{
 //...  "dependencies": {
   "a": "1.0.0",
   "b": "1.0.0"
 }
}<code><pre>

Les versions installées doivent être compatibles entre-elles en suivant la gestion sémantique de version (le semver pour les initié·e·s).

Nouveauté de la version 7 de npm

Assez récente, cette nouvelle version vient changer cette façon de fonctionner.

Comme mentionné plus haut, en fonction de la version de npm, le comportement sera différent au niveau de l'installation des <span class="css-span">dependencies</span> :

• Avant la version 3.0 : <span class="css-span">npm</span> installait automatiquement les <span class="css-span">peerDependencies</span> mais cela occasionnait de nombreux problèmes (de versions...)
• Entre 3 et 7 : <span class="css-span">npm</span> lève un <span class="css-span">warning</span> vous informant qu'il y a des <span class="css-span">peerDependencies</span> à installer vous même
• 7 : <span class="css-span">npm</span> réinstalle automatiquement les <span class="css-span">peerDependencies</span>. Une grosse refactorisation du code interne a permit de résoudre les problèmes rencontrés avant la version 3

Conclusion

La compréhension du concept est finalement assez simple à saisir, je vous encourage à aller jeter un œil à l'intérieur des packages que vous utilisez !

Quant à la montée en version vers <span class="css-span">npm 7,</span> elle permet de nous faciliter la vie sur la gestion de ces <span class="css-span">dependencies</span> en nous évitant de nous faire des nœuds au cerveau.

‍