Ovi NPM trikovi od vas će stvoriti profesionalca

Nakon korištenja NPM-a gotovo 8 godina, usput sam naučio stvari za koje bih volio da ih znam kad sam započeo. Nazovimo ih trikovima, stvarima koje su drastično poboljšale moj način rada s NPM-om. Danas želim podijeliti svojih 10 najboljih trikova s ​​vama.

1. Uštedite vrijeme. ⏲ ​​Koristite prečace

Ovo je jedna od najkorisnijih, ali ne tako dobro dokumentiranih značajki. Prečac za naredbu može se činiti trivijalnom stvari, ali istina je da ćete napisati 30-60% manje koda. Uštedjet ćete vrijeme koje možete potrošiti na nešto smisleno, poput ispijanja dodatne šalice kave ☕️?

Umjesto npm install

napiši .npm i

Umjesto npm install--save

napiši .npm i -S

Umjesto npm install--save-dev

napiši .npm i -D

Umjesto npm install--global

napiši .npm i -G

? Bonus prečac! Želite impresionirati svoje kolege? ? Evo ga…

Umjesto npm test

napiši .npm t

2. Instalirajte više paketa u jednu naredbu

Zašto pisati više redaka kad možete napisati jedan? ? Ako svoje pakete znate napamet, najbrža opcija je da ih sve instalirate u jednoslojnu podlogu, ali budite oprezni! Jedan pogrešno napisan paket i cijela naredba neće uspjeti. Ako niste sigurni oko imena, jednostavno ih instalirajte jedno po jedno.

npm i -S react redux react-redux 

3. Instalirajte pakete iz različitih izvora

