Ces astuces NPM feront de vous un pro

Après avoir utilisé NPM pendant près de 8 ans, j'ai appris des choses en cours de route que j'aurais aimé savoir quand j'ai commencé. Appelons-les des astuces, des choses qui ont considérablement amélioré ma façon de travailler avec NPM. Aujourd'hui, je veux partager mes 10 meilleurs trucs avec vous.

1. Gagnez du temps. ⏲ ​​Utilisez des raccourcis

C'est l'une des fonctionnalités les plus utiles mais pas si bien documentées. Un raccourci vers une commande peut sembler trivial, mais la vérité est que vous écrirez 30 à 60% de code en moins. Vous gagnerez du temps que vous pourrez consacrer à quelque chose de significatif, comme boire une tasse de café supplémentaire ☕️?

Au lieu de npm install

écrire .npm i

Au lieu de npm install--save

écrire .npm i -S

Au lieu de npm install--save-dev

écrire .npm i -D

Au lieu de npm install--global

écrire .npm i -G

? Raccourci bonus! Vous voulez impressionner vos collègues? ? Ça vient…

Au lieu de npm test

écrire .npm t

2. Installez plusieurs packages en une seule commande

Pourquoi écrire plusieurs lignes alors que vous pouvez en écrire une? ? Si vous connaissez vos paquets par cœur, l'option la plus rapide est de les installer tous dans une seule ligne, mais soyez prudent! Un package mal orthographié et la commande entière échouera. Si vous n'êtes pas sûr des noms, installez-les un par un.

npm i -S react redux react-redux 

3. Installer des packages à partir de différentes sources

Par défaut, lors de l'exécution npm-install, NPM installera la dernière version à partir du registre npm (//registry.npmjs.org)

Mais il y a plus! NPM peut également installer des packages à partir d'autres sources, comme une URL ou un fichier tarball.

