Gérer vos modules avec NPM !

Salut à toutes et à tous ! ;-)

Aujourd'hui, je veux vous présenter un outil que j'utilise de plus en plus en tant que développeur front-end : NPM (Node Package Manager). Développé en NodeJS, celui-ci possède plusieurs fonctionnalités très intéressantes, parmi lesquelles :

• builder
• repository
• gestionnaire de tâches
• gestionnaire de modules

Tout au long de cet article, je vais vous présenter la gestion des modules via cet outil.

Vous êtes bien accrochés ? :-)

Installation

Tout d'abord, il faut savoir que npm est le gestionnaire de paquets utilisé par le langage NodeJS. À titre de comparaison, il possède un rôle similaire à l'outil gem pour le langage Ruby.

Afin de procéder à son installation, il est donc tout naturel d'installer NodeJS sur votre système. En fonction de votre environnement, les méthodes d'installation peuvent varier. Je vous invite donc à vous rendre sur le site officiel de NodeJS afin de connaître la procédure exacte.

Une fois l'installation terminée, la commande npm est désormais disponible via votre terminal !

Les commandes de base

Rechercher un paquet précis

Vous cherchez un paquet NodeJS qui fait le café à votre place. Rien de plus simple, il vous suffit de lancer la commande suivante depuis votre terminal :

npm search <nomDuPaquet>

Soyons honnête, rechercher de cette manière peut-être fastidieux et surtout très long. Je vous conseille vivement de vous rendre sur le site de npm.

Installer un nouveau paquet

On a trouvé notre bonheur et tout naturellement on veut l'installer, rien de plus simple :

npm install <nomDuPaquet> --save-dev

Concrètement, ça va chercher le premier répertoire node_modules de votre arborescence et procéder à son installation.

C'est généralement cette méhode qu'il convient d'utiliser lors de l'installation d'un plugin pour son projet.

Toutefois, des modules comme gulp, grunt demanderons une installation dite globale :

npm install gulp -g

Il existe bien des façons d'installer un paquet. En voici une liste provenant du site de npm :

    npm install (with no args in a package dir)
    npm install <tarball file>
    npm install <tarball url>
    npm install <folder>
    npm install [@<scope>/]<name> [--save|--save-dev|--save-optional] [--save-exact]
    npm install [@<scope>/]<name>@<tag>
    npm install [@<scope>/]<name>@<version>
    npm install [@<scope>/]<name>@<version range>
    npm i (with any of the previous argument usage)

Memento

Quelques commandes classiques pour la gestion de vos paquets.

//Désinstaller un paquet
 npm uninstall <nomDuPaquet>

// mettre à jour tous les paquets présent dans votre repertoire node_modules
 npm update

// lister tous les paquets installés
npm list

// information d'un paquet
npm info <nomDuPaquet>

Création d'un package

C'est quand même très pratique de pouvoir utiliser la commande npm install monSuperComposant pour installer son propre composant.

La méthode à suivre est relativement simple mais nécessite quand même quelques commandes.

On ouvre tous nos terminaux, et c'est parti.

La première chose à faire est de créer un package.json. Pour cela on exécute la commande npm init dans le répertoire contenant notre code. Plusieurs informations vont être demandées.

Voila à quoi cela ressemble :

MacBook-Air:grid GuillaumeDEMESY$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (grid) 
version: (1.0.0) 
description: BEMish grid component
entry point: (index.js) index.css
test command: 
git repository: (https://github.com/cssrecipes/grid.git) 
keywords: browser, style, css, css-components, css-recipes, cssrecipes, recipes, grid, responsive
author: bloodyowl
license: (ISC) MIT

Une fois toutes ces informations renseignées, une vue d'ensemble vous sera proposée :

About to write to /Users/mac/Sandbox/grid/package.json:

{
  "name": "grid",
  "version": "1.0.0",
  "description": "BEMish grid component",
  "main": "index.css",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/cssrecipes/grid.git"
  },
  "keywords": [
    "browser",
    "style",
    "css",
    "css-components",
    "css-recipes",
    "cssrecipes",
    "recipes",
    "grid",
    "responsive"
  ],
  "author": "bloodyowl",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/cssrecipes/grid/issues"
  },
  "homepage": "https://github.com/cssrecipes/grid"
}

