Dacă tocmai începeți cu JavaScript, numărul de instrumente și tehnologii despre care veți auzi poate fi copleșitor. Și s-ar putea să vă fie greu să decideți de ce instrumente aveți de fapt nevoie.

Sau poate sunteți familiarizați cu instrumentele, dar nu v-ați gândit prea mult la ce probleme rezolvă și cât de nenorocită ar fi viața voastră fără ajutorul lor.

Cred că este important ca inginerii și dezvoltatorii de software să înțeleagă scopul instrumentelor pe care le folosim în fiecare zi.

De aceea, în acest articol, mă uit la NPM, Babel, Webpack, ESLint și CircleCI și încerc să clarific problemele pe care le rezolvă și cum le rezolvă.

NPM

Instrumente populare de dezvoltare front end pe care ar trebui

NPM este managerul de pachete implicit pentru dezvoltarea JavaScript. Vă ajută să găsiți și să instalați pachete (programe) pe care le puteți utiliza în programele dvs.

Puteți adăuga npm la un proiect pur și simplu utilizând „npm init“comanda. Când executați această comandă se creează un”pachet.json“fișier în directorul curent. Acesta este fișierul în care sunt listate dependențele dvs. și npm îl vede ca pe cartea de identitate a proiectului.

Puteți adăuga o dependență cu „instalare npm (nume_pachet)“comanda.

Când executați această comandă, npm merge la registrul de la distanță și verifică dacă există un pachet identificat de acest nume de pachet. Dacă o găsește, o nouă intrare de dependență este adăugată la pachet.json iar pachetul, cu dependențele sale interne, este descărcat din registru.

Puteți găsi pachete descărcate sau dependențe în “node_modules” pliant. Rețineți că, de obicei, devine destul de mare – deci asigurați-vă că îl adăugați la .gitignore.

Cum să vă actualizați bibliotecile JavaScript - Blog LogRocket

NPM nu doar ușurează procesul de găsire și descărcare a pachetelor, ci și facilitează lucrul în colaborare la un proiect.

Fără NPM, ar fi greu să gestionezi dependențele externe. Va trebui să descărcați manual versiunile corecte ale fiecărei dependențe atunci când vă alăturați unui proiect existent. Și asta ar fi o adevărată bătaie de cap.

Cu ajutorul npm, puteți rula „instalare npm” și va instala toate dependențele externe pentru dvs. Apoi, îl puteți rula din nou oricând cineva din echipa dvs. adaugă unul nou.

Babel

1612155132 375 Instrumente populare de dezvoltare front end pe care ar trebui

Babel este un compilator sau transpilator JavaScript care traduce codul ECMAScript 2015+ în cod care poate fi înțeles de motoarele JavaScript mai vechi.

Babel este cel mai popular compilator Javascript, iar cadrele precum Vue și React îl folosesc în mod implicit. Acestea fiind spuse, conceptele despre care vom vorbi aici nu sunt legate doar de Babel și se vor aplica oricărui compilator JavaScript.

De ce ai nevoie de un compilator?

„De ce avem nevoie de un compilator, nu este JavaScript un limbaj interpretat?” s-ar putea să întrebați dacă sunteți familiarizați cu conceptele de limbaje compilate și interpretate.

Este adevărat că, de obicei, numim ceva un „compilator” dacă traduce codul nostru citibil de către om într-un binar executabil care poate fi înțeles de CPU. Dar nu este cazul aici.

Termenul transpiler poate fi mai potrivit deoarece este un subset al unui compilator: Transpilerele sunt compilatoare care traduc codul dintr-un limbaj de programare în alt limbaj (în acest exemplu, de la JS modern la o versiune mai veche).

JavaScript este limba browserelor. Dar există o problemă cu browserele: compatibilitatea încrucișată. Instrumentele JavaScript și limbajul în sine evoluează rapid și multe browsere nu reușesc să se potrivească cu acel ritm. Acest lucru duce la probleme de compatibilitate.

