Qu'est ce que c'est ?

Les bases

Qu'est ce que c'est ?

Les bases

Pour quoi faire ?

• Gestion de dépendances
• Automatisation
• Maintenance
• Distribution
• Facilité de recherche

Les bases

Qu'est ce qu'un paquet ?

Les bases

package.json

Au minimum 2 champs : nom et version

Créé à l'aide de la commande npm init

Contient les meta-données d'un paquet

Les bases

SemVer

MAJEUR.MINEUR.CORRECTIF

Semantic Versioning

Une convention

Bug

Feature

Breaking change

Les bases

SemVer

Un outil : http://semver.npmjs.com/

Les bases

Usage courant

Gestion de dépendances

Intégration au workflow

Installation d'une dépendance

Intégration au workflow

Intégration au workflow

{
  "name": "myBigProject",
  "version": "1.1.1",

  "devDependencies": {
    "archiver": "^0.21.0",
    "babel": "^6.3.26",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-plugin-syntax-jsx": "^6.3.13",
    "babel-plugin-transform-react-constant-elements": "^6.4.0",
    "babel-plugin-transform-react-inline-elements": "^6.4.0",
    "babel-plugin-transform-react-jsx": "^6.4.0",
    "babel-preset-es2015": "^6.3.13",
    "body-parser": "^1.14.2",
    "clor": "^2.0.2",
    "core-js": "^2.0.3",
    "css-loader": "^0.23.1",
    "cssnext-loader": "^1.0.1",
    "eslint": "^1.10.3",
    "eslint-plugin-react": "^3.16.1",
    "express": "^5.0.0-alpha.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "glob": "^6.0.4",
    "html-loader": "^0.4.0",
    "html-webpack-plugin": "^2.7.2",
    "http-proxy-middleware": "^0.9.1",
    "inquirer": "^0.11.4",
    "minimist": "^1.2.0",
    "progress": "^1.1.8",
    "rimraf": "^2.5.1",
    "scp2": "^0.2.2",
    "sloc": "^0.1.9",
    "style-loader": "^0.13.0",
    "uglify-js": "^2.6.1",
    "url-loader": "^0.5.7",
    "webpack": "^1",
    "webpack-dev-server": "^1",
    "worker-loader": "^0.7.0"
  },
  "dependencies": {
    "angular": "^1.5.0",
    "angular-elastic": "^2.5.1",
    "angular-modal-service": "^0.6.9",
    "angular-sanitize": "^1.5.0",
    "angular-ui-router": "0.2.18",
    "angularjs-toaster": "^1.0.0",
    "eventemitter-light": "^0.2.2",
    "font-awesome": "maxdow/Font-Awesome#patch-1",
    "immutable": "^3.7.6",
    "moment": "^2.11.1",
    "normalize.css": "^3.0.3",
    "react": "^0.14.7",
    "react-addons-pure-render-mixin": "^0.14.7",
    "react-dom": "^0.14.7",
    "sortablejs": "^1.4.2",
    "stompjs": "^2.3.3",
    "ui-router-extras": "^0.1.0"
  }
}

• ( git clone [url du projet] )
• npm install
• (npm run) 

Intégration au workflow

Récupération d'un projet

Intégration au workflow

Usage avancé

Intégration au workflow

Les scripts

Intégration au workflow

Les scripts

{
  "name": "monprojet",
  "version" : "0.0.1",
  "devDependencies": {
    "jshint": "2.9.x"
  },
  "scripts": {
    "lint": "jshint **.js"
  }
}

package.json

npm run lint

Intégration au workflow

Les scripts

• Simple à utiliser
• Point d'entrée unique
• npm résout le path
• Combinaison de commandes
• Indépendant de l'OS ( ! ) 

Intégration au workflow

"scripts" : {
   "clean": "rimraf public/*",

   "build-dev" : "npm run clean && webpack --config webpack.dev.js",
   "build-prod": "npm run clean && webpack --config webpack.prod.js --optimize-minimize",
   
   "dev"       : "npm run build-dev && webpack-dev-server --hot --content-base public/ --history-api-fallback",

   "predeploy" : "npm run build-prod",
   "deploy"    : "npm run build-prod && node scripts/deploy.js"
 
}

Commandes disponibles : &&  ||  |  &  >

Intégration au workflow

Intégration au workflow

  "scripts": {
    "clean": "rimraf ./public/* && rimraf ./dist/* && rimraf ./release",
    "test" : "node tests/testCLI.js",

    "build": "npm run clean && node scripts/build.js",
    "dev"  : "npm run build -- dev --cible=vigidevlocalproxy && node serveur/mockServer --dev --cible=vigidevlocalproxy",

    "packaging": "node scripts/packaging.js",
    "predeploy": "npm run packaging",
    "deploy"   : "node scripts/deploiement.js",

    "release-dev"   : "npm run build -- prod --cible=vigidev    && npm run deploy -- --dev",
    "release-devbis": "npm run build -- prod --cible=vigidevbis && npm run deploy -- --devbis",
    "release-int"   : "npm run build -- prod --cible=vigiint    && npm run deploy -- --int",
    "release-prod"  : "npm run build -- prod --cible=vigiprod   && npm run deploy -- --prod",

    "graph": "webpack --config ./configuration/webpack.dev.config.js --profile --json > stats.json && echo 'Go to http://webpack.github.io/analyse/#modules'",
    "lint": "eslint ./sources/**/*.js ./sources/**/*.jsx",
    "stat": "sloc sources  --format cli-table --exclude .css"
  }

Astuces et bonnes pratiques

Astuces et bonnes pratiques

Pour assurer une bonne portabilité

Préférer des modules aux commandes shell

Eviter les guillemets simples et utiliser l'echappement

Remplacer rm -rf public/* par rimraf public/*

Remplacer ' par \"

Faire attention à la gestion des chemins

Utiliser path et des scripts indépendants

Eviter les variables d'environnement

Utiliser des scripts et les arguments

Ce qu'il faut retenir :

Un fichier package.json comme point d'entrée de l'application

la gestion des dépendances peut et doit être automatisée

99% des taches ne nécessitent pas d'outil supplémentaire

Ce qu'il reste :

npm 3