Mise à jour automatique des composants js

Comment télécharger automatiquement les dernières versions des librairies javascript externes ?

25 novembre 2014

Rappels

javascript ou js est un langage informatique principalement employé dans les pages web interactives.

bower est un gestionnaire de librairies javascript. Cet outil est libre.

Exemple d'utilisation

Notre besoin était d'automatiser la gestion des librairies externes javascript, c'est-à-dire :

Nous utilisons par exemple dans notre projet lyon.glicer.com les librairies externes jquery et bootstrap.

Pré-requis

node.js doit être installé, ce logiciel libre permet d'exécuter du javascript côté serveur, il est nécessaire au fonctionnement de bower.

git doit être installé, ce logiciel libre permet la gestion des codes sources, il est utilisé par bower notamment pour télécharger la dernière version des codes sources.

Lors de l'installation de git choisir l'option qui permet d'utiliser git en ligne de commande ou ajouter manuellement git dans la variable d'environnement PATH.

Installer bower

En mode administrateur, exécuter la ligne de commande ci-dessous :

npm install -g bower

Cela affiche :

C:\Users\GLICER\AppData\Roaming\npm\bower -> C:\Users\GLICER\AppData\Roaming\npm\node_modules\bower\bin\bower
bower@1.3.12 C:\Users\GLICER\AppData\Roaming\npm\node_modules\bower
├── is-root@1.0.0
├── junk@1.0.0
├── stringify-object@1.0.0
├── abbrev@1.0.5
├── chmodr@0.1.0
├── which@1.0.7
├── osenv@0.1.0
├── archy@0.0.2
├── opn@1.0.0
├── bower-endpoint-parser@0.2.2
├── bower-logger@0.2.2
├── lru-cache@2.5.0
├── rimraf@2.2.8
├── graceful-fs@3.0.4
├── lockfile@1.0.0
├── nopt@3.0.1
├── q@1.0.1
├── retry@0.6.0
├── tmp@0.0.23
├── semver@2.3.2
├── cardinal@0.4.0 (redeyed@0.4.4)
├── request-progress@0.3.0 (throttleit@0.0.2)
├── shell-quote@1.4.2 (array-filter@0.0.1, array-map@0.0.0, array-reduce@0.0.0,jsonify@0.0.0)
├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
├── p-throttler@0.1.0 (q@0.9.7)
├── fstream@1.0.2 (inherits@2.0.1)
├── mkdirp@0.5.0 (minimist@0.0.8)
├── promptly@0.2.0 (read@1.0.5)
├── glob@4.0.6 (once@1.3.1, inherits@2.0.1, minimatch@1.0.0)
├── chalk@0.5.0 (ansi-styles@1.1.0, escape-string-regexp@1.0.2, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── request@2.42.0 (caseless@0.6.0, aws-sign2@0.5.0, forever-agent@0.5.2, json-stringify-safe@5.0.0, oauth-sign@0.4.0, tunnel-agent@0.4.0, stringstream@0.0.4, node-uuid@1.4.1, qs@1.2.2, mime-types@1.0.2, http-signature@0.10.0, hawk@1.1.1, form-data@0.1.4, bl@0.9.3, tough-cookie@0.12.1)
├── fstream-ignore@1.0.1 (inherits@2.0.1, minimatch@1.0.0)
├── bower-config@0.5.2 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1)
├── tar-fs@0.5.2 (pump@0.3.5, tar-stream@0.4.7)
├── bower-registry-client@0.2.1 (request-replay@0.2.0, lru-cache@2.3.1, async@0.2.10, mkdirp@0.3.5, graceful-fs@2.0.3, request@2.27.0)
├── decompress-zip@0.0.8 (nopt@2.2.1, mkpath@0.1.0, touch@0.0.2, readable-stream@1.1.13, binary@0.3.0)
├── update-notifier@0.2.0 (semver-diff@0.1.0, string-length@0.1.2, latest-version@0.2.0, configstore@0.3.1)
├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)
├── mout@0.9.1
├── inquirer@0.7.1 (figures@1.3.5, mute-stream@0.0.4, through@2.3.6, readline2@0.1.0, lodash@2.4.1, rx@2.3.18, cli-color@0.3.2)
└── insight@0.4.3 (object-assign@1.0.0, lodash.debounce@2.4.1, async@0.9.0, os-name@1.0.1, chalk@0.5.1, tough-cookie@0.12.1, configstore@0.3.1, inquirer@0.6.0)

Préparer un nouveau projet bower

bower a besoin d'un fichier bower.json et d'un fichier .bowerrc situés dans le même répertoire.

bower.json

Dans notre cas, nous souhaitons télécharger automatiquement les librairies externes suivantes :

{
    "name": "nom-du-projet",
    "dependencies": {
        "jquery": "git://github.com/components/jquery.git#1.9.*",
        "bootstrap": "git://github.com/twbs/bootstrap.git#3.3.*"
    }
}

.bowerrc

Par défaut, les composants sont téléchargés dans le répertoire bower_components.

Nous souhaitons les télécharger dans le répertoire src/js

{
  "directory": "src/js/"
}

Télécharger les librairies externes

En mode administrateur, depuis le même répertoire que le fichier bower.json, exécuter la ligne de commande ci-dessous :

bower install

Cela affiche :

bower not-cached    git://github.com/components/jquery.git#1.9.*
bower resolve       git://github.com/components/jquery.git#1.9.*
bower not-cached    git://github.com/twbs/bootstrap.git#3.3.*
bower resolve       git://github.com/twbs/bootstrap.git#3.3.*
bower download      https://github.com/components/jquery/archive/1.9.1.tar.gz
bower download      https://github.com/twbs/bootstrap/archive/v3.3.1.tar.gz
bower extract       jquery#1.9.* archive.tar.gz
bower deprecated    Package jquery is using the deprecated component.json
bower invalid-meta  jquery is missing "main" entry in bower.json
bower invalid-meta  jquery is missing "ignore" entry in bower.json
bower resolved      git://github.com/components/jquery.git#1.9.1
bower extract       bootstrap#3.3.* archive.tar.gz
bower resolved      git://github.com/twbs/bootstrap.git#3.3.1
bower install       jquery#1.9.1
bower install       bootstrap#3.3.1

jquery#1.9.1 src\js\jquery

bootstrap#3.3.1 src\js\bootstrap
└── jquery#1.9.1

Arborescence finale

bower.json
.bowerrc
src
└───js
        ├───bootstrap
        │   ├───dist
        │   │   ├───css
        │   │   ├───fonts
        │   │   └───js
        │   ├───fonts
        │   ├───grunt
        │   ├───js
        │   └───less
        │       └───mixins
        └───jquery

Versions des logiciels et langages utilisés