Ako tek započinjete s JavaScriptom, broj alata i tehnologija o kojima ćete čuti možda je neodoljiv. I možda ćete imati poteškoća u odluci koji vam alati zapravo trebaju.
Ili ste možda upoznati s alatima, ali niste previše razmišljali o tome koje probleme rješavaju i koliko bi vaš život bio jadan bez njihove pomoći.
Vjerujem da je važno da softverski inženjeri i programeri razumiju svrhu alata koje svakodnevno koristimo.
Zato u ovom članku promatram NPM, Babel, Webpack, ESLint i CircleCI i pokušavam pojasniti probleme koje oni rješavaju i kako ih rješavaju.
NPM
NPM je zadani upravitelj paketa za razvoj JavaScript-a. Pomaže vam u pronalaženju i instaliranju paketa (programa) koje možete koristiti u svojim programima.
Projektu možete dodati npm jednostavno pomoću naredbe " npm init ". Kada pokrenete ovu naredbu, ona stvara datoteku " package.json " u trenutnom direktoriju. Ovo je datoteka u kojoj su navedene vaše ovisnosti, a npm je vidi kao osobnu iskaznicu projekta.
Ovisnost možete dodati naredbom " npm install (ime_paketa) ".
Kada pokrenete ovu naredbu, npm ide u udaljeni registar i provjerava postoji li paket identificiran ovim imenom paketa. Ako ga pronađe, u vaš paket.json dodaje se novi unos ovisnosti i paket se s unutarnjim ovisnostima preuzima iz registra.
Preuzete pakete ili ovisnosti možete pronaći u mapi "node_modules" . Imajte na umu da obično postane prilično velik - pa ga dodajte u .gitignore .
NPM ne samo da olakšava postupak pronalaženja i preuzimanja paketa, već i olakšava suradnički rad na projektu.
Bez NPM-a bilo bi teško upravljati vanjskim ovisnostima. Kad se pridružite postojećem projektu, morat ćete ručno preuzeti ispravne verzije svake ovisnosti. A to bi bila prava gnjavaža.
Uz pomoć npm-a možete samo pokrenuti "npm install" i on će instalirati sve vanjske ovisnosti umjesto vas. Tada ga možete jednostavno ponovno pokrenuti kad god netko iz vašeg tima doda novi.
Babel
Babel je JavaScript kompajler ili transpiler koji prevodi ECMAScript 2015+ kôd u kôd koji mogu razumjeti stariji JavaScript motori.
Babel je najpopularniji Javascript kompajler, a okviri poput Vue i React koriste ga prema zadanim postavkama. Usprkos tome, koncepti o kojima ćemo ovdje govoriti nisu povezani samo s Babelom i primjenjivat će se na bilo koji JavaScript kompajler.
Zašto vam treba kompajler?
"Zašto nam treba kompajler, nije li JavaScript interpretirani jezik?" možete pitati jeste li upoznati s pojmovima kompiliranih i protumačenih jezika.
Istina je da obično nešto nazivamo "kompajlerom" ako prevodi naš čitljiv kôd u izvršnu binarnu datoteku koju CPU može razumjeti. Ali ovdje nije slučaj.
Pojam transpiler može biti prikladniji, jer je podskup prevoditelja: Prevodnici su prevoditelji koji prevode kôd s programskog jezika na drugi jezik (u ovom primjeru iz modernog JS-a u stariju verziju).
JavaScript je jezik preglednika. Ali postoji problem s preglednicima: unakrsna kompatibilnost. JavaScript alati i sam jezik brzo se razvijaju i mnogi preglednici ne uspijevaju dosegnuti taj tempo. To rezultira problemima s kompatibilnošću.
Vjerojatno želite napisati kôd u najnovijim verzijama JavaScript-a kako biste mogli koristiti njegove nove značajke. Ali ako preglednik na kojem je pokrenut vaš kôd nije implementirao neke od novih značajki u svoj JavaScript mehanizam, kôd se neće pravilno izvršiti na tom pregledniku.
To je složen problem jer svaki preglednik implementira značajke različitom brzinom. Pa čak i ako implementiraju te nove značajke, uvijek će biti ljudi koji koriste stariju verziju svog preglednika.
Pa što ako želite koristiti najnovije značajke, ali želite i da korisnici bez problema pregledavaju te stranice?
Prije Babela koristili smo polyfills za pokretanje starijih verzija određenog koda ako preglednik nije podržavao moderne značajke. A kada koristite Babel, on koristi polifil iza kulisa i ne zahtijeva od vas da radite bilo što.
Kako rade transpileri / kompajleri?
Babel djeluje slično ostalim kompajlerima. Ima faze raščlanjivanja, transformacije i generiranja koda.
Ovdje nećemo detaljno ulaziti u to kako to radi, jer su kompajleri složene stvari. Ali da biste razumjeli osnove rada kompajlera, možete provjeriti projekt-super-maleni-kompajler. Također se spominje u Babelovoj službenoj dokumentaciji kao korisno za razumijevanje načina rada Babel.
Obično se možemo izvući iz saznanja o Babel dodacima i unaprijed postavljenim postavkama. Dodaci su isječci koje Babel koristi iza kulisa za kompajliranje vašeg koda u starije verzije JavaScript-a. O svakoj modernoj značajci možete razmišljati kao o dodatku. Možete otići na ovu poveznicu da biste pogledali cijeli popis dodataka.
Presetovi su zbirke dodataka. Ako želite koristiti Babel za projekt React, možete upotrijebiti unaprijed izrađeni @ babel / preset-response koji sadrži potrebne dodatke.
Dodatke možete dodati uređivanjem konfiguracijske datoteke Babel.
Treba li vam Babel za vašu React aplikaciju?
Za React vam je potreban kompajler jer React kôd obično koristi JSX i JSX ga treba kompajlirati. Također se knjižnica temelji na konceptu korištenja ES6 sintakse.
Srećom, kada kreirate projekt pomoću aplikacije create-response-app , on dolazi s već konfiguriranom Babel i obično ne trebate mijenjati konfiguraciju.
Primjeri kompajlera u akciji
Babelovo web mjesto ima internetski kompajler i korisno je razumjeti kako to funkcionira. Samo uključite neki kod i analizirajte izlaz.
Webpack
Webpack je statički paket modula. Kada kreirate novi projekt, većina JavaScript okvira / knjižnica danas ga koristi izvan okvira.
Ako fraza "paket statičkog modula" zvuči zbunjujuće, nastavite čitati jer imam nekoliko izvrsnih primjera koji će vam pomoći da razumijete.
Zašto vam treba paket?
U web aplikacijama imat ćete puno datoteka. To je posebno slučaj za aplikacije s jednom stranicom (React, Vue, Angular), pri čemu svaka ima svoje ovisnosti.
Ono što mislim pod ovisnošću je izjava o uvozu - ako datoteka A treba uvesti datoteku B da bi se pravilno pokrenula, tada kažemo da A ovisi o B.
U malim projektima ovisnosti modula možete rješavati oznakama. Ali kad projekt postane veći, ovisnostima brzo postaje teško upravljati.
Možda je još važnije da podjela koda na više datoteka vaše web mjesto sporije učitava. To je zato što preglednik mora poslati više zahtjeva u odnosu na jednu veliku datoteku, a vaše web mjesto počinje trošiti tonu propusnosti zbog HTTP zaglavlja.
Mi kao programeri želimo da naš kod bude modularan. Dijelimo ga na više datoteka jer ne želimo raditi s jednom datotekom s tisućama redaka. Ipak, također želimo da naše web stranice budu učinkovite, da koriste manje propusnosti i da se brzo učitavaju.
Sada ćemo vidjeti kako Webpack rješava ovaj problem.
Kako Webpack radi
Kad smo govorili o Babelu, spomenuli smo da JavaScript kôd treba transpilirati prije implementacije.
Ali sastavljanje s Babelom nije jedina operacija koja vam je potrebna prije implementacije vašeg projekta.
Obično ga trebate uglificirati, transpilirati, sastaviti SASS ili SCSS u CSS ako koristite bilo koji pretprocesor, sastaviti TypeScript ako ga koristite ... i kao što vidite, ovaj se popis može lako produžiti.
Ne želite se baviti svim tim naredbama i operacijama prije svakog postavljanja. Bilo bi sjajno kad bi postojao alat koji bi to sve učinio za vas u ispravnom redoslijedu i na ispravan način.
Dobra vijest - postoji: Webpack.
Webpack također nudi značajke poput lokalnog poslužitelja s vrućim ponovnim učitavanjem (oni to nazivaju vrućom zamjenom modula) kako bi vaše razvojno iskustvo bilo bolje.
Pa što je vruće ponovno punjenje? To znači da se svaki put kada spremite kôd prevede i rasporedi na lokalni HTTP poslužitelj pokrenut na vašem računalu. A kad god se datoteka promijeni, pošalje poruku vašem pregledniku, tako da ne trebate ni osvježavati stranicu.
Ako ste ikada koristili "npm run serve", "npm start" ili "npm run dev", te naredbe također pokreću Webpack-ov dev poslužitelj iza scene.
Webpack započinje od ulazne točke vašeg projekta (indeksa) i generira stablo apstraktne sintakse datoteke. Možete to smatrati raščlanjivanjem koda. Ova se operacija također radi u kompajlerima, koji zatim rekurzivno traže naredbe za uvoz kako bi generirali grafikon ovisnosti.
Zatim datoteke pretvara u IIFE kako bi ih modularizirao (ne zaboravite, stavljanjem koda unutar funkcije ograničava se njezin opseg). Na taj način moduliraju datoteke i osiguravaju da varijable i funkcije nisu dostupne drugim datotekama.
Bez ove operacije to bi bilo poput kopiranja i lijepljenja koda uvezene datoteke i ta bi datoteka imala isti opseg.
Webpack radi mnoge druge napredne stvari iza kulisa, ali to je dovoljno za razumijevanje osnova.
Bonus - ESLint
Kvaliteta koda je važna i pomaže da vaši projekti budu održivi i lako proširivi. Iako većina nas programera prepoznaje važnost čistog kodiranja, ponekad pod pritiskom rokova zanemarimo dugoročne posljedice.
Mnoge tvrtke odlučuju se o standardima kodiranja i potiču programere da ih poštuju. Ali kako možete biti sigurni da vaš kôd udovoljava standardima?
Pa, možete koristiti alat kao što je ESLint za provođenje pravila u kodu. Na primjer, možete stvoriti pravilo kojim ćete nametnuti ili zabraniti upotrebu točke sa zarezom u vašem JavaScript kodu. Ako prekršite pravilo, ESLint prikazuje pogrešku, a kôd se čak ni ne prevede - pa to nije moguće zanemariti ako ne onemogućite pravilo.
Linteri se mogu koristiti za provođenje standarda pisanjem prilagođenih pravila. Ali također možete koristiti unaprijed izrađene ESLint konfiguracije koje su uspostavile velike tehnološke tvrtke kako bi pomogli razvojnim programerima da steknu naviku pisanja čistog koda.
Ovdje možete pogledati Googleovu ESLint konfiguraciju - ona mi je draža.
ESLint vam pomaže da se naviknete na najbolje prakse, ali to nije jedina njegova prednost. ESLint vas također upozorava na moguće greške / pogreške u vašem kodu kako biste mogli izbjeći uobičajene pogreške.
Bonus - CI / CD (CircleCI)
Kontinuirana integracija / razvoj stekla je veliku popularnost posljednjih godina jer su mnoge tvrtke usvojile agilne principe.
Alati poput Jenkinsa i CircleCI omogućuju vam automatizaciju postavljanja i testiranja vašeg softvera tako da se možete češće i pouzdanije implementirati bez da sami prolazite kroz teške i sklone pogreškama postupke izrade.
Ovdje spominjem CircleCI kao proizvod jer je besplatan i često se koristi u JavaScript projektima. Također je prilično jednostavan za korištenje.
Pogledajmo primjer: Recimo da imate implementacijski / QA poslužitelj i vaše Git spremište. Želite rasporediti svoje promjene na vašem implementacijskom / QA poslužitelju, pa je ovdje primjer postupka:
- Pritisnite promjene na Git
- Spojite se na poslužitelj
- Stvorite Docker spremnik i pokrenite ga
- Povucite promjene na poslužitelj, preuzmite sve ovisnosti (npm install)
- Pokrenite testove kako biste bili sigurni da ništa nije slomljeno
- Upotrijebite alat poput ESLint / Sonar kako biste osigurali kvalitetu koda
- Spojite kod ako je sve u redu
Uz pomoć CircleCI možete automatski izvršiti sve ove operacije. Možete ga postaviti i konfigurirati da radi sve gore navedene operacije kad god pritisnete promjenu na Git. Odbacit će guranje ako nešto pođe po zlu, na primjer neuspjeli test.
Neću ulaziti u detalje kako konfigurirati CircleCI jer je ovaj članak više o "Zašto?" svakog alata. Ali ako ste zainteresirani za učenje više i to na djelu, možete pogledati ovu seriju vodiča.
Zaključak
Svijet JavaScript brzo se razvija, a novi alati svake godine stječu popularnost.
Na ovu promjenu lako je reagirati samo učenjem korištenja alata - često smo prezauzeti da bismo si odvojili vrijeme i razmislili o razlogu zašto je taj alat postao popularan ili koji problem rješava.
U ovom sam članku odabrao alate za koje smatram da su najpopularniji i podijelio svoja razmišljanja o njihovom značaju. Također sam te želio natjerati da razmišljaš o problemima koje oni rješavaju, a ne samo o pojedinostima kako ih koristiti.
Ako vam se svidio članak, možete pogledati i pretplatiti se na moj blog na kojem pokušavam često pisati. Također, javite mi što mislite komentarišući kako bismo mogli mozgati ili mi možete reći koje druge alate volite koristiti :)