Utilisations pratiques des scripts NPM au-delà de Build et Start

Les développeurs frontend commencent souvent avec de simples commandes npm run build ou npm run start, mais les scripts NPM peuvent faire bien plus pour votre flux de travail. Vous pouvez exploiter les scripts NPM pour automatiser les tâches répétitives, rationaliser le développement et rendre vos projets plus maintenables.

Que sont les scripts NPM et pourquoi les utiliser ?

Les scripts NPM sont des commandes personnalisées définies dans votre fichier package.json sous la section "scripts". Ils fournissent un moyen simple d’exécuter des outils en ligne de commande et d’automatiser des tâches sans installer de packages globaux ou d’outils de build complexes.

{
  "name": "my-project",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

Les principaux avantages des scripts NPM par rapport aux exécuteurs de tâches comme Gulp ou Grunt :

• Configuration zéro : Utilisez-les directement avec n’importe quel projet npm
• Accès direct aux outils CLI : Pas de couches d’abstraction ou de plugins à gérer
• Suivi des dépendances : Les outils sont installés comme dépendances du projet, garantissant que tous utilisent les mêmes versions
• Flux de travail simplifié : Pas besoin d’apprendre la syntaxe d’un autre outil

10 scripts NPM pratiques pour les développeurs frontend

1. Linting et formatage du code

Un style de code cohérent améliore la lisibilité et réduit les erreurs. Ajoutez ces scripts pour automatiquement linter et formater votre code :

"scripts": {
  "lint": "eslint src/**/*.js",
  "lint:fix": "eslint src/**/*.js --fix",
  "format": "prettier --write \"src/**/*.{js,jsx,css,scss,json}\""
}

Exécutez npm run lint pour vérifier les problèmes ou npm run format pour formater automatiquement votre code.

2. Nettoyage des répertoires de build

Avant de créer un nouveau build, nettoyez les artefacts de build précédents :

"scripts": {
  "clean": "rimraf dist",
  "prebuild": "npm run clean",
  "build": "webpack"
}

Le script prebuild s’exécute automatiquement avant build, garantissant une base propre à chaque fois.

3. Exécution de tests avec différentes configurations

Créez divers scripts de test pour différents scénarios :

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage",
  "test:e2e": "cypress run"
}

4. Gestion des variables d’environnement

Configurez différents environnements pour le développement, les tests et la production :

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack serve",
  "build:dev": "cross-env NODE_ENV=development webpack",
  "build:prod": "cross-env NODE_ENV=production webpack"
}

Le package cross-env garantit que ces scripts fonctionnent sur différents systèmes d’exploitation.

5. Surveillance des changements

Reconstruction automatique lorsque les fichiers changent :

"scripts": {
  "watch:css": "sass --watch src/styles:dist/styles",
  "watch:js": "webpack --watch",
  "watch": "npm-run-all --parallel watch:*"
}

Le package npm-run-all permet d’exécuter plusieurs scripts en parallèle.

6. Synchronisation des fichiers d’environnement

Créez un script pour copier les fichiers de modèle d’environnement :

"scripts": {
  "sync-env": "node -e \"require('fs').copyFileSync('.env.example', '.env', fs.constants.COPYFILE_EXCL)\"",
  "postinstall": "npm run sync-env"
}

Le hook postinstall s’exécute automatiquement après npm install, garantissant que les nouveaux membres de l’équipe obtiennent le fichier d’environnement.

7. Validation des dépendances de packages

Vérifiez les dépendances obsolètes, dupliquées ou vulnérables :

"scripts": {
  "check:deps": "npm outdated",
  "check:security": "npm audit",
  "check:duplicates": "npx depcheck"
}

8. Génération de documentation

Générez automatiquement la documentation à partir des commentaires du code :

"scripts": {
  "docs": "jsdoc -c jsdoc.json",
  "predeploy": "npm run docs"
}

9. Flux de travail de release personnalisés

Automatisez le versioning et les releases :

"scripts": {
  "version:patch": "npm version patch",
  "version:minor": "npm version minor",
  "version:major": "npm version major",
  "release": "npm run build && npm publish"
}

10. Optimisation des assets

Compressez les images et autres assets :

"scripts": {
  "optimize:images": "imagemin src/images/* --out-dir=dist/images",
  "prebuild": "npm run clean && npm run optimize:images"
}

Techniques avancées de scripts NPM

Enchaînement de scripts avec les hooks Pre/Post

NPM exécute automatiquement les scripts préfixés par “pre” ou “post” avant ou après le script principal :

"scripts": {
  "prebuild": "npm run lint",
  "build": "webpack",
  "postbuild": "npm run test"
}

Lorsque vous exécutez npm run build, il exécute automatiquement prebuild, puis build, puis postbuild.

Passage d’arguments aux scripts

Passez des arguments à vos scripts en utilisant -- :

npm run lint -- --fix

Ceci passe le flag --fix à la commande de linting actuelle.

Utilisation des variables d’environnement dans les scripts

Accédez aux données du package.json via les variables d’environnement :

"scripts": {
  "echo-version": "echo $npm_package_version"
}

Lorsque vous exécutez npm run echo-version, il affiche la version de votre package.

Compatibilité multiplateforme

Assurez-vous que vos scripts fonctionnent sur tous les systèmes d’exploitation avec ces outils :

1. rimraf - Alternative multiplateforme à rm -rf
2. cross-env - Définir des variables d’environnement sur toutes les plateformes
3. npm-run-all - Exécuter plusieurs scripts en séquence ou en parallèle

Exemple de scripts multiplateformes :

"scripts": {
  "clean": "rimraf dist",
  "copy": "copyfiles -u 1 src/**/*.html dist",
  "dev": "cross-env NODE_ENV=development npm-run-all clean copy --parallel watch:*"
}

Exemple concret : Flux de travail frontend complet

Voici un ensemble complet de scripts pour un projet frontend moderne :

{
  "scripts": {
    "clean": "rimraf dist",
    "lint:js": "eslint src/**/*.js --fix",
    "lint:css": "stylelint src/**/*.scss --fix",
    "lint": "npm-run-all --parallel lint:*",
    "test": "jest",
    "test:watch": "jest --watch",
    "format": "prettier --write \"src/**/*.{js,jsx,scss,json,md}\"",
    "validate": "npm-run-all --parallel lint test",
    "build:css": "sass src/styles:dist/styles --style compressed",
    "build:js": "webpack --mode production",
    "build": "npm-run-all clean lint --parallel build:*",
    "watch:css": "sass --watch src/styles:dist/styles",
    "watch:js": "webpack --watch",
    "serve": "browser-sync start --server dist --files dist",
    "dev": "npm-run-all clean --parallel watch:* serve",
    "prepublish": "npm run build",
    "version": "npm run format && git add -A src",
    "postversion": "git push && git push --tags"
  }
}

Cette configuration fournit :

• Vérifications de qualité du code avec linting et tests
• Formatage automatisé
• Builds optimisés pour la production
• Serveur de développement avec rechargement à chaud
• Flux de travail de gestion des versions et de publication

Conclusion

En implémentant ces scripts NPM pratiques, vous rationaliserez votre processus de développement, améliorerez la qualité du code et rendrez vos projets plus maintenables. Commencez petit en ajoutant des scripts pour les tâches que vous effectuez le plus fréquemment, puis étendez progressivement votre boîte à outils d’automatisation.

FAQ