Serveur Build

CommitStrip Javascript

Les outils de build et d'automatisation#

Pour optimiser notre temps de développement, il est utile de faire faire à la machine tout ce qui est répétitif et automatique.

Les développeurs sont très (trop?) créatif dès qu'il s'agit de faciliter leur travail quoidien. Il existe ainsi une multitude de frameworks Javascript et au moins autant d'outils pour les utiliser.

Coté Back-dev#

Il existe un grand nombre de builder pour node.js (grunt,brunch...). On l'a vu, node.js est souvent fourni avec son gestionnaire npm mais ce dernier ne se contente pas de gérer les modules et leur dépendances, il peut très bien faire une grande partie du 'Job'. La commande npm run permet ainsi de lancer n'importe quel script définis dans le fichier package.json, avec l'aide du module nodemon, il est ainsi possible de surveiller vos fichier et de relancer vos tests a chaque modification de vos fichiers sources.

package.json

...
  "scripts": {
    "start": "node server.js",
    "debug": "node-debug server.js",
    "watch": "nodemon",
    "test" : "./node_modules/.bin/mocha --reporter spec"
  },
  "devDependencies": {
    "mocha":"^4.1.0",
    "chai":"^4.1.2",
    "chai-fs":"^2.0.0",
    "chai-json-schema":"",
    "node-inspector":"",
    "service-systemd":"",
    "nodemon":""
  },
  "nodemonConfig": {
    "events": {
     "restart":"npm run test && npm start",
     "start":"npm run test && npm start"
  }

Coté Front-dev#

Il existe encore plus de taskRunner et il est difficile de se faire une idée des avantages des uns et des autres. Faisons le point sur un des plus utilisé, webpack en ce moment et sur son articulation avec le framwork vue.js :

Webpack : [https://webpack.js.org/] est utilisé pour assembler votre application finale en utilisant une suite d'outils pour vérifier/transformer et enfin assembler les différents composants, qu'il s'agisse de HTML, de CSS ou bien entendu de javascript.
Vue-cli : Si votre application est basée sur vue, il est possible d'utiliser le module Vue-cli qui va orchestrer notre développement. Il fera appel à différents outils. Avec un template "webpack" vous aurez alors accès directement à toutes ces fonctionalitées "out of the box" (ce sont des exemples):
- Webpack : compiler les différentes briques de votre application
- Babel : Conversion ES6 => plain js
- code linting : Qualité du code avec JSlint
- préprocessing : Compilation SASS => CSS
- tests unitaires / fonctionnels : tests unitaires avec mocha + chai
- watching : surveiller les modification de fichier et recompiler
- hot-reload : recharger la page du navigateur en cas de recompilation

TODO : ? https://github.com/express-vue/express-vue ?

préprocesseurs
compilateurs, etc.