Probabil că doriți să scrieți cod în cele mai recente versiuni de JavaScript, astfel încât să puteți folosi noile sale caracteristici. Dar dacă browserul pe care îl rulează codul dvs. nu a implementat unele dintre noile funcții din motorul său JavaScript, codul nu se va executa corect în acel browser.

Aceasta este o problemă complexă, deoarece fiecare browser implementează caracteristicile la o viteză diferită. Și chiar dacă implementează aceste funcții noi, vor exista întotdeauna persoane care folosesc o versiune mai veche a browserului lor.

Deci, dacă doriți să puteți utiliza funcțiile recente, dar doriți, de asemenea, ca utilizatorii dvs. să vizualizeze acele pagini fără probleme?

Înainte de Babel, am folosit polifilențe pentru a rula versiuni mai vechi ale anumitor coduri dacă browserul nu acceptă funcțiile moderne. Și când folosiți Babel, acesta folosește polifenituri în culise și nu vă cere să faceți nimic.

Cum funcționează transpilerele / compilatoarele?

Babel funcționează similar cu alți compilatori. Are etape de analiză, transformare și generare de cod.

Nu vom aprofunda aici modul în care funcționează, deoarece compilatoarele sunt lucruri complicate. Dar pentru a înțelege elementele de bază ale modului în care funcționează compilatoarele, puteți verifica proiectul-super-minuscul-compilator. De asemenea, este menționat în documentația oficială a Babel ca fiind de ajutor în înțelegerea modului în care funcționează Babel.

De obicei, putem scăpa de a afla despre pluginurile și presetările Babel. Pluginurile sunt fragmentele pe care Babel le folosește în culise pentru a compila codul dvs. în versiuni mai vechi de JavaScript. Vă puteți gândi la fiecare caracteristică modernă ca la un plugin. Poti sa te duci la acest link pentru a verifica lista completă a pluginurilor.

1612155133 905 Instrumente populare de dezvoltare front end pe care ar trebui
Lista pluginurilor pentru ES5

Presetările sunt colecții de pluginuri. Dacă doriți să utilizați Babel pentru un proiect React, puteți utiliza prefabricatul @ babel / preset-react care conține pluginurile necesare.

1612155133 621 Instrumente populare de dezvoltare front end pe care ar trebui
Reactează pluginurile presetate

Puteți adăuga pluginuri editând fișierul de configurare Babel.

Ai nevoie de Babel pentru aplicația ta React?

Pentru React, aveți nevoie de un compilator, deoarece codul React folosește în general JSX, iar JSX trebuie compilat. De asemenea, biblioteca este construită pe conceptul de utilizare a sintaxei ES6.

Din fericire, când creați un proiect cu creați-reacționați-aplicație, vine cu Babel deja configurat și de obicei nu este nevoie să modificați config.

Exemple de compilator în acțiune

Site-ul web Babel are un compilator online și este foarte util să înțelegeți cum funcționează. Doar conectați un cod și analizați ieșirea.

1612155133 274 Instrumente populare de dezvoltare front end pe care ar trebui
1612155134 40 Instrumente populare de dezvoltare front end pe care ar trebui

Webpack

1612155135 586 Instrumente populare de dezvoltare front end pe care ar trebui

Webpack este un pachet de module static. Când creați un proiect nou, majoritatea cadrelor / bibliotecilor JavaScript îl folosesc din cutie în zilele noastre.

Dacă sintagma „pachet de module statice” sună confuz, continuați să citiți pentru că am câteva exemple grozave care să vă ajute să înțelegeți.

De ce ai nevoie de un pachet?

În aplicațiile web veți avea o mulțime de fișiere. Acesta este în special cazul aplicațiilor cu o singură pagină (React, Vue, Angular), fiecare având propriile dependențe.

