de Mohammed Ajmal Siddiqui

Introducere în scripturile NPM

Introducere in scripturile NPM

Scripturile NPM sunt printre caracteristicile mele preferate ale NPM. Sunt simple. Acestea reduc nevoia de instrumente. Prin urmare, acestea reduc numărul de fișiere de configurare și alte lucruri de care trebuie să urmăriți. Și sunt foarte versatile. De asemenea, vă permit să automatizați o mulțime de sarcini comune. dintre care unele sunt enumerate spre sfârșitul articolului.

Fără alte întrebări, să ne scufundăm în scripturile NPM!

Ce sunt scripturile NPM?

Scripturile NPM sunt, bine, scripturi. Folosim scripturi pentru a automatiza sarcini repetitive. De exemplu, construirea proiectului dvs., reducerea fișierelor Cascading Style Sheets (CSS) și JavaScript (JS). Scripturile sunt, de asemenea, utilizate în ștergerea fișierelor și folderelor temporare etc. Există multe modalități de a elimina acest lucru – puteți scrie scripturi bash / batch sau puteți utiliza un alergător de sarcini precum Gulp sau Grunt. Cu toate acestea, mulți oameni trec la scripturile NPM pentru simplitatea și versatilitatea lor. De asemenea, oferă posibilitatea de a avea mai puține instrumente pentru a învăța, utiliza și urmări.

Acum că avem (oarecare) idee despre ce sunt scripturile NPM și ce pot face pentru noi, haideți să scriem câteva!

Obiectul Scripturi din package.json

Cea mai mare parte a muncii noastre se va întâmpla în fișierul package.json pe care NPM îl folosește ca un fel de manifest. Acesta este fișierul creat atunci când rulați npm init.

Iată un exemplu de fișier package.json:

{       "name": "super-cool-package",       "version": "1.0.0",       "scripts": {            ...       },     "dependencies": {         ...    }        "devDependencies": {             ...       } }

Dacă ați lucrat cu NodeJS și NPM, veți fi familiarizați cu fișierul package.json. Observați scripts obiect din fișier. Aici vor merge scripturile noastre NPM. Scripturile NPM sunt scrise ca de obicei perechi cheie-valoare JSON în care cheia este numele scriptului și valoarea conține scriptul pe care doriți să îl executați.

Iată probabil cel mai popular script NPM (și este, de asemenea, un tip special de script):

"scripts": {    "start": "node index.js",    ...}

Probabil că ați văzut asta de multe ori în fișierele dvs. package.json. Și probabil știi că poți tasta npm start pentru a executa scriptul. Dar acest exemplu ilustrează primul aspect important al scripturilor NPM – acestea sunt pur și simplu comenzi terminale. Acestea rulează în shell-ul sistemului de operare pe care sunt executate. Deci, ar putea fi bash pentru Linux și cmd.exe pentru Windows.

În acest moment, ați putea fi destul de neimpresionat. Dar continuați să citiți pentru a vedea cât de puternice sunt scripturile NPM.

Scripturi personalizate

Scriptul pe care tocmai l-am văzut este unul dintre scripturile NPM „speciale”. Puteți să-l executați tastând simplu npm start. Acestea sunt scripturi cu nume pe care NPM le recunoaște și le atribuie o semnificație specială. De exemplu, puteți scrie un script numit prepublish. NPM va executa scriptul înainte ca pachetul dvs. să fie ambalat și publicat, precum și atunci când rulați npm install local fără niciun argument. Mai multe despre astfel de scripturi aici.

Dar, de asemenea, NPM vă permite să vă definiți propriile scripturi personalizate. Aici începe să se arate puterea scripturilor NPM.

Să ne uităm la un script NPM personalizat de bază, care transmite consolă „hello world”. Adăugați acest lucru la obiectul de scripturi al fișierului package.json:

"say-hello": "echo 'Hello World'"

Obiectul de scripturi din fișierul package.json ar trebui să arate astfel:

..."scripts": {    "start": "node index.js",    "say-hello": "echo 'Hello World!'"}

