Geekly articles weekly

13 astuces pour gagner du temps

Chaque jour, des millions de développeurs, lors de la création de leurs applications JavaScript, se tournent vers npm (ou vers Yarn). L'exécution de commandes comme npm init ou npx create-react-app est devenue un moyen familier de commencer à travailler sur presque tous les projets JavaScript. Il peut s'agir d'un serveur, d'un client ou même d'une application de bureau.

Mais l'utilitaire npm n'est pas seulement capable d'initialiser des projets ou d'installer des packages. L'auteur du matériel, dont nous publions la traduction aujourd'hui, veut parler de 13 astuces de npm qui vous permettront de tirer tout ce qui est possible de ce système. Ici, nous considérerons des techniques de différentes tailles - de l'utilisation de raccourcis à la personnalisation du comportement de npm init .



De nombreux programmeurs utilisent quotidiennement npm. Cela signifie qu'à long terme, même un petit gain de temps peut changer quelque chose pour le mieux. Ce matériel est principalement destiné aux développeurs débutants et aux développeurs de niveau intermédiaire. Cependant, même si vous êtes un professionnel, l'auteur du document espère que vous trouverez ici quelques choses intéressantes que vous n'avez jamais rencontrées auparavant.

Si vous n'êtes pas familier avec npm - sachez que le programme qui nous intéresse est installé avec Node.js. Si vous travaillez sous Windows, il est recommandé d'installer Git Bash afin de reproduire une partie de ce qui est discuté ici.

1. Options brèves pour l'enregistrement des commandes de base


Commençons par les bases. En passant un peu de temps à explorer les versions abrégées des commandes npm les plus courantes, vous vous épargnerez beaucoup de temps à l'avenir.

  • Installez les packages. Option normale: npm install . Raccourci: npm i .
  • Exécution de tests. Option normale: npm test . Raccourci: npm t .
  • Aidez-moi. Option courante: npm --help . Raccourci: npm -h .
  • Indicateur de paramètre global. Option courante: --global . Raccourci: -g .
  • Indicateur d'installation du package en tant que dépendance de développement. L'option habituelle est --save-dev . Raccourci: -D .
  • npm init paramètres d' npm init par défaut. L'option habituelle est npm init --yes ou npm init --force . Raccourci: npm init -y ou npm init -f .

Désormais, vous n'avez plus besoin d'utiliser l' --save ou -S pour enregistrer les packages. Les packages sont enregistrés par défaut. Et pour installer un paquet sans l'enregistrer, vous pouvez utiliser l'indicateur --no-save .

▍Options d'enregistrement courtes pour les commandes moins courantes


Voici quelques abréviations plus utiles, qui ne sont cependant pas utilisées aussi largement que celles que nous venons de passer en revue.

  • Enregistrement d'un package en tant que dépendance facultative. L'option habituelle: --save-optional . Raccourci: -O .
  • Enregistrement d'informations sur la version exacte du package. L'option habituelle est --save-exact . Raccourci: -E .

L'utilisation de la commande npm install avec le --save-bundle ou -B fait apparaître les entrées des bundles installés dans package.json , dans la section bundledDependencies . Ces packages seront fournis avec le projet lors de leur publication. Pour créer un fichier tarball contenant les fichiers de projet et les packages répertoriés dans bundledDependencies , vous pouvez utiliser la commande npm pack .

▍ Abréviation du répertoire racine


En règle générale, le symbole point ( . ) Est utilisé pour représenter le répertoire racine d'une application ou (selon le contexte) pour représenter un point d'entrée vers une application. Dans npm, c'est ce qui est défini comme la valeur de la propriété main dans le fichier package.json :

 {  "main": "index.js" }

Ce raccourci peut être utilisé, par exemple, avec des commandes comme npx create-react-app . Ainsi, au lieu d'exécuter cette commande sous la forme de npx create-react-app my-app (qui conduira à la création d'un nouveau dossier my-app ), vous pouvez exécuter cette commande comme ceci: npx create-react-app . (faites attention au point qui vient après la commande). Cela vous permettra de créer un projet de modèle d'application React dans le dossier dans lequel vous vous trouvez au moment où la commande est exécutée.

2. Définition des valeurs par défaut pour npm init


En exécutant constamment la commande npm init pour créer un nouveau projet, vous constaterez très probablement que vous entrez les mêmes données encore et encore en réponse aux questions du système. Par exemple - il est probable que vous êtes l'auteur de la plupart des projets que vous créez. Afin de gagner du temps lors de la saisie des mêmes données, vous pouvez définir vos propres valeurs par défaut pour les champs correspondants:

 npm config set init.author.name "Joe Bloggs" npm config set init.author.email "joebloggs@gmail.com" npm config set init.author.url  "joebloggs.com" npm config set init.license   "MIT"

