Frontend Development Workflow Automation avec des scripts NPM

Utilisez des scripts NPM pour activer les workflows d'automatisation du développement frontal sans outils complexes. 1. Classifier et le nommer uniformément par type de tâche, tel que start, dev, build, peluche, test, déploiement, etc., pour améliorer la maintenabilité; 2. Utiliser && ou npm-run-all pour combiner des commandes pour réaliser le processus en série ou en parallèle, tels que nettoyer puis construire ou tester en même temps; 3. Utiliser - Paramètres ou trans-en-ENV pour définir des variables d'environnement et prendre en charge le multi-ENV à configurer; 4. Le déploiement peut être achevé en appelant GH-Pages ou Shell Scripts via des scripts pour simplifier le processus de version.

L'automatisation du flux de travail de développement frontal ne nécessite pas réellement d'introduire un tas d'outils de construction ou de configurations complexes depuis le début. En utilisant bien les scripts NPM, vous pouvez automatiser les tâches les plus courantes, telles que l'inspection du code, la compilation, l'emballage, les tests, le déploiement, etc. Il est simple, léger et presque tous les projets ont Node.js et NPM installés, et il fonctionne hors de la boîte.

Vous trouverez ci-dessous quelques conseils et suggestions d'utilisation des scripts NPM couramment utilisés dans le développement réel pour vous aider à améliorer l'efficacité tout en maintenant la structure du projet.

1. Classification de tâches de base et spécifications de dénomination

L'un des grands avantages des scripts NPM est que les processus complexes peuvent être achevés grâce à des combinaisons de commandes simples. Il est recommandé de classer les tâches communes d'abord et d'unifier les méthodes de dénomination pour faciliter la recherche et la maintenance.

• Lié au développement : start , dev , serve
• CONSTRUCTION CONNEXES : build , compile
• Test lié : test , lint , format
• Connexes : deploy , publish

Par exemple:

 "scripts": {
  "start": "node app.js",
  "Dev": "webpack-dev-server - Mode Development",
  "build": "webpack - mode mode",
  "peluche": "Eslint.",
  "Format": "plus joli --écriture.",
  "Tester": "plaisante"
}

De cette façon, les membres de l'équipe peuvent savoir comment exécuter les tâches correspondantes en un coup d'œil, et cela facilite également l'intégration ultérieure des processus CI / CD.

2. Combinant plusieurs commandes pour exécuter le processus

Parfois, un processus complet nécessite l'exécution de plusieurs commandes, qui peuvent être connectées avec && ou || ou plusieurs scripts peuvent être exécutés en parallèle ou en séquence à l'aide d'outils comme npm-run-all .

Par exemple:

 "scripts": {
  "Clean": "Rimraf Dist",
  "build": "webpack - mode mode",
  "Build: Clean": "NPM Run Clean && npm run build"
}

Le script build:clean ci-dessus signifie "nettoyez d'abord le répertoire DIST, puis exécutez la construction."

Si vous souhaitez exécuter plusieurs tâches en parallèle (comme l'exécution de peluches et tester en même temps):

 "scripts": {
  "peluche": "Eslint.",
  "Tester": "plaisante",
  "Vérifier": "NPM Run Lint && NPM Run Test"
}

Vous pouvez également utiliser npm-run-all --parallel lint test pour implémenter le parallélisme, mais vous devez d'abord installer npm-run-all .

3. Passer les paramètres utilisant des variables d'environnement

Parfois, vous souhaitez exécuter différentes logiques selon différents environnements, tels que le développement, les tests et la production. Les scripts NPM prennent en charge les paramètres de passage -- et peuvent également définir des variables d'environnement en combinaison avec des fichiers .env .

Par exemple:

 "scripts": {
  "démarrer": "webpack-dev-server",
  "Démarrer: prod": "webpack-dev-server - Production en mode"
}

Vous pouvez également définir les variables d' cross-env avec des variables d'environnement:

 "scripts": {
  "build: staging": "cross-env node_env = staging webpack - mode mise en scène",
  "build: prod": "cross-env node_env = production webpack - mode mode"
}

De cette façon, les fichiers de configuration ou la logique de comportement correspondants peuvent être chargés en fonction de différents environnements.

4. Le déploiement automatisé n'est pas difficile

Le site Web de déploiement peut être écrit comme un script NPM, en particulier un site statique, comme le téléchargement sur les pages GitHub, Netlify, Vercel, etc.

Par exemple, déploiez-vous sur les pages GitHub:

 "scripts": {
  "Deploy": "gh-pages -d dist"
}

Installez simplement gh-pages et assurez-vous que votre répertoire de sortie de build est dist .

S'il est téléchargé sur le serveur, vous pouvez également écrire un script shell pour effectuer l'opération SCP / RSYNC, puis le mettre dans le script:

 "scripts": {
  "Deploy": "bash deploy.sh"
}

Tant que le script a des autorisations d'exécution, NPM peut être appelé normalement.

Fondamentalement, c'est tout. La puissance des scripts NPM est sa flexibilité et sa facilité d'utilisation, et ne nécessite pas de configurations compliquées de WebPack, Gulp ou Vite depuis le début. De nombreuses tâches courantes peuvent être effectuées dans des scripts simples. La clé consiste à clarifier le processus, puis à l'optimiser progressivement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!