Acum încearcă să alergi npm say-hello. Nu funcționează? Acest lucru se datorează faptului că scripturile NPM personalizate trebuie să fie precedate de oricare run-script sau run pentru ca acestea să fie executate corect. Încearcă să alergi npm run-script say-hello sau npm run say-hello. Consola spune „Hello World!”! Am scris primul nostru script NPM!

Iată un sfat rapid – pentru a împiedica ieșirea jurnalelor NPM implicite pe consolă atunci când executați un script, adăugați --silent steag. Așa ar arăta comanda ta:

npm run --silent say-hello

Apelarea scripturilor NPM în cadrul altor scripturi NPM

Un dezavantaj al utilizării scripturilor NPM apare atunci când scriptul dvs. este destul de complex (și lung). Această problemă este agravată de faptul că specificațiile JSON nu acceptă comentarii. Există câteva modalități în jurul acestei probleme. O modalitate este să vă împărțiți scriptul în mici scripturi cu un singur scop și apoi să le apelați în alte scripturi NPM. Modul de a apela un script NPM în altul este simplu. Modificați-vă scripts obiect astfel încât să arate astfel:

"scripts": {    "say-hello": "echo 'Hello World'",    "awesome-npm": "npm run say-hello && echo 'echo NPM is awesome!'"}

Deoarece scripturile NPM se execută în shell, apelează npm run say-hello într-un alt script NPM este aproape intuitiv.

Pentru cei dintre voi care nu sunt foarte confortabili cu comenzile terminalului, &&în script este folosit pentru a delimita două comenzi. Astfel, a doua comandă se execută după executarea cu succes a primei comenzi.

Acum, când alergi npm run awesome-npm, scriptul say-hello se execută mai întâi, trimitând „Hello World” la consolă, urmată de partea scriptului după &&, care generează „NPM este minunat!”

Iată un caz de utilizare în care acest lucru ar putea fi util. Să presupunem că automatizați procesul de compilare a aplicației dvs. Să presupunem că utilizați Webpack ca pachet și codul dvs. de distribuție intră într-un director numit „dist”.

S-ar putea începe cu curățarea directorului. Acest lucru se poate face fie prin ștergerea conținutului său, fie prin ștergerea directorului însuși și apoi realizarea acestuia din nou. Să mergem cu această din urmă abordare. Comanda ta ar putea arăta cam așa:

rm -r dist && mkdir dist

Rețineți că acest lucru folosește comenzi bash. Veți afla cum să scrieți scripturi NPM multiplataforma mai târziu în acest articol.

După aceasta, ați putea invoca pachetul executând fișierul webpack comanda.

Puteți executa aceste comenzi succesiv utilizând fișierul &&operator. Cu toate acestea, din motive de demonstrație și modularitate, să împărțim acest lucru în două scripturi NPM care se apelează reciproc.

Iată cum ar arăta obiectul scripturilor în acest caz de utilizare:

"scripts": {    ...    "clean": "rm -r dist && mkdir dist",    "build": "npm run clean && webpack"}

Iată-l! Cum să împărțiți o sarcină mai complexă în scripturi NPM mai mici.

Apelarea scripturilor Shell și Node

Uneori, poate fi necesar să scrieți scripturi mult mai complexe decât cele care pot fi realizate în 2-3 comenzi. Când apare această situație, o soluție este să scrieți scripturi bash sau JS (sau scripturi în orice limbaj de scriptare doriți) și să le apelați din scripturile NPM.

Să scriem rapid un script bash care să vă salute. Creați un fișier numit hello.sh în directorul rădăcină și lipiți acest cod în el:

#!/usr/bin/env bash
# filename: hello.shecho "What's your name?"read nameecho "Hello there, $name!"

Este un script simplu care îți revine numele. Acum modificați fișierul package.json fișier astfel încât scripts obiectul are această linie de cod:

"bash-hello": "bash hello.sh"

Acum, când alergi npm run bash-hello, îți cere numele și apoi îți spune salut! Sclipitor.