Afin de vérifier l'exactitude de l'ajout de telles informations au système, entrez la commande d' npm config edit . Cela ouvrira le fichier de configuration dans l'éditeur système. Si vous souhaitez modifier les paramètres globaux de npm, utilisez la commande npm config edit -g .

Afin de revenir aux paramètres par défaut, vous pouvez utiliser le script suivant. Sa première ligne supprime les données de configuration du fichier et la seconde les remplit avec des valeurs par défaut.

 echo "" > $(npm config get userconfig) npm config edit

Le script ci-dessus réinitialise les valeurs par défaut pour l'utilisateur. Le script suivant réinitialise les valeurs par défaut globales:

 echo "" > $(npm config get globalconfig) npm config --global edit

3. Scripts multiplateformes


Tout code exécuté sur la ligne de commande peut rencontrer des problèmes de compatibilité. Cela est particulièrement vrai pour les incompatibilités entre les systèmes Windows et Unix (cela inclut Mac et Linux). Ce n'est pas un problème si vous et vous seul travaillez sur un certain projet. Mais dans de nombreux cas, la compatibilité des scripts multiplateforme est importante. Par exemple, travailler indépendamment du système d'exploitation est un énorme avantage pour tout projet open source, de formation ou de démonstration.

Heureusement, la résolution du problème de compatibilité des scripts n'est pas particulièrement difficile. Nous avons plusieurs options à notre disposition. Cependant, ici, je voudrais parler de l'un d'eux, de l'utilisation dont j'ai obtenu les meilleurs résultats. Il s'agit d'un package cross-env . Il doit être installé en tant que dépendance de développement à l'aide de la commande npm i -D cross-env . Ensuite, vous devez mettre cross-env devant chaque variable d'environnement. Par exemple, cela pourrait ressembler à ceci:

 {  "scripts": {    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js" }

J'ai trouvé que le package cross-env est l'outil le plus pratique pour atteindre la compatibilité des scripts multiplateforme. Mais il vous sera utile de jeter un œil aux deux outils populaires suivants qui peuvent vous aider à résoudre ce problème:

  • Forfait Rimraf . Il, pour exécuter des scripts multiplateformes, peut être installé globalement.
  • Package ShellJS . Il s'agit d'une implémentation Node.js portable du shell de commande Unix.

4. Exécution parallèle de scripts


Afin d'organiser l'exécution séquentielle des commandes dans le shell Linux, la construction && est utilisée. Qu'en est-il de l'exécution de scripts parallèles? Pour ce faire, vous pouvez choisir le package npm approprié. Les packages les plus populaires de ce type sont simultanément et npm-run-all . Ici, nous montrons l'utilisation du package simultanément.

Tout d'abord, le package sélectionné doit être installé en tant que dépendance de développement: npm i -D concurrently . Ensuite, dans package.json vous pouvez utiliser une construction de la forme suivante:

 {  "start": "concurrently \"command1 arg\" \"command2 arg\"" }

5. Exécution de scripts situés dans divers répertoires


Parfois, vous rencontrez des applications qui ont plusieurs fichiers package.json situés dans différents répertoires. Il serait pratique, par exemple, d'exécuter des scripts qui y sont déclarés, se trouvant dans le répertoire racine du projet. C'est bien mieux que de devoir voyager dans différents dossiers chaque fois que vous devez exécuter un script. Pour ce faire, vous pouvez utiliser les deux approches suivantes.

Pour commencer, vous pouvez utiliser la cd pour naviguer automatiquement vers le répertoire souhaité. Cela peut ressembler à ceci:

 cd folder && npm start && cd ..

Mais ce problème peut être résolu d'une manière plus intéressante. Il consiste à utiliser l'indicateur --prefix , avec lequel vous pouvez spécifier le chemin:

 npm start --prefix path/to/your/folder

Voici un exemple d'application de cette solution à partir d'une application réelle. Ici, nous devons exécuter npm start pour les parties client et serveur du projet. Leur code, respectivement, se trouve dans les dossiers client et server .

 "start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"",

6. Retarder le lancement du script jusqu'à ce qu'une ressource soit disponible


Lors du développement d'applications à pile complète, il est souvent nécessaire d'exécuter les parties client et serveur de l'application. Le package d' attente vous permet de synchroniser l'exécution de certains processus. Dans notre cas, il est nécessaire qu'avant de démarrer la partie client de l'application, un certain port soit disponible.

Par exemple, il existe un script de développement utilisé dans une application Electron dont l'interface est écrite à l'aide de React. Le script, en utilisant concurrently , exécute la couche de présentation de l'application et la fenêtre Electron en parallèle. Mais en utilisant l' wait-on vous ne pouvez ouvrir la fenêtre Electron que lorsque la couche de présentation React est prête à l'emploi et est disponible sur http://localhost:3000 . Voici à quoi ressemble l' wait-on :

 "dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",

De plus, le comportement standard des projets React consiste à ouvrir automatiquement une fenêtre de navigateur. Si vous utilisez React avec Electron, cela n'est pas nécessaire. Ceci peut être BROWSER=none à l'aide de la variable d'environnement BROWSER=none , avant laquelle, pour des raisons de compatibilité multiplateforme de la solution, il existe la commande cross-env .

7. Liste et utilisation des scripts disponibles


Afin de lister les scripts disponibles dans package.json , allez simplement dans le répertoire racine du projet et exécutez la commande npm run dans le terminal.

Mais il existe un moyen encore plus pratique de répertorier les scripts. Lorsque vous l'utilisez, le script souhaité peut être immédiatement sélectionné dans la liste et exécuté. Afin d'utiliser cette façon de travailler avec les scripts, nous devons installer globalement le ntl (Npm Task List):

 npm i -g ntl

Ensuite, dans le dossier du projet, vous devez exécuter la commande ntl . Il affichera une liste des scripts disponibles et vous donnera la possibilité de sélectionner le script à exécuter. Voici à quoi ça ressemble.


Utilisation de la commande ntl

Cette fonctionnalité peut être très utile si vous ne savez pas exactement quels sont les scripts du projet. C'est également bon dans les cas où le programmeur veut remplacer l'entrée d'une commande longue pour exécuter un script par l'entrée d'une commande courte et la pression rapide de quelques touches supplémentaires sur le clavier.

8. Exécution de pré-scripts et post-scripts


Vous connaissez peut-être les scripts de postbuild prebuild et de prebuild - postbuild qui vous permettent d'exécuter du code avant et après l'exécution du script de build . Ces pré- et post-scripts peuvent être définis pour tout autre script. Y compris ceux dont les descriptions sont ajoutées à p ackage.json par le programmeur.

Cela vous permet non seulement de rendre le code plus propre, mais aide également à exécuter les pré et post-scripts de manière isolée.

9. Contrôle de la version de l'application


Au lieu de modifier manuellement la version de l'application, le programmeur peut utiliser des commandes spéciales npm . Afin d'augmenter la partie correspondante du numéro de version de l'application, vous pouvez utiliser la commande npm version suivie de major , minor ou patch :

 // 1.0.0 npm version patch // 1.0.1 npm version minor // 1.1.0 npm version major // 2.0.0

Selon la fréquence à laquelle vous mettez à jour votre application, vous pouvez gagner du temps en augmentant automatiquement le numéro de version à chaque fois que vous déployez une nouvelle version de l'application. Par exemple, comme ceci:

 {  "predeploy": "npm version patch" }

10. Modification de package.json à partir de la ligne de commande


Le fichier package.json est un fichier json standard, il peut donc être modifié directement à partir de la ligne de commande à l'aide de l'utilitaire json . Cela ouvre de nouvelles possibilités dans les situations où vous devez modifier package.json , vous permettant de créer vos propres versions raccourcies de commandes. Installez le package json globalement:

 npm install -g json

L'utilitaire json peut ensuite être utilisé pour modifier rapidement le fichier à l'aide du -I . Par exemple, pour ajouter un nouveau script foo avec la bar valeur au fichier, vous pouvez utiliser la commande suivante:

 json -I -f package.json -e 'this.scripts.foo="bar"'

Dans la section suivante, vous verrez un exemple plus pratique d'utilisation de l'utilitaire json .

11. Automatisation de la configuration et de l'ouverture du référentiel


S'il existe une entrée "repository" dans votre fichier package.json , cela signifie que vous pouvez ouvrir la page du référentiel dans le navigateur utilisé par défaut par le système. Pour ce faire, utilisez la commande npm repo .

Si votre projet est déjà connecté à un référentiel distant et que l'utilitaire de ligne de commande git installé, cela signifie que vous pouvez trouver l'adresse de votre référentiel à l'aide de la commande suivante:

 git config --get remote.origin.url

Mais ce n'est pas tout. Si, conformément à l'astuce précédente, vous avez installé l'utilitaire json , vous pouvez utiliser le script suivant pour ajouter automatiquement les informations de référentiel correctes à package.json :

 json -I -f package.json -e "this.repository=\"$(git config --get remote.origin.url)\""

12. Création de votre propre script pour contrôler la commande npm init


Parlons maintenant de la résolution d'une tâche plus importante. À savoir, nous allons développer notre propre script qui contrôle le fonctionnement de la commande npm init , qui accepte l'URL du référentiel GitHub et lui envoie automatiquement le premier commit. Ici, nous parlons de la création de tels scripts. Et dans la section suivante, qui sera notre dernier conseil, nous parlerons de travailler avec git .

Vous pouvez personnaliser le comportement de la commande npm init à l'aide du .npm-init.js . Créez un tel fichier dans le répertoire personnel de l'utilisateur actuel (sous Windows, il s'agit généralement de C:/Users/<username> , et sur Mac, /Users/<username> ). Après cela, exécutez la commande suivante qui indique à npm où se trouve exactement ce fichier:

 npm config set init-module ~\.npm-init.js

Avant l'intégration avec git , regardons un exemple simple du .npm-init.js , qui reproduit les questions que le système pose à l'utilisateur lors de l'utilisation de la commande npm init sans paramètres supplémentaires:

 module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),   main: prompt('entry point', 'index.js'),  repository: prompt('git repository', ''),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC') }

Chaque question est basée sur le modèle suivant:

 nameInPackage: prompt('nameInPrompt', 'defaultValue')

Afin d'indiquer une certaine valeur et de ne pas poser de question à l'utilisateur, supprimez simplement la méthode d' prompt .

Si vous souhaitez revenir aux paramètres d' npm init standard, supprimez simplement le .npm-init.js .

13. Envoi du premier commit au référentiel GitHub à l'aide de npm init


Afin d'exécuter des commandes git dans le .npm-init.js nous devons trouver un moyen de travailler avec la ligne de commande. Vous pouvez utiliser le module child_process pour child_process . Nous le connectons en haut du fichier, et comme nous n'avons besoin que de la fonction execSync , nous l'importons uniquement, en utilisant la déstructuration:

 const { execSync } = require('child_process');

De plus, nous allons créer une fonction d'aide qui affiche les résultats de notre fonction dans la console:

 function run(func) {  console.log(execSync(func).toString()) }

Et enfin, créons le bloc d'invite approprié pour gérer l'URL du référentiel GitHub. Si le script a l'URL, nous créerons le fichier README.md et enverrons le premier commit au référentiel.

Ainsi, l'un des éléments de l'objet .npm-init.js doit être le code suivant:

 repository: prompt('github repository url', '', function (url) {  if (url) {    run('touch README.md');    run('git init');    run('git add README.md');    run('git commit -m "first commit"');    run(`git remote add origin ${url}`);    run('git push -u origin master');   return url; })

Voici comment le code complet du fichier .npm-init.js doit se .npm-init.js de cet ajout:

 const { execSync } = require('child_process'); function run(func) {  console.log(execSync(func).toString()) } module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),  main: prompt('entry point', 'index.js'),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC'),  repository: prompt('github repository url', '', function (url) {    if (url) {      run('touch README.md');      run('git init');      run('git add README.md');      run('git commit -m "first commit"');      run(`git remote add origin ${url}`);      run('git push -u origin master');       return url;  }), }

Voici à quoi ressemble le fichier package.json que le système crée à l'aide de ce .npm-init.js :

 {  "name": "Custom npm init",  "version": "0.0.0",  "decription": "A test project, to demonstrate a custom npm init script.",  "main": "index.js",  "keywords": [],  "author": "Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)",  "license": "ISC",  "repository": {    "type": "git",    "url": "git+https://github.com/JoeBloggs/custom.git"  },  "bugs": {    "url": "https://github.com/JoeBloggs/custom/issues"  },  "homepage": "https://github.com/JoeBloggs/custom#readme" }

En mettant en place le processus d'initialisation de nouveaux projets, vous pouvez aller plus loin. Par exemple, pour vous assurer que lors de la création d'un projet, un nouveau référentiel sera créé pour celui-ci.

Résumé


J'espère que ce matériel vous a aidé à voir ce que vous pouvez réaliser avec npm. Je veux croire que vous avez trouvé quelque chose ici qui vous permettra de travailler de manière plus productive - que nous parlions de l'utilisation de versions raccourcies de commandes, de scripts de package.json ou de la configuration de npm init en fonction de vos besoins.

Chers lecteurs! Automatisez-vous le travail avec npm?

Source: https://habr.com/ru/post/fr458504/

More articles:


All Articles