Intégration web frontend : passer de Bower à Yarn

Aujourd’hui, petite mise à jour côté développement web avec un projet type d’intégration de Bootstrap réutilisable et utilisant Yarn avec Grunt.

Je développais jusqu’à maintenant mes projets web avec Boostrap et SASS comme pré-processeur CSS (voir ici). J’utilisais le gestionnaire de tâches Grunt pour la compilation du code CSS conjointement avec le gestionnaire de paquet Bower.

Seulement, Bower n’est bientôt plus supporté et on est encouragé, au moment de l’installation de paquets via Bower, à migrer vers Yarn.

Dans le cas d’un projet existant, il existe l’alternative d’utiliser le paquet npm bower-away, qui permet de migrer assez facilement un projet existant utilisant Bower vers Yarn. Voir à ce sujet cet article explicatif (en anglais) sur le blog officiel Bower.

Comme j’ai démarré récemment un nouveau projet d’intégration, j’ai préféré démarrer sur de base neuves en initialisant mon projet avec Yarn. Pour cela, j’ai simplement suivi les directives de la doc de Yarn, ne rencontrant aucun problème. J’ai ensuite insérer mon fichier Gruntfile.js de gestion des tâches de développement (compilation, copie de fichiers…) dans mon nouveau projet utilisant Yarn. Et voilà, le tour est joué !

Accéder au dépôt Git du projet type

Petite différence notable entre un projet avec Bower et Yarn, dans un projet Bower, les paquets npm requis se trouvent dans le fichier package.json et les dépendences gérées par Bower dans le fichier bower.json. Avec Yarn, les paquets et dépendences requis se trouvent tous dans le fichier package.json.

Remarque : bien que je sois passé à Yarn, pour des questions de simplicité et de délai, je reste dans un premier temps avec Grunt pour la gestion des tâches de développement. Il faudrait envisager d’utiliser un autre gestionnaire de tâches comme Webpack (voir à ce sujet cet article et celui-ci, tous deux en anglais) qui semble présenter des avantages.

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.