Puteți face același lucru cu scripturile JS rulate folosind nod. Un avantaj al acestei abordări este că acest script va fi independent de platformă, deoarece folosește nodul pentru a rula. Iată un script JS puțin mai complex pentru a adăuga două numere întregi primite ca argumente de linie de comandă (puneți acest lucru într-un fișier numit add.js):

// add.js// adds two integers received as command line arguments
function add(a, b) {    return parseInt(a)+parseInt(b);}
if(!process.argv[2] || !process.argv[3]) {    console.log('Insufficient number of arguments! Give two numbers please!');}
else {    console.log('The sum of', process.argv[2], 'and', process.argv[3], 'is', add(process.argv[2], process.argv[3]));}

Obiectul process.argv conține argumentele din linia de comandă date scriptului. Primele două elemente, process.argv[0] și process.argv[1], sunt rezervate prin nod. Prin urmare process.argv[2] și process.argv[3] vă permite să accesați argumentele din linia de comandă.

Acum adăugați această linie la scripts obiect al package.json fişier:

"js-add": "node add.js"

În cele din urmă, rulați scriptul ca un script npm, oferindu-i două numere ca argumente din linia de comandă:

npm run js-add 2 3

Și viola! Ieșirea este

The sum of 2 and 3 is 5

Sclipitor! Acum suntem capabili să scriem scripturi mult mai puternice și să folosim puterea altor limbaje de scriptare.

Pre și Post Cârlige

Amintiți-vă cum am vorbit despre un script special npm numit prepublish care rulează înainte de a vă publica pachetul? O astfel de funcționalitate poate fi realizată și cu scripturi personalizate. Am discutat o modalitate de a face acest lucru în secțiunea anterioară. Putem înlănțui comenzi folosind &&operator, deci dacă doriți să rulați script-1 înainte de script-2, ați scrie:

"script-2": "npm run script-1 && echo 'I am script-2'"

Cu toate acestea, acest lucru ne murdărește scenariile. Acest lucru se datorează faptului că funcționalitatea de bază a scriptului se reflectă numai în a doua parte a comenzii (după && ). O modalitate de a scrie scripturi curate este de a utiliza cârlige pre și post.

Cârligele pre și post sunt exact cum sună – vă permit să executați scripturi înainte și după ce apelați un anumit script. Tot ce trebuie să faceți este să definiți scripturi noi cu același nume ca scriptul principal. Cu toate acestea, acestea sunt prefixate cu „pre” sau „post”, în funcție de faptul dacă scriptul este executat înainte de scriptul principal sau după acesta.

Să ne uităm la noi say-hello din nou scenariu. Spuneți că vrem să executăm comanda echo 'I run before say-hello' inainte de say-hello și echo 'I run after say-hello' după salut-salut. Așa ar arăta obiectul dvs. de scripturi:

"scripts": {    "say-hello": "echo 'Hello World'",     "presay-hello": "echo 'I run before say-hello'",    "postsay-hello": "echo 'I run after say-hello'" }

„Pre” și „post” înainte de numele scriptului îi spun lui npm să le execute înainte și după scriptul apelat say-hello respectiv.

Acum, când alergi npm run say-hello, ieșirea tuturor celor trei scripturi apare în ordine! Cat de tare e asta?

Deoarece toate cele trei scripturi sunt trimise către consolă și jurnalele NPM aglomerează ieșirea, prefer să folosesc -silent semnalizați în timpul rulării acestora. Deci comanda ta ar arăta astfel:

npm run --silent say-hello

Iată rezultatul:

I run before say-helloHello WorldI run after say-hello

Iată-l!

Să aplicăm aceste cunoștințe exemplului nostru de script de construcție. Modificați-vă package.json fișier astfel încât să arate astfel:

"scripts": {    ...    "clean": "rm -r dist && mkdir dist",     "prebuild": "npm run clean"    "build": "webpack"}

Acum scripturile noastre arată mult mai curate. Când alergi npm run build, prebuildeste apelat din cauza cârligului „pre”, care apelează clean, care curăță directorul nostru dist pentru noi. Dulce!

Realizarea scripturilor noastre pe mai multe platforme