Prema zadanim postavkama, prilikom pokretanja npm-install, NPM će instalirati najnoviju verziju iz npm-registra (//registry.npmjs.org)

Ali ima još toga! NPM može instalirati i pakete iz drugih izvora, poput URL-a ili tarball datoteke.

Kada izrađujete vlastite pakete ili zahtjeve za povlačenje za postojeće pakete, ova je značajka moćna. Na primjer, ako imate vlastitu vilicu Redux, svoj paket možete instalirati izravno iz vilice. (Promijenite usernamesvoje korisničko ime na GitHubu.)

npm i 

Još bolje, ako koristite spremište GitHub, možete upotrijebiti ovaj prečac:

npm i username/redux

Ima još! Također možete instalirati paket iz određene grane. Korisno tijekom testiranja budućeg izdanja. Samo dodajte #zajedno s nazivom podružnice na kraju.

npm i username/redux#

? Bonus prečac! Ne koristite GitHub? Bez brige, postoje i prečaci za BitBucket i GitLab :

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

4. Povezivanje paketa

Ponekad želite istodobno raditi na projektu i razvijati njegove pakete. Predavanje i guranje paketa u udaljeno spremište za svaku promjenu koju želite isprobati je zamorno! ? Umjesto toga možete koristiti značajku koja se naziva povezivanje paketa .

Povezivanje paketa funkcionira stvaranjem simboličke veze u vašoj mapi node_modules koja upućuje na lokalno spremište vašeg paketa. Na taj način možete lokalno uređivati ​​pakete i promjene će odmah biti dostupne u projektu pomoću njega.

Najlakši način za razumijevanje povezivanja paketa je isprobavanje!

Recimo da se zove projekt myprojecti zove paket mypackage. Želimo mypackagebiti ovisni od myproject.

Idite u mapu mypackagei napišite

npm link

Lijepo! Sada idite u mapu myprojecti napišite

npm link mypackage

Gotovo! Pobliže pogledajte strukturu mapa

Kao što vidite, myproject/node_modules/mypackagesada je simbolična veza do mape mypackage! Sada možete nastaviti razvijati se mypackagei sve promjene koje napravite bit će odmah dostupne u myproject.

5. Naredba npx

Postoji mnogo alata za skriptiranje na NPM-u koje ćete vjerojatno koristiti, ali neće biti dio vašeg runtime snopa. Grunt, gutljaj, reagiraj-stvori-aplikaciju, reagiraj-urodi-kli i moka samo su neki.

Prije NPM 5.x morali ste instalirati ove alate ili kao globalne pakete ili kao devDependencies. To je oduzimalo puno vremena, ne samo za instalaciju, već i za održavanje svih vaših alata za više projekata. Također, većinu alata ćete koristiti samo jednom ili dva puta.

Ovdje binarni NPX dolazi u pomoć i štedi nam puno posla! Na primjer, za pokretanje novog reakcijskog projekta možete jednostavno napisati:

npx create-react-app my-new-project

Najnovija verzija aplikacije create-response-app bit će preuzeta i izvršena odmah. Nema više instaliranja i održavanja alata kao globalnih paketa.

6. Nadgledajte i čistite svoj projekt

Važno je razumjeti što se događa ispod haube prilikom instaliranja paketa kako biste riješili probleme i kako bi stablo ovisnosti i konačna veličina snopa bili što manji.

Prije svega, potreban nam je dobar pregled stabla ovisnosti i koje su verzije paketa zapravo instalirane. Koristite naredbu npm list. Dodajte zastavicu --depth=0na popis samo vrhunskih paketa i dodajte -gna popis svojih globalnih paketa.

npm listnpm list --depth=0 -g

NPM se dobro održava i izravnava stablo ovisnosti u hodu, ali uvijek je dobra navika deduirati svoj projekt prije objavljivanja. Možda će ukloniti nekoliko paketa za vas.

npm dedupe

Također je dobra ideja dobiti dobar pregled zastarjelih i nestalih paketa. Teško je ne voljeti ovaj pogled zbog dobro organiziranih kolumni i božićne vibracije ??

npm outdated

Ako dobijete puno crvenih redaka, morate pokrenuti npm updateda biste svoje pakete ažurirali na najnoviju moguću verziju prema vašem package.json, što je također navedeno u željenom stupcu

npm update

Sjajno! Ako npm oudatedopet trčite , trebali bi nestati svi crveni redovi.

Ako koristite karetu ^ispred svojih verzija u paketu.json, glavne verzije neće biti ažurirane (dakle žuti redovi). Ovo je dobro, jer bi moglo doći do promjena u ažuriranju na novu glavnu verziju.

Ako i dalje želite sve ažurirati na najnoviju verziju, možete koristiti alat npm-update-all. Jednostavno je poput pokretanja ove naredbe u mapi vašeg projekta.

npx npm-update-all

Super! Sada ste dobili najnoviju verziju svih ovisnosti. Ažuriran je i vaš package.json. Budite svjesni kršenja promjena ⚠️

7. Idite na početnu stranicu za paket

Trebate provjeriti dokumentaciju za paket? Zašto se mučiti s prebacivanjem na preglednik i početi guglati kad je sve što trebate terminal? ?

Otvorite spremište za paket u pregledniku

npm repo

Otvorite početnu stranicu

npm home

Otvorite dokumentaciju

npm docs

8. Koristite NPM skripte

Obožavam npm-skripte! Umjesto da koristite pokretače zadataka poput Gulpa i Grunta za automatizaciju ponavljajućih zadataka, u većini slučajeva umjesto nekoliko razloga koristite npm-skripte:

To Manje zavisnosti o razvoju ili globalnih ovisnosti za održavanje.

➕ Nema novih alata za učenje suradnika i članova tima

Manje koda i konfiguracije.

Prije svega, imate unaprijed definirane start, install, test, prepublishtakve skripte koje imaju posebno značenje u NPM-u. O tome kako se oni mogu koristiti možete pročitati u mojem prethodnom vodiču gdje npm-paket gradimo od nule.

Također možete stvoriti vlastite prilagođene skripte. Evo primjera skripte koja će formatirati vaš kôd u srcmapi s ESLintom:

package.json:

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

Sada možete trčati npm run formati ESLint će odraditi svoj posao.

Puno stvari možete učiniti s npm-skriptama, poput izvođenja naredbi ljuske i ulančavanja skripti jedna za drugom. Pogledajte npm-skripte za dublje razumijevanje ove moćne značajke.

9. Pokretanje NPM skripti u vsCode

Ponekad u svom paketu.json imam 30 npm-skripti (bez šale). ? Srećom, ako koristite Visual Studio Code, možete sve svoje npm-skripte navesti u istraživaču i pokrenuti svoje skripte klikom na gumb! Svakako omogućite ovu postavku:

npm.enableScriptExplorer: true

10. Postavite zadane vrijednosti

Prilikom stvaranja novog projekta pokretat npm initćete se i postavljat će vam se pitanja o vašem projektu. Da biste uštedjeli vrijeme, vjerojatno ćete napisati run npm init -yza popunjavanje package.json sa zadanim vrijednostima.

Ali koje su točno vaše zadane vrijednosti? ? Neke od njih volim postaviti sam kako bih dalje štedio vrijeme! ?

konfiguracija npm postavljena init.author.name "Carl-Johan (CJ) Kihl"

konfiguracija npm postavljena init.author.email "[email protected]"

Sažetak

To su za sada bili moji savjeti za NPM! Ako imate još savjeta i trikova koje želite podijeliti, dodajte komentar u nastavku! ?

? Bonus prečac!

Zamislite da je petak navečer i spremate se finalizirati novi projekt, ali preumorni ste za pisanje npm dedupe. ?

Bez brige! Snimite tri slova tako što ćete napisati:

npm ddp

Hvala na čitanju.