Is this ok? (yes) 

En tapant yes, votre package.json est créé, et votre module prêt.

Avant de le publier, on va s’intéresser à la partie scripts qui pour le moment se résume à :

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }

Autrement dit, à pas grand chose.

Cette partie va nous servir à écrire une liste de commande afin d’exécuter ou tester notre module. Dans l'exemple choisi, à savoir Grid de cssrecipes on va utiliser le transpileur cssnext pour compiler notre fichier. Pour cela nous devons donc l'intégrer en tant que devDependencies :

"devDependencies": {
    "cssnext": "^1.0.0"
  }

Il sera alors installé automatiquement lors de l’exécution de nos différentes commandes.

Voici un exemple de script très simple :

"scripts": {
    "setup": "npm install && mkdir -p build",
    "preprocess": "cssnext index.css build/index.css",
    "build": "npm run setup && npm run preprocess",
    "preprocess-test": "cssnext test/test.css build/test.css",
    "build-test": "npm run setup && npm run preprocess-test",
    "test": "npm run build-test"
  }

Cela nous donne accès à deux commandes :

1) npm run build

Regardons un peu plus en détail cette commande.

"build": "npm run setup && npm run preprocess"

Si on la décompose on constante que l'on va lancer toute une série de sous commande, ce qui dans l'ordre donnera :

// installation des dépendances
npm install

//création d'un répertoire build
mkdir -p build

//compilation de notre fichier index.css avec cssnext
cssnext index.css build/index.css

On a alors un fichier compilé et prêt à être utilisé dans son projet. C'est surtout pratique si on n'utilise pas cssnext dans son workflow.

2) npm run build-test

A peu de chose prêt on va exécuter les mêmes commandes que précédemment, sauf que petit bonus, on a accès à une sandbox par l'intermédiaire du répertoire test. On peut y ajouter une démo, ou en tant qu'utilisateur faire ses propres test sans polluer le code original. Je vous invite à regarder l'exemple sur Grid

Publish or not, that is the question

Notre configuration est maintenant terminée. Si vous souhaitez rendre votre module publique : npm publish fera le boulot. Quelques instant plus tard il suffira d’exécuter npm install <monSuperModule> et votre module s’installera sur votre machine.

La phase de publish n'est pas obligatoire. Si votre code est disponible sur Github par exemple, rien ne vous empêche d'utiliser npm install git://github.com/cssrecipes/grid et même dans le cas d'un repository privée avec git+ssh://git@github.com:account/repo.git#v0.5.0

Libre à vous d'utiliser la méthode que vous souhaitez.

En conclusion

La force de NPM réside dans sa gestion des dépendances. Chaque module installe ses propres dépendances indépendamment des autres. Mais, car il y a un mais, si un module est installé à la racine de votre répertoire node_modules, et qu'il est utilisé en tant que dépendance d'un autre (même version bien entendu), NPM aura la présence d’esprits de ne pas l'installer deux fois.

Chez Splitfire nous avons décidé de n'utiliser que NPM pour nos dépendances, voici un extrait de notre package.json pour nos composants css et gulp :

  "devDependencies": {
    "cssrecipes-custom-media-queries": "0.3.0",
    "cssrecipes-defaults": "0.5.0",
    "cssrecipes-grid": "0.4.0",
    "cssrecipes-reset": "0.4.0",
    "cssrecipes-utils": "0.4.3",
    "font-awesome": "*",
    "gulp": "3.8.10",
    "gulp-cssmin": "^0.1.6",
    "gulp-cssnext": "^1.0.0",
    "gulp-imagemin": "^2.1.0",
    "gulp-minify-css": "^0.3.11",
    "gulp-plumber": "^0.6.6",
    "gulp-util": "^3.0.1",
    "imagemin-pngquant": "^4.0.0",
    "load-grunt-tasks": "*",
    "minimist": "^1.1.0",
    "moment": "^2.9.0",
    "suitcss-components-button": "4.0.0",
    "suitcss-components-flex-embed": "2.0.2"
  }

Dans un prochain article je vous parlerai de l'utilisation de npm en tant que gestionnaire de tache à la manière de grunt ou gulp.

Amusez-vous bien ! :-)