Ceea ce vreau să spun prin dependență este o declarație de import – dacă fișierul A trebuie să importe fișierul B pentru a rula corect, atunci spunem că A depinde de B.

În proiectele mici, puteți gestiona dependențele modulului cu <script> Etichete. Dar când proiectul devine mai mare, dependențele devin rapid greu de gestionat.

Poate, mai important, împărțirea codului în mai multe fișiere face ca site-ul dvs. să se încarce mai lent. Acest lucru se datorează faptului că browserul trebuie să trimită mai multe solicitări în comparație cu un fișier mare, iar site-ul dvs. web începe să consume o tonă de lățime de bandă, din cauza antetelor HTTP.

Noi, ca dezvoltatori, dorim ca codul nostru să fie modular. Îl împărțim în mai multe fișiere, deoarece nu dorim să lucrăm cu un singur fișier cu mii de linii. Totuși, dorim ca site-urile noastre web să fie performante, să utilizeze mai puțină lățime de bandă și să se încarce rapid.

Deci, acum, vom vedea cum Webpack rezolvă această problemă.

Cum funcționează Webpack

Când vorbeam despre Babel, am menționat că codul JavaScript trebuie transpus înainte de implementare.

Dar compilarea cu Babel nu este singura operație de care aveți nevoie înainte de a vă implementa proiectul.

De obicei, trebuie să-l uglificați, să îl transpileți, să compilați SASS sau SCSS în CSS dacă utilizați orice preprocesoare, să compilați TypeScript dacă îl utilizați … și, după cum puteți vedea, această listă poate ajunge mult mai ușor.

Nu doriți să vă ocupați de toate acele comenzi și operațiuni înainte de fiecare implementare. Ar fi minunat dacă ar exista un instrument care să facă toate acestea pentru dvs. în ordinea corectă și în mod corect.

Vestea bună – există: Webpack.

Webpack oferă, de asemenea, funcții precum un server local cu reîncărcare la cald (ei îl numesc înlocuirea modulului fierbinte) pentru a vă îmbunătăți experiența de dezvoltare.

Deci, ce este reîncărcarea la cald? Înseamnă că ori de câte ori vă salvați codul, acesta este compilat și implementat pe serverul HTTP local care rulează pe computerul dvs. Și ori de câte ori un fișier se modifică, acesta trimite un mesaj browserului dvs., astfel încât să nu fie nevoie nici măcar să reîmprospătați pagina.

Dacă ați folosit vreodată „npm run serve”, „npm start” sau „npm run dev”, acele comenzi pornesc și serverul dev al Webpack din culise.

Webpack începe de la punctul de intrare al proiectului (index) și generează Arborele sintaxei abstracte a fișierului. Vă puteți gândi că analizează codul. Această operație se face și în compilatoare, care apoi caută instrucțiuni de import recursiv pentru a genera un grafic al dependențelor.

Apoi convertește fișierele în IIFE pentru a le modula (nu uitați, introducerea codului într-o funcție îi restrânge domeniul de aplicare). Procedând astfel, modularizează fișierele și se asigură că variabilele și funcțiile nu sunt accesibile altor fișiere.

Fără această operațiune, ar fi ca și copierea și lipirea codului fișierului importat și acel fișier ar avea același domeniu.

Webpack face multe alte lucruri avansate în culise, dar acest lucru este suficient pentru a înțelege elementele de bază.

Bonus – ESLint

1612155135 87 Instrumente populare de dezvoltare front end pe care ar trebui

Calitatea codului este importantă și vă ajută să mențineți proiectele mentenabile și ușor de extins. În timp ce majoritatea dintre noi dezvoltatorii recunoaștem semnificația codificării curate, uneori tindem să ignorăm consecințele pe termen lung sub presiunea termenelor limită.

Multe companii decid asupra standardelor de codare și încurajează dezvoltatorii să respecte aceste standarde. Dar cum vă puteți asigura că codul dvs. respectă standardele?

