De Carl-Johan Kihl

După ce am folosit NPM timp de aproape 8 ani, am învățat pe parcurs lucruri pe care mi-aș dori să le știu când am început. Să le numim trucuri, lucruri care mi-au îmbunătățit drastic modul de lucru cu NPM. Astăzi vreau să vă împărtășesc primele 10 trucuri.

1. Economisiți timp. ⏲ ​​Utilizați comenzile rapide

Aceasta este una dintre cele mai utile, dar nu atât de bine documentate caracteristici. O comandă rapidă pentru o comandă ar putea părea un lucru banal, dar adevărul este că vei scrie 30-60% mai puțin cod. Veți economisi timp pe care îl puteți petrece cu ceva semnificativ, cum ar fi să beți o ceașcă de cafea în plus ☕️?

În loc de npm install <package>
scrie npm i <package>.

În loc de npm install --save <package>
scrie npm i -S <package>.

În loc de npm install --save-dev <package>
scrie npm i -D <package>.

În loc de npm install --global <package>
scrie npm i -G <package>.

? Comandă rapidă bonus! Vrei să-ți impresionezi colegii? ? Uite ca vine…

În loc de npm test
scrie npm t.

2. Instalați mai multe pachete într-o singură comandă

De ce să scrieți mai multe linii când puteți scrie una? ? Dacă vă cunoașteți pachetele pe de rost, cea mai rapidă opțiune este să le instalați pe toate într-o singură linie, dar aveți grijă! Un pachet scris greșit și întreaga comandă va eșua. Dacă nu sunteți sigur cu privire la nume, instalați-le unul câte unul.

npm i -S react redux react-redux 

3. Instalați pachete din diferite surse

