Les bases
Intégration au workflow
Astuces et bonnes pratiques
Qu'est ce que c'est ?
Node Package Manager
Node Package Manager
Un gestionnaire de paquets Javascript
Les bases
Qu'est ce que c'est ?
Un outil qui permet d'automatiser le processus d'installation, mise à jour configuration et suppression d'un logiciel sur une plateforme spécifique et de manière fiable
Les bases
Pour quoi faire ?
- Gestion de dépendances
- Automatisation
- Maintenance
- Distribution
- Facilité de recherche
Les bases
Qu'est ce qu'un paquet ?
- Un versioning
- Des dépendances
- Des scripts
- Un ou plusieurs executables
Les bases
Une archive comprenant des fichiers et les informations associées
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
Bug
Feature
Breaking change
Les bases
SemVer
Un outil : http://semver.npmjs.com/
Les bases
Installation
Intégration au workflow
Usage courant
Gestion de dépendances
Intégration au workflow
Installation d'une dépendance
npm install <monpaquet>
npm install <monpaquet>
npm init
npm install --save <monpaquet>
npm install --save-dev <monpaquet>
Intégration au workflow
Si pas de version specifiée : latest
raccourcis : npm i -S / npm i -D
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é
Task Runner
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 ( ! )
- Hooks
- Paramètres d'environnement
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
Connaitre les taches disponibles : npm run
Lister les dépendances : npm ls --depth=0
Connaitre l'état de ses dépendances : npm outdated
Nettoyer les dépendances non utilisées : npm prune
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
paramètres de configuration dans package.json
publier un module
tag et version automatique
liens vers bugtracker et doc
figer les dépendances
recherche depuis la CLI
raccourcis et options
Questions ?
npm
By Maxime Warnier
npm
Npm : the why and how
- 2,123