Blog
Publier un module sur npm et bower

Partager

Les process’ pour développer des sites web ne cessent de s’améliorer et il est aujourd’hui possible de gérer plus simplement le management des librairies externes en utilisant npm et bower.

Auparavant, lorsqu’on souhaitait mettre à jour jQuery par exemple, il fallait :

  1. Aller sur le site officiel
  2. Copier la librairie dans le bon dossier de notre projet
  3. Parfois modifier les inclusions dans la balise script si le nom du fichier a changé (à cause de la version)
  4. Commit la librairie sur le CVS (git, SVN) ou FTP pour ceux qui utilise encore ce protocole pour livrer leurs projets

Et si jamais la nouvelle version n'était pas compatible et qu'on avait écrasé l'ancienne il fallait tout recommencer.

Cette méthode présentait l'inconvénient de surcharger le CVS avec des fichiers volumineux.

C'était un processus laborieux qui pouvait tourner au cauchemar sur les projets nécessitant des dizaines de librairies.

On a apt sur Debian et Maven pour Java. Nous avons désormais npm et Bower pour le JavaScript. Nous allons voir comment installer et publier des modules sur ces plateformes.

Désolé pour ceux qui pensait qu'on allait parler de ce Bauer là aujourd'hui :)

Installer npm

npm est un gestionnaire de paquets créé à la base pour NodeJS. Il est donc orienté back-end mais permet également d’installer d’autres outils facilitant le développement tels que Grunt, Gulp, Karma ou…Bower.

Installer npm est donc une étape indispensable pour pouvoir installer et publier des modules ou plugins. Il est fourni de base sur windows lorsque vous installez NodeJS.

Par défaut, npm est installé dans C:\Program Files\nodejs tandis que npm et tous les paquets installés de façon globale sont installés dans C:\Users\\AppData\Roaming\npm.

Installer Bower

Bower est quant à lui un gestionnaire de paquets entièrement dédié aux librairies JavaScript frond-end. C'est donc la plate-forme de choix pour publier vos modules.

Pour installer Bower, deux solutions :

  • En ligne de commande : npm install –g bower (-g est l’option permettant de l’installer globalement sur votre machine et pas uniquement pour le projet en cours)
  • Via un fichier de configuration dédié, le fichier package.json (on reviendra sur sa syntaxe plus bas), puis en exécutant la commande npm install dans le dossier où se trouve le fichier

Rechercher une librairie

Toutes les grosses librairies (angular, bootstrap, jquery, d3, fontawesome, etc) sont disponibles via Bower.

Il est possible d’utiliser la commande bower search your-search ou la page de recherche en ligne pour vérifier si vos librairies préférées sont bien présentes.

Installer une librairie

Une fois Bower installé, nous pouvons définir les librairies que nous souhaitons utiliser. Comme Bower est basé sur npm, nous pouvons procéder de la même façon

  • En ligne de commande : bower install angularjs
  • Via un fichier de configuration dédié, le fichier bower.json et en lançant la commande bower install dans le dossier où se trouve le fichier

Les librairies sont ensuite téléchargées dans le dossier « bower_components » .

Il est utile d’ajouter ces deux dossiers dans votre fichier .gitignore ou équivalent :

  • /node_modules
  • /bower_components

Grâce à ces deux commandes (npm install et bower install), vos répertoires restent propres. Les développeurs ne commit que le code propre à l’application et peuvent simplement récupérer la bonne version des librairies après avoir cloné le dépôt du projet.

Publier votre plugin

C’est une bonne chose de pouvoir installer la myriade de librairies externes existantes mais il est important d’appliquer ce principe à vos propres librairies afin de pouvoir facilement les réutiliser d’un projet à l’autre.

Pour cela nous allons voir les étapes à suivre pour publier votre plugin sur les gestionnaires de paquets.

Il peut être suffisant de publier votre plugin uniquement sur l’une des deux plates-formes. Néanmoins pour disposer de plus de visibilité et laisser plus de choix à l’utilisateur, il est recommandé de le publier sur les deux.

npm

Vous devez d’abord créer un dépôt public sur github. Il hébergera le code source de votre module (il est aussi possible d’utiliser github entreprises pour créer des paquets privés)

Publier ensuite vos sources sur ce dépôt.

Créer un compte sur npm

Cloner le dépôt sur votre machine et lancer la commande « npm init ». Cet outil vous permet de générer le fichier package.json

Il est important de respecter la notation semver pour la numérotation de vos versions: X.Y.Z :

  • X : version majeure, incompatible avec la version précédente
  • Y : version mineure, nouvelles fonctionnalités compatibles avec la version précédente
  • Z : patch ou bug fix

Lancer ensuite la commande npm adduser avec les identifiants entrés sur le site précédemment puis npm publish pour publier le module

Pour mettre à jour ce module par la suite, il faudra simplement changer le numéro de version dans le fichier package.json et retaper la commande npm publish afin que vos utilisateurs puissent obtenir la dernière version.

(N.B: la commande npm publish ne marche plus pour les versions antérieures à la 1.5 d'npm).

bower

La procédure est extrêmement similaire. D’abord un bower init pour configurer le fichier de conf :

On l’édite ensuite à la main pour rajouter nos dépendances (angularJS) dans ce cas.

"dependencies": {
	"angular": ">= 1.3.0"
  }

Puis on peut directement le publier via bower register :

Contrairement à npm, bower ne requiert pas d’authentification ou de gestion d’utilisateur. La règle du premier arrivé, premier servi s’applique.

Utilisation de votre plugin

Enfin, vous pouvez ensuite installer votre projet via :

  • npm install
OU
  • bower install

Code

Vous pouvez retrouver le code de cet article sur notre github

comments powered by Disqus