Lorsque vous créez vos propres packages ou des pull-requests pour des packages existants, cette fonctionnalité est puissante. Par exemple, si vous avez votre propre fork de Redux, vous pouvez installer votre package directement depuis votre fork. (Changez usernamevotre nom d'utilisateur sur GitHub.)

npm i 

Mieux encore, si vous utilisez un référentiel GitHub, vous pouvez utiliser ce raccourci:

npm i username/redux

Il y a plus! Vous pouvez également installer un package à partir d'une branche spécifique. Utile lors du test d'une future version. Ajoutez simplement #le nom de la branche à la fin.

npm i username/redux#

? Raccourci bonus! N'utilisez-vous pas GitHub? Pas de soucis, il existe également des raccourcis pour BitBucket et GitLab :

npm i bitbucket:username/myrepositorynpm i gitlab:username/myrepository

4. Lier des packages

Parfois, vous souhaitez travailler sur un projet et développer ses packages en même temps. Valider et pousser votre package vers un référentiel distant pour chaque changement que vous souhaitez essayer est fastidieux! ? Au lieu de cela, vous pouvez utiliser une fonctionnalité appelée liaison de package .

La liaison de packages fonctionne en créant un lien symbolique dans votre dossier node_modules qui pointe vers le référentiel local de votre package. De cette façon, vous pouvez éditer les packages localement et les modifications seront instantanément disponibles dans le projet qui l'utilise.

Le moyen le plus simple de comprendre la liaison de paquets est de l'essayer!

Disons que nous avons un projet appelé myprojectet un package appelé mypackage. Nous voulons mypackageêtre une dépendance de myproject.

Allez dans le dossier mypackageet écrivez

npm link

Agréable! Maintenant, allez dans le dossier myprojectet écrivez

npm link mypackage

Terminé! Regardez de plus près la structure des dossiers

Comme vous pouvez le voir, myproject/node_modules/mypackageest maintenant un lien symbolique vers le dossier mypackage! Vous pouvez maintenant continuer à développer mypackageet toutes les modifications que vous apportez seront instantanément disponibles dans myproject.

5. La commande npx

Il existe de nombreux outils de script sur NPM que vous utiliserez probablement, mais qui ne feront pas partie de votre bundle d'exécution. Grunt, gulp, react-create-app, react-native-cli et mocha ne sont que quelques-uns.

Avant NPM 5.x, vous deviez installer ces outils soit en tant que packages globaux, soit en tant que devDependencies. Cela prenait du temps, non seulement pour installer mais aussi pour maintenir tous vos outils pour plusieurs projets. En outre, la plupart des outils que vous n'utiliserez qu'une ou deux fois.

Ici, le binaire NPX vient à la rescousse et nous fait gagner beaucoup de travail! Par exemple, pour démarrer un nouveau projet react, vous pouvez simplement écrire:

npx create-react-app my-new-project

La dernière version de create-react-app sera téléchargée et exécutée immédiatement. Fini l'installation et la maintenance d'outils sous forme de packages globaux

6. Surveillez et nettoyez votre projet

Il est important de comprendre ce qui se passe sous le capot lors de l'installation de packages afin de résoudre les problèmes et de réduire au maximum l'arborescence des dépendances et la taille finale du bundle.

Tout d'abord, nous avons besoin d'une bonne vue d'ensemble de l'arborescence des dépendances et des versions de package réellement installées. Utilisez la commande npm list. Ajoutez l'indicateur --depth=0pour répertorier uniquement les packages de niveau supérieur et ajoutez -gpour lister vos packages globaux.

npm listnpm list --depth=0 -g

NPM est efficace pour se maintenir et aplatir l'arbre de dépendances à la volée, mais c'est toujours une bonne habitude de dédupliquer votre projet avant de le publier. Cela pourrait supprimer quelques paquets pour vous.

npm dedupe

C'est aussi une excellente idée d'avoir un bon aperçu de vos paquets obsolètes et manquants. Il est difficile de ne pas aimer cette vue pour ses colonnes bien organisées et la palette de couleurs de Noël ??

npm outdated

Si vous obtenez beaucoup de lignes rouges, vous devez exécuter npm updatepour mettre à jour vos packages vers la dernière version possible en fonction de votre package.json, qui est également indiqué dans la colonne souhaitée

npm update

Génial! Maintenant, si vous exécutez à npm oudatednouveau, toutes les lignes rouges devraient avoir disparu.

Si vous utilisez le signe curseur ^devant vos versions dans package.json, les versions principales ne seront pas mises à jour (d'où les lignes jaunes). C'est bien, car il peut y avoir des modifications importantes lors de la mise à jour vers une nouvelle version majeure.

Si vous souhaitez toujours tout mettre à jour avec la dernière version, vous pouvez utiliser l'outil npm-update-all. C'est aussi simple que d'exécuter cette commande dans votre dossier de projet.

npx npm-update-all

Cool! Vous disposez maintenant de la dernière version de toutes vos dépendances. Votre package.json est également mis à jour. ⚠️ Soyez conscient des changements de rupture ⚠️

7. Accédez à la page d'accueil d'un package

Besoin de vérifier la documentation d'un package? Pourquoi passer au navigateur et commencer à rechercher sur Google alors que tout ce dont vous avez besoin est le terminal? ?

Ouvrez le référentiel d'un package dans le navigateur

npm repo

Ouvrez la page d'accueil

npm home

Ouvrez la documentation

npm docs

8. Utiliser des scripts NPM

J'adore les scripts npm! Au lieu d'utiliser des exécuteurs de tâches comme Gulp et Grunt pour automatiser les tâches répétitives, vous pouvez dans la plupart des cas utiliser des scripts npm à la place pour plusieurs raisons:

➕ Moins de dépendances de développement ou de dépendances globales à maintenir.

➕ Aucun nouvel outil pour les contributeurs et les membres de l'équipe à apprendre

➕ Moins de code et de configuration.

Tout d'abord, vous avez des scripts prédéfinis comme ceux start, install, test, prepublishqui ont des significations spéciales dans NPM. Vous pouvez lire comment ils peuvent être utilisés dans mon tutoriel précédent où nous construisons un package npm à partir de zéro.

Vous pouvez également créer vos propres scripts personnalisés. Voici un exemple de script qui formatera votre code dans le srcdossier avec ESLint:

package.json:

"scripts":{"test": "jest","format": "eslint src --fix"}

Vous pouvez maintenant exécuter npm run formatet ESLint fera son travail.

Vous pouvez faire beaucoup de choses avec les scripts npm comme exécuter des commandes shell et enchaîner des scripts les uns après les autres. Consultez npm-scripts pour une compréhension plus approfondie de cette fonctionnalité puissante.

9. Exécution de scripts NPM dans vsCode

Parfois, j'ai 30 scripts npm dans mon package.json (sans blague). ? Heureusement, si vous utilisez Visual Studio Code, vous pouvez lister tous vos npm-scripts dans l'explorateur et exécuter vos scripts en un clic! Assurez-vous que ce paramètre est activé:

npm.enableScriptExplorer: true

10. Définissez vos valeurs par défaut

Lors de la création d'un nouveau projet, vous exécuterez npm initet des questions sur votre projet vous seront posées. Pour gagner du temps, vous allez probablement écrire run npm init -ypour remplir le package.json avec les valeurs par défaut.

Mais quelles sont exactement vos valeurs par défaut? ? J'aime en configurer moi-même pour gagner du temps! ?

npm config set init.author.name "Carl-Johan (CJ) Kihl"

npm config set init.author.email "[email protected]"

Sommaire

Ce sont mes conseils pour NPM pour le moment! Si vous avez d'autres trucs et astuces que vous souhaitez partager, veuillez ajouter un commentaire ci-dessous! ?

? Raccourci bonus!

Imaginez que c'est vendredi soir et que vous êtes sur le point de finaliser un nouveau projet, mais que vous êtes bien trop fatigué pour écrire npm dedupe. ?

Pas de soucis! Enregistrez trois lettres en écrivant:

npm ddp

Merci pour la lecture.