În mod implicit, când rulează npm-install, NPM va instala cea mai recentă versiune din npm-registry (https://registry.npmjs.org)

Dar mai sunt multe! NPM poate instala și pachete din alte surse, cum ar fi o adresă URL sau un fișier tarball.

Când creați propriile pachete sau solicitări pentru pachete existente, această caracteristică este puternică. De exemplu, dacă aveți propria furcă de Redux, puteți instala pachetul direct de pe furculiță. (Schimbare username către numele dvs. de utilizator de pe GitHub.)

npm i 

Și mai bine, dacă utilizați un depozit GitHub, puteți utiliza această comandă rapidă:

npm i username/redux

Mai este! De asemenea, puteți instala un pachet dintr-o anumită sucursală. Util în timpul testării unei versiuni viitoare. Doar adauga # împreună cu numele sucursalei la sfârșit.

npm i username/redux#

? Comandă rapidă bonus! Nu utilizați GitHub? Nu vă faceți griji, există comenzi rapide pentru BitBucket și GitLab de asemenea:

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

4. Conectarea pachetelor

Uneori doriți să lucrați la un proiect și să dezvoltați pachetele sale în același timp. Angajarea și împingerea pachetului către un depozit la distanță pentru fiecare modificare pe care doriți să o încercați este obositoare! ? În schimb, puteți utiliza o caracteristică numită legarea pachetului.

Conectarea pachetelor funcționează prin crearea unui link simbolic în folderul node_modules care indică depozitul local al pachetului. În acest fel, puteți edita pachetele la nivel local, iar modificările vor fi disponibile instantaneu în proiect, folosindu-l.

Cel mai simplu mod de a înțelege legarea pachetului este să încerci!
Să presupunem că avem un proiect numit myproject și un pachet numit mypackage. Noi vrem mypackage a fi o dependență de myproject.

Aceste trucuri NPM va vor face un profesionist
Un proiect și un pachet.

Accesați dosarul mypackage si scrie

npm link

Grozav! Acum, accesați dosarul myproject si scrie

npm link mypackage

Terminat! Aruncați o privire mai atentă asupra structurii folderelor

1611962169 773 Aceste trucuri NPM va vor face un profesionist

După cum puteți vedea, myproject/node_modules/mypackage este acum un link simbolic către folder mypackage! Acum puteți continua să vă dezvoltați mypackage și toate modificările pe care le faceți vor fi disponibile instantaneu în myproject.

5. Comanda npx

Există multe instrumente de scriptare pe NPM pe care probabil le veți utiliza, dar nu vor face parte din pachetul dvs. de rulare. Grunt, gulp, react-create-app, react-native-cli și mocha sunt doar câteva.

Înainte de NPM 5.x trebuia să instalați aceste instrumente fie ca pachete globale, fie ca dependențe dev. Acest lucru a consumat mult timp, nu numai pentru a instala, ci pentru a vă menține toate instrumentele pentru mai multe proiecte. De asemenea, majoritatea instrumentelor pe care le veți folosi doar o dată sau de două ori.

Aici, NPX-ul binar vine în ajutor și economisește multă muncă pentru noi! De exemplu, pentru a începe un nou proiect de reacție, puteți scrie pur și simplu:

npx create-react-app my-new-project

Cea mai recentă versiune de creați-reacționați-aplicație va fi descărcat și executat imediat. Gata cu instalarea și întreținerea instrumentelor ca pachete globale.

6. Monitorizați și curățați-vă proiectul

Aceste trucuri NPM va vor face un profesionist

Este important să înțelegeți ce se întâmplă sub capotă atunci când instalați pachete pentru a rezolva probleme și pentru a face arborele dependenței și dimensiunea finală a pachetului cât mai mici posibil.

În primul rând, avem nevoie de o imagine de ansamblu bună a arborelui dependenței și a versiunilor de pachete care au fost instalate. Folosiți comanda npm list. Adăugați steagul --depth=0 pentru a lista doar pachetele de nivel superior și a adăuga -g pentru a vă lista pachetele globale.

npm listnpm list --depth=0 -g

1611962169 485 Aceste trucuri NPM va vor face un profesionist

NPM este bun la menținerea sa și la aplatizarea arborelui de dependență din mers, dar este întotdeauna un obicei bun dedupe proiectul dvs. înainte de publicare. S-ar putea să vă elimine câteva pachete.

npm dedupe

De asemenea, este o idee excelentă să obțineți o imagine de ansamblu bună asupra pachetelor dvs. învechite și lipsă. Este greu să nu iubești această priveliște pentru coloanele sale bine organizate și schema de culori cu atmosfera de Crăciun ??

npm outdated

1611962170 965 Aceste trucuri NPM va vor face un profesionist
Lista învechită este cu adevărat frumoasă!

Dacă obțineți o mulțime de rânduri roșii, trebuie să alergați npm update pentru a vă actualiza pachetele la cea mai recentă versiune posibilă în conformitate cu package.json, care este la fel de bine menționat în dorit coloană

npm update

Grozav! Acum, dacă alergi npm oudated din nou, toate rândurile roșii ar trebui să dispară.

1611962170 521 Aceste trucuri NPM va vor face un profesionist

Dacă utilizați cursorul ^ în fața versiunilor dvs. din package.json, versiunile majore nu vor fi actualizate (de aici rândurile galbene). Acest lucru este bun, deoarece s-ar putea să apară modificări care să se actualizeze la o nouă versiune majoră.

Dacă totuși doriți să actualizați totul la cea mai recentă versiune, puteți utiliza instrumentul npm-update-all. Este la fel de ușor ca rularea acestei comenzi în folderul proiectului.

npx npm-update-all

Misto! Acum ai cea mai recentă versiune a tuturor dependențelor tale. Package.json dvs. este actualizat, de asemenea. ⚠️ Fiți conștienți de schimbările de rupere ⚠️

1611962170 250 Aceste trucuri NPM va vor face un profesionist
După cum puteți vedea, npm-update-all va actualiza toate pachetele la cea mai recentă versiune.

7. Accesați pagina de pornire pentru un pachet

Trebuie să verificați documentația pentru un pachet? De ce să vă deranjați să treceți la browser și să începeți să căutați Google când tot ce aveți nevoie este terminalul? ?

Deschideți depozitul pentru un pachet în browser

npm repo <package>

Deschideți pagina de pornire

npm home <package>

Deschideți documentația

npm docs <package>

8. Utilizați scripturi NPM

Ador scripturile npm! În loc să folosiți alergători de sarcini precum Gulp și Grunt pentru automatizarea sarcinilor repetitive, puteți folosi, în majoritatea cazurilor, scripturi npm din mai multe motive:

➕ Mai puține dependențe de dezvoltare sau dependențe globale de menținut.
➕ Nu există instrumente noi pentru ca colaboratorii și membrii echipei să învețe
➕ Mai puțin cod și configurație.

În primul rând, aveți scripturi predefinite precum start, install, test, prepublishcare au semnificații speciale în NPM. Puteți citi despre modul în care pot fi utilizate în tutorialul anterior unde construim un pachet npm de la zero.

De asemenea, puteți crea propriile scripturi personalizate. Iată un exemplu de script care vă va forma codul în src dosar cu ESLint:

package.json:

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

Acum puteți fugi npm run format și ESLint își va face treaba.

Puteți face o mulțime de lucruri cu scripturile npm, cum ar fi rularea comenzilor shell și înlănțuirea scripturilor una după alta. Verifică npm-scripturi pentru o înțelegere mai profundă a acestei caracteristici puternice.

9. Rularea scripturilor NPM în vsCode

Uneori am 30 npm-scripturi în pachetul meu.json (Fără glumă). ? Din fericire, dacă utilizați Cod Visual Studio, puteți lista toate scripturile dvs. npm în explorator și puteți rula scripturile cu un clic de buton! Asigurați-vă că această setare este activată:

npm.enableScriptExplorer: true

1611962170 413 Aceste trucuri NPM va vor face un profesionist
Rulați scripturile cu un clic de buton! VSCode acceptă listarea de scripturi din mai multe pachete în același timp.

10. Setați valorile implicite

Când creați un proiect nou, veți rula npm init și vi se vor pune întrebări despre proiectul dvs. Pentru a economisi timp, probabil că veți scrie run npm init -y pentru a completa pachetul.json cu valori implicite.

Dar care sunt exact valorile dvs. implicite? ? Îmi place să setez unele dintre acestea pentru a economisi timp mai departe! ?

set de configurare npm init.author.name “Carl-Johan (CJ) Kihl”
setarea configurării npm init.author.email “carljohan.kihl@mail.com”

rezumat

Acestea au fost sfaturile mele pentru NPM pentru moment! Dacă aveți mai multe sfaturi și trucuri pe care doriți să le împărtășiți, vă rugăm să adăugați un comentariu mai jos! ?

? Comandă rapidă bonus!
Imaginați-vă că este vineri seara și sunteți pe punctul de a finaliza un nou proiect, dar sunteți prea obosit pentru a scrie npm dedupe . ?

Fără griji! Salvați trei litere scriind:

npm ddp

Mulțumesc că ai citit.