keyboard_arrow_up

A quoi sert de versionner les librairies en Drupal 8 ?

Rédigé par Sylvain Lavielle
Développeur web freelance expert Drupal sur Toulouse

Le 16/05/2019

Drupal 8 a apporté un système homogène permettant de packager les librairies front-end : L'ensemble des éléments composant la librairie sont référencés dans un fichier .libraries.yml au niveau du thème ou du module. Ce mécanisme est assez bien documenté dans la documentation Drupal (voir "Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module").

Voici par exemple la description d'une librairie donnée en exemple dans cet article :

my-awesome-library:
  version: 1.x
  css:
    layout:
      css/my-awesome-library-layout.css: {}
    theme:
      css/my-awesome-library-theme.css: {}
  js:
    js/my-awesome-library.js: {}

Ce que ne dit pas la documentation (et c'est une astuce assez mal connue) c'est à quoi sert vraiment le numéro de version spécifié au niveau de chaque librairie. En effet ce numéro de version n'a pas qu'une utilité informative mais a une réelle fonction: Il permet en fait de forcer l'invalidation du cache HTTP des ressources de la librairie lorsque celle-ci est mise à jour.

En effet les liens permettant d'inclure des ressources disposent du paramètre de version sur la query-string

<script src="/core/assets/vendor/modernizr/modernizr.min.js?v=3.3.1"></script>

Petite précision importante : nous somme là dans le cas ou l'agrégation des scripts javascript est désactivée. Si celle-ci est activée le problème ne se pose pas. Par contre il est assez fréquent que l'agrégation des scripts soit désactivée sur les machines de développement de vos collègues de la devteam, et donc là, le problème de l'invalidation HTTP d'un script JS modifié se pose.

Si vous pensez à modifier le numéro de version lorsque vous modifiez une ressource de la librairie, tous les éléments de la librairie seront alors naturellement invalidés au niveau du cache HTTP du navigateur, et vous pourrez arrêter de dire à vos collègues ou à votre PO qui vous font remarquer que la fonctionnalité Javascript que vous venez de développer ne fonctionne pas :

"T'as pensé à vider le cache de ton navigateur ?"

Sujets abordés dans cet article