Ei bine, puteți utiliza un instrument precum ESLint pentru a aplica regulile din cod. De exemplu, puteți crea o regulă pentru a impune sau a interzice utilizarea punctelor și virgulelor în codul dvs. JavaScript. Dacă încălcați o regulă, ESLint afișează o eroare și codul nici măcar nu este compilat – deci nu este posibil să ignorați acest lucru decât dacă dezactivați regula.

Linters pot fi utilizate pentru a impune standardele prin scrierea regulilor personalizate. Dar puteți utiliza și configurațiile ESLint pre-realizate stabilite de marile companii de tehnologie pentru a ajuta dezvoltatorii să se obișnuiască să scrie coduri curate.

Puteți arunca o privire la configurația ESLint Google Aici – este cel pe care îl prefer.

ESLint vă ajută să vă obișnuiți cu cele mai bune practici, dar acesta nu este singurul său avantaj. ESLint vă avertizează, de asemenea, cu privire la posibile erori / erori în codul dvs., astfel încât să puteți evita greșelile obișnuite.

1612155136 767 Instrumente populare de dezvoltare front end pe care ar trebui

Bonus – CI / CD (CircleCI)

1612155136 419 Instrumente populare de dezvoltare front end pe care ar trebui

Integrarea / dezvoltarea continuă a câștigat multă popularitate în ultimii ani, deoarece multe companii au adoptat principiile Agile.

Instrumente precum Jenkins și CircleCI vă permit să automatizați implementarea și testarea software-ului dvs., astfel încât să puteți implementa mai des și mai fiabil, fără a trece singuri prin procese de construcție dificile și predispuse la erori.

Menționez CircleCI ca produs aici, deoarece este gratuit și utilizat frecvent în proiecte JavaScript. De asemenea, este destul de ușor de utilizat.

Să trecem la un exemplu: Să presupunem că aveți un server de implementare / QA și depozitul dvs. Git. Doriți să implementați modificările pe serverul de implementare / QA, așa că iată un exemplu de proces:

  1. Apăsați modificările la Git
  2. Conectați-vă la server
  3. Creați un container Docker și rulați-l
  4. Trageți modificările pe server, descărcați toate dependențele (instalare npm)
  5. Rulați testele pentru a vă asigura că nimic nu este spart
  6. Utilizați un instrument precum ESLint / Sonar pentru a asigura calitatea codului
  7. Îmbinați codul dacă totul este în regulă

Cu ajutorul CircleCI, puteți face automat toate aceste operațiuni. Puteți să o configurați și să o configurați pentru a efectua toate operațiunile de mai sus ori de câte ori apăsați o modificare la Git. Va respinge apăsarea dacă ceva nu merge bine, de exemplu un test care nu reușește.

Nu voi intra în detaliile despre cum să configurez CircleCI deoarece acest articol este mai mult despre „De ce?” a fiecărui instrument. Dar dacă sunteți interesat să aflați mai multe și să le vedeți în acțiune, puteți verifica această serie de tutoriale.

Concluzie

Lumea JavaScript evoluează rapid și noile instrumente câștigă popularitate în fiecare an.

Este ușor să reacționăm la această schimbare doar învățând cum să folosim instrumentul – de multe ori suntem prea ocupați ca să ne luăm timpul și să ne gândim la motivul pentru care instrumentul a devenit popular sau ce problemă rezolvă.

În acest articol, am ales instrumentele care cred că sunt cele mai populare și mi-am împărtășit gândurile cu privire la semnificația lor. De asemenea, am vrut să te fac să te gândești la problemele pe care le rezolvă, mai degrabă decât la detaliile modului de utilizare a acestora.

Dacă ți-a plăcut articolul, poți să verifici și să te abonezi la blog unde încerc să scriu frecvent. De asemenea, anunțați-mă ce credeți comentând, astfel încât să putem face o brainstorming sau să-mi spuneți ce alte instrumente vă place să utilizați 🙂