Există un dezavantaj în scrierea comenzilor terminal / shell în scripturile noastre. Acesta este faptul că comenzile shell fac platforma noastră de scripturi dependentă. Poate asta ne atrage atenția asupra unor instrumente precum Gulp și Grunt. Dacă scriptul dvs. este scris pentru sistemele Unix, este posibil să nu funcționeze pe Windows și invers.

Prima dată când am folosit scripturi NPM, care numeau alte scripturi bash / batch, m-am gândit să scriu două scripturi pe sarcină. Una pentru Unix și una pentru linia de comandă Windows. Această abordare poate funcționa în cazuri de utilizare în care scripturile nu sunt atât de complexe și nu există multe scripturi. Cu toate acestea, devine rapid clar că acestea nu reprezintă o soluție bună la problemă. Unele dintre motivele care stau la baza acestui fapt sunt:

  • Aveți un alt lucru de urmărit care vă distrage atenția de la sarcina dvs. principală de a lucra la aplicație. În schimb, ajungi să lucrezi în mediul de dezvoltare.
  • Scrii un cod redundant – scripturile pe care le scrii sunt foarte asemănătoare și îndeplinesc aceeași sarcină. În esență, rescrieți codul. Acest lucru încalcă unul dintre principiile fundamentale ale codificării – DRY: Nu te repeta.

Deci, cum ne descurcăm? Există trei abordări pe care le puteți utiliza:

  1. Utilizați comenzi care rulează pe mai multe platforme: Multe comenzi utile sunt comune Unix și Windows. Dacă scripturile dvs. sunt simple, luați în considerare utilizarea acestora.
  2. Utilizați pachete nod: Puteți utiliza pachete nod cum ar fi rimraf sau încrucișat în loc de comenzi shell. Și, evident, puteți utiliza aceste pachete în fișiere JS dacă scriptul dvs. este mare și complex.
  3. Utilizați ShellJS: ShellJS este un pachet npm care rulează comenzi Unix prin Node. Deci, acest lucru vă oferă puterea de a rula comenzi Unix pe toate platformele, inclusiv Windows.

Abordările de mai sus au fost luate de la acest articol strălucit de Cory House despre motivul pentru care a părăsit Grunt și Gulp pentru scenariile NPM. Articolul detaliază multe lucruri care nu sunt acoperite în această serie și se încheie cu o listă de resurse excelente. Aș recomanda cu siguranță să îl citiți pentru a vă înțelege mai bine scripturile NPM.

Câteva cazuri de utilizare pentru scripturile NPM

În cele din urmă, puteți face multe lucruri cu scripturile NPM. Unele cazuri de utilizare sunt:

  • Minimizarea / Uglificarea CSS / JavaScript
  • Automatizarea procesului de construire
  • Linting codul
  • Comprimarea imaginilor
  • Injectarea automată a modificărilor cu BrowserSync

Si mult mai mult. Pentru a afla despre cum să automatizați activitățile menționate mai sus utilizând scripturi NPM, consultați acest articol strălucit pe subiect.

Bonus: comandant pentru crearea aplicațiilor CLI folosind NodeJS

În timp ce discutăm despre scripturile NPM și CLI, aș dori să vă povestesc rapid despre un pachet foarte interesant numit Commander. Commander vă permite să creați propriile aplicații CLI. Acest lucru nu are legătură cu scripturile NPM, dar este o bucată de tehnologie interesantă de știut. Verificați comandantul docs aici sau încercați unul dintre aceste tutoriale:

Cuvinte de încheiere

Asta este tot pentru acest articol despre utilizarea scripturilor NPM. Sper că ați câștigat o oarecare perspectivă asupra modului în care le puteți integra în propriile dvs. proiecte. Acest articol nu este în niciun caz un tutorial detaliat despre scripturile NPM. Prin urmare, vă recomand să învățați mai departe atât din alte resurse, cât și din utilizarea scripturilor NPM în propriile dvs. proiecte.

De asemenea, conectați-vă cu mine pe GitHub și LinkedIn.

Codificare fericită! 🙂