Disse NPM-tricks vil gøre dig til et proffs

Efter at have brugt NPM i næsten 8 år har jeg lært ting undervejs, som jeg ville ønske jeg vidste, da jeg startede. Lad os kalde dem tricks, ting der drastisk forbedrede min måde at arbejde med NPM på. I dag vil jeg dele mine top 10 tricks med dig.

1. Spar tid. ⏲ ​​Brug genveje

Dette er en af ​​de mest nyttige, men ikke så veldokumenterede funktioner. En genvej til en kommando kan virke som en triviel ting, men sandheden er, at du vil skrive 30-60% mindre kode. Du sparer tid, du kan bruge på noget meningsfuldt, som at drikke en ekstra kop kaffe ☕️?

I stedet for npm install

skriv .npm i

I stedet for npm install--save

skriv .npm i -S

I stedet for npm install--save-dev

skriv .npm i -D

I stedet for npm install--global

skriv .npm i -G

? Bonusgenvej! Vil du imponere dine kolleger? ? Her kommer det…

I stedet for npm test

skriv .npm t

2. Installer flere pakker i en kommando

Hvorfor skrive flere linjer, når du kan skrive en? ? Hvis du kender dine pakker udenad, er den hurtigste mulighed at installere dem alle i en one-liner, men pas på! En forkert stavet pakke, og hele kommandoen mislykkes. Hvis du er i tvivl om navnene, skal du bare installere dem en efter en.

npm i -S react redux react-redux 

3. Installer pakker fra forskellige kilder

Når npm-installNPM kører , installeres som standard den nyeste version fra npm-registry (//registry.npmjs.org)

Men der er mere! NPM kan også installere pakker fra andre kilder, som en URL eller en tarball-fil.

Når du laver dine egne pakker eller pull-anmodninger om eksisterende pakker, er denne funktion stærk. For eksempel, hvis du har din egen gaffel med Redux, kan du installere din pakke direkte fra din gaffel. (Skift usernametil dit brugernavn på GitHub.)

npm i 

Endnu bedre, hvis du bruger et GitHub-arkiv, kan du bruge denne genvej:

npm i username/redux

Der er mere! Du kan også installere en pakke fra en bestemt gren. Nyttig, når du tester en fremtidig frigivelse. Tilføj bare #sammen med grennavnet i slutningen.

npm i username/redux#

? Bonusgenvej! Bruger du ikke GitHub? Ingen bekymringer, der er også genveje til BitBucket og GitLab :

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

4. Sammenkædning af pakker

Nogle gange vil du arbejde på et projekt og udvikle dets pakker på samme tid. At forpligte og skubbe din pakke til et eksternt lager for hver ændring, du vil prøve, er kedeligt! ? I stedet kan du bruge en funktion kaldet pakkelinkning .

Pakke forbinder værker ved at oprette et symlink i dine node_modules mappe, der peger på det lokale repository af din pakke. På denne måde kan du redigere pakker lokalt, og ændringerne vil straks være tilgængelige i projektet ved hjælp af det.

Den nemmeste måde at forstå pakkelinkning er at prøve det!

Lad os sige, at vi har et projekt kaldet myprojectog en pakke kaldet mypackage. Vi ønsker mypackageat være en afhængighed af myproject.

Gå til mappen mypackageog skriv

npm link

Pæn! Gå nu til mappen myprojectog skriv

npm link mypackage

Færdig! Se nærmere på mappestrukturen

Som du kan se, myproject/node_modules/mypackageer det nu et symlink til mappen mypackage! Nu kan du fortsætte med at udvikle dig, mypackageog alle ændringer, du foretager, vil straks være tilgængelige i myproject.

5. Npx-kommandoen

Der er mange scriptværktøjer på NPM derude, som du sandsynligvis vil bruge, men ikke vil være en del af din runtime-pakke. Grunt, gulp, react-create-app, react-native-cli og mokka er blot nogle få.

Før NPM 5.x var du nødt til at installere disse værktøjer enten som globale pakker eller som devDependencies. Dette var tidskrævende, ikke kun for at installere, men for at vedligeholde alle dine værktøjer til flere projekter. Også de fleste af de værktøjer, du kun bruger en eller to gange.

Her kommer den binære NPX til undsætning og sparer meget arbejde for os! For eksempel, for at starte et nyt reaktionsprojekt kan du blot skrive:

npx create-react-app my-new-project

Den seneste version af create-react-app downloades og udføres med det samme. Ikke mere installation og vedligeholdelse af værktøjer som globale pakker.

6. Overvåg og rens dit projekt

Det er vigtigt at forstå, hvad der sker under emhætten, når du installerer pakker for at løse problemer og gøre afhængighedstræet og den endelige bundtstørrelse så lille som muligt.

Først og fremmest har vi brug for et godt overblik over afhængighedstræet, og hvilke pakkeversioner der faktisk er installeret. Brug kommandoen npm list. Tilføj flagget --depth=0for kun at se pakker på øverste niveau, og tilføj -glisten over dine globale pakker.

npm listnpm list --depth=0 -g

NPM er god til at vedligeholde sig selv og flade afhængighedstræet i farten, men det er altid en god vane at dedupere dit projekt inden udgivelse. Det kan muligvis fjerne et par pakker til dig.

npm dedupe

Det er også en god idé at få et godt overblik over dine forældede og manglende pakker. Det er svært ikke at elske denne visning for sine velorganiserede søjler og julestemningens farveskema ??

npm outdated

Hvis du får mange røde rækker, skal du køre for npm updateat opdatere dine pakker til den senest mulige version i henhold til din pakke. Json, hvilket også er angivet i den ønskede kolonne

npm update

Store! Hvis du løber npm oudatedigen, skal alle de røde rækker være væk.

Hvis du bruger markøren ^foran dine versioner i package.json, opdateres de største versioner ikke (deraf de gule rækker). Dette er godt, fordi der muligvis bryder ændringer, der opdateres til en ny større version.

Hvis du stadig vil opdatere alt til den nyeste version, kan du bruge værktøjet npm-update-all. Det er lige så let som at køre denne kommando i din projektmappe.

npx npm-update-all

Fedt nok! Nu har du den nyeste version af alle dine afhængigheder. Din package.json er også opdateret. ⚠️ Vær opmærksom på at bryde ændringer ⚠️

7. Gå til startsiden for en pakke

Har du brug for at kontrollere dokumentationen for en pakke? Hvorfor gider at skifte til browseren og starte googling, når alt hvad du har brug for er terminalen? ?

Åbn lageret til en pakke i browseren

npm repo

Åbn startsiden

npm home

Åbn dokumentationen

npm docs

8. Brug NPM-scripts

Jeg elsker npm-scripts! I stedet for at bruge task-runners som Gulp og Grunt til automatisering af gentagne opgaver, kan du i de fleste tilfælde bruge npm-scripts i stedet for flere grunde:

Færre dev-afhængigheder eller globale afhængigheder at opretholde.

➕ Ingen nye værktøjer, som bidragsydere og teammedlemmer kan lære

Mindre kode og konfiguration.

Først og fremmest har du foruddefinerede scripts, start, install, test, prepublishder har specielle betydninger i NPM. Du kan læse om, hvordan de kan bruges i min tidligere tutorial, hvor vi bygger en npm-pakke fra bunden.

Du kan også oprette dine egne brugerdefinerede scripts. Her er et eksempel på et script, der vil formatere din kode i srcmappen med ESLint:

pakke.json:

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

Nu kan du køre, npm run formatog ESLint vil gøre sit job.

Du kan gøre mange ting med npm-scripts som at køre shell-kommandoer og kæde-scripts efter hinanden. Tjek npm-scripts for at få en dybere forståelse af denne kraftfulde funktion.

9. Kørsel af NPM-scripts i vsCode

Nogle gange har jeg 30 npm-scripts i min pakke. Json (ingen sjov). ? Heldigvis, hvis du bruger Visual Studio-kode, kan du liste alle dine npm-scripts i opdagelsesrejsende og køre dine scripts med et klik på en knap! Sørg for, at denne indstilling er aktiveret:

npm.enableScriptExplorer: true

10. Indstil dine standardværdier

Når du opretter et nyt projekt, kører du, npm initog du bliver stillet spørgsmål om dit projekt. For at spare tid skriver du sandsynligvis kør for npm init -yat udfylde package.json med standardværdier.

Men hvad er dine standardværdier præcist? ? Jeg kan godt lide at indstille nogle af disse selv for at spare tid videre! ?

npm konfigurationssæt init.author.name "Carl-Johan (CJ) Kihl"

npm konfigurationssæt init.author.email "[email protected]"

Resumé

Det var mine tip til NPM for nu! Hvis du har flere tip og tricks, som du vil dele, skal du tilføje en kommentar nedenfor! ?

? Bonusgenvej!

Forestil dig, at det er fredag ​​aften, og du er ved at færdiggøre et nyt projekt, men du er alt for træt til at skrive npm dedupe. ?

Ingen problemer! Gem tre bogstaver ved at skrive:

npm ddp

Tak fordi du læste.