Népszerű front end fejlesztő eszközök, amelyeket tudnia kell

Ha még csak most kezdi a JavaScript használatát, akkor elképesztő lehet az azoknak az eszközöknek és technológiáknak a száma, amelyekről hallani fog. És nehezen tudja eldönteni, hogy valójában melyik eszközökre van szüksége.

Vagy talán ismeri az eszközöket, de nem sokat gondolkodott azon, hogy milyen problémákat oldanak meg, és milyen nyomorúságos lenne az élete segítségük nélkül.

Úgy gondolom, hogy a szoftverfejlesztőknek és a fejlesztőknek fontos megérteniük a mindennap használt eszközök célját.

Ezért ebben a cikkben az NPM-et, a Babelt, a Webpack-ot, az ESLint-et és a CircleCI-t nézem meg, és megpróbálom tisztázni az általuk megoldott problémákat és megoldási módjaikat.

NPM

Az NPM az alapértelmezett csomagkezelő a JavaScript fejlesztéséhez. Segít megtalálni és telepíteni a programjaiban használható csomagokat (programokat).

Az " npm init " paranccsal egyszerűen hozzáadhat egy projekthez npm-et . A parancs futtatásakor létrehoz egy " package.json " fájlt az aktuális könyvtárban. Ez az a fájl, ahol a függőségei fel vannak sorolva, és az npm a projekt személyi igazolványaként tekint rá.

Függőséget hozzáadhat az " npm install (package_name) " paranccsal.

A parancs futtatásakor az npm a távoli nyilvántartásba megy, és ellenőrzi, hogy van-e egy csomag, amelyet a csomag neve azonosít. Ha megtalálja, egy új függőségi bejegyzés kerül hozzáadásra a package.json fájlhoz, és a csomag a belső függőségekkel együtt letölthető a rendszerleíró adatbázisból.

A letöltött csomagokat vagy függőségeket a "node_modules" mappában találja meg . Csak ne feledje, hogy általában elég nagy lesz - ezért feltétlenül adja hozzá a .gitignore fájlhoz .

A JavaScript könyvtárak naprakészen tartása - LogRocket Blog

Az NPM nem csak megkönnyíti a csomagok megkeresésének és letöltésének folyamatát, hanem megkönnyíti az együttmûködést a projekten.

NPM nélkül nehéz lenne kezelni a külső függőségeket. Ha csatlakozik egy meglévő projekthez, kézzel kell letöltenie minden függőség megfelelő verzióját. És ez igazi szóváltás lenne.

Az npm segítségével egyszerűen futtathatja az "npm install" alkalmazást, és az összes külső függőséget telepíti az Ön számára. Ezután bármikor újra futtathatja, amikor valaki a csapatából hozzáad egy újat.

Bábel

A Babel egy JavaScript fordító vagy transzpiler, amely az ECMAScript 2015+ kódot régebbi JavaScript motorok számára érthető kódgá alakítja.

A Babel a legnépszerűbb Javascript-fordító, és az olyan keretrendszerek, mint a Vue és a React, alapértelmezés szerint használják. Ennek ellenére a fogalmak, amelyekről itt fogunk beszélni, nem csak a Bábellel kapcsolatosak, és minden JavaScript-fordítóra vonatkoznak.

Miért van szükség fordítóra?

"Miért van szükség fordítóra, a JavaScript nem értelmezett nyelv?" megkérdezheti, hogy ismeri-e a lefordított és értelmezett nyelvek fogalmait.

Igaz, hogy valamit általában "fordítónak" hívunk, ha az ember által olvasható kódunkat lefuttatja a CPU által érthető futtatható bináris fájlra. De itt nem erről van szó.

A transzpiler kifejezés megfelelőbb lehet, mivel egy fordító részhalmaza: A transzpilerek olyan fordítók, amelyek lefordítják a kódot egy programozási nyelvről egy másik nyelvre (ebben a példában a modern JS-ről egy régebbi verzióra).

A JavaScript a böngészők nyelve. De van egy probléma a böngészőkkel: Keresztkompatibilitás. A JavaScript-eszközök és maga a nyelv gyorsan fejlődik, és sok böngésző nem képes megfelelni ennek a tempónak. Ez kompatibilitási problémákat eredményez.

Valószínűleg a JavaScript legújabb verzióiban szeretne kódot írni, hogy használhassa annak új szolgáltatásait. De ha a böngésző, amelyet a kód futtat, nem implementálta néhány új funkcióját a JavaScript-motorjában, a kód nem fog megfelelően végrehajtani az adott böngészőben.

Ez összetett probléma, mert minden böngésző más-más sebességgel hajtja végre a funkciókat. És még akkor is, ha megvalósítják ezeket az új funkciókat, mindig lesznek olyan emberek, akik a böngészőjük régebbi verzióját használják.

Tehát mi van akkor, ha használni szeretné a legújabb funkciókat, de azt is szeretné, ha a felhasználók problémamentesen megnéznék ezeket az oldalakat?

A Bábel előtt polyfill-eket használtunk bizonyos kódok régebbi verzióinak futtatására, ha a böngésző nem támogatta a modern funkciókat. És amikor a Bábelt használja, a polifilleket használja a kulisszák mögött, és nem követeli meg semmit.

Hogyan működnek a transzpilerek / fordítók?

A Bábel a többi fordítóhoz hasonlóan működik. Elemzési, átalakítási és kódgenerációs szakaszokkal rendelkezik.

Itt nem fogunk elmélyülni a működésében, mivel a fordítók bonyolult dolgok. De a fordítók működésének alapjainak megértéséhez nézze meg a-super-tiny-compiler projektet. Bábel hivatalos dokumentációjában is megemlítik, hogy hasznos megérteni Bábel működését.

Általában megúszhatjuk a Bábel beépülő moduljainak és előre beállított lehetőségeinek ismeretét. A beépülő modulok azok a kivonatok, amelyeket a Babel a kulisszák mögött használ, hogy a kódot a JavaScript régebbi verzióihoz fordítsa. Az egyes modern funkciókat plugineknek tekintheti. Erre a linkre kattintva megtekintheti a bővítmények teljes listáját.

Az előre beállított elemek pluginek gyűjteményei. Ha a Babelt egy React projekthez akarja használni, használhatja az előre elkészített @ babel / preset-react alkalmazást, amely tartalmazza a szükséges bővítményeket.

Bővítményeket a Babel konfigurációs fájl szerkesztésével adhat hozzá.

Szüksége van Babelre a React alkalmazásához?

A React használatához fordítóra van szükség, mert a React kód általában JSX-t használ, és a JSX-t le kell fordítani. A könyvtár az ES6 szintaxis használatának koncepciójára is épül.

Szerencsére, amikor létrehoz egy projektet a create-react-app alkalmazással , akkor a Babel már be van állítva, és általában nem kell módosítania a konfigurációt.

Példák a fordító működésére

A Bábel webhelyének van online fordítója, és nagyon hasznos megérteni a működését. Csak csatlakoztasson néhány kódot és elemezze a kimenetet.

Webpack

A Webpack egy statikus modulcsomagoló. Új projekt létrehozásakor manapság a legtöbb JavaScript-keretrendszer / könyvtár használja a dobozból.

Ha a "statikus modulcsomagoló" kifejezés zavarónak tűnik, olvassa tovább, mert van néhány remek példám, amely segít megérteni.

Miért van szükség csomagolóra?

A webalkalmazásokban sok fájlra lesz szüksége. Ez különösen igaz az egyoldalas alkalmazásokra (React, Vue, Angular), amelyek mindegyikének megvannak a maga függőségei.

A függőség alatt azt értem, hogy egy import utasítás - ha az A fájlnak a B fájlt kell importálnia a megfelelő futtatáshoz, akkor azt mondjuk, hogy A B-től függ.

Kis projektekben a modulfüggőségeket címkékkel kezelheti . De amikor a projekt nagyobb lesz, a függőségeket gyorsan nehéz kezelni.

Talán ennél is fontosabb, hogy a kódot több fájlra osztva a webhely lassabban töltődik be. Ennek oka, hogy a böngészőnek több kérést kell elküldenie egy nagy fájlhoz képest, és a webhelye rengeteg sávszélességet kezd el fogyasztani a HTTP fejlécek miatt.

Mi, fejlesztőként azt akarjuk, hogy kódunk moduláris legyen. Több fájlra osztjuk, mert nem akarunk több ezer soros fájllal dolgozni. Ennek ellenére azt is szeretnénk, ha webhelyeink teljesítőképesek lennének, kevesebb sávszélességet használnának és gyorsan betöltődnének.

Tehát most meglátjuk, hogyan oldja meg a Webpack ezt a problémát.

Hogyan működik a Webpack

Amikor Bábelről beszéltünk, megemlítettük, hogy a JavaScript-kódot át kell tölteni a telepítés előtt.

De a Bábellel való fordítás nem az egyetlen művelet, amelyre a projekt telepítése előtt van szükség.

Általában fel kell rontania, át kell töltenie, össze kell állítania a SASS-ot vagy az SCSS-t CSS-be, ha bármilyen előfeldolgozót használ, lefordítja a TypeScript-t, ha használja ... és mint láthatja, ez a lista könnyen hosszú lehet.

Nem kíván minden telepítés előtt foglalkozni azokkal a parancsokkal és műveletekkel. Nagyon jó lenne, ha lenne olyan eszköz, amely mindezt a megfelelő sorrendben és módon tette meg az Ön számára.

Jó hír - van: Webpack.

A Webpack olyan szolgáltatásokat is kínál, mint egy helyi szerver, amely gyors újratöltéssel rendelkezik (hot modul cserének hívják), hogy jobbá tegye a fejlesztési élményt.

Szóval mi a forró újratöltés? Ez azt jelenti, hogy amikor elmenti a kódot, azt lefordítják és telepítik a számítógépen futó helyi HTTP szerverre. És amikor egy fájl megváltozik, üzenetet küld a böngészőjének, így nem is kell frissítenie az oldalt.

Ha valaha is használta az "npm run serve", az "npm start" vagy az "npm run dev" elemeket, ezek a parancsok a kulisszák mögött is elindítják a Webpack dev szerverét.

A Webpack a projekt (index) belépési pontjától indul, és létrehozza a fájl absztrakt szintaxisfáját. Úgy gondolhat rá, mint a kód elemzésére. Ezt a műveletet a fordítókban is elvégzik, amelyek ezt követően rekurzív módon keresik az importálási utasításokat a függőségek grafikonjának előállításához.

Ezután átalakítja a fájlokat IIFE-kké, hogy modulálja őket (ne felejtsük el, hogy a kód elhelyezése egy függvényben korlátozza annak hatókörét). Ezzel modulálják a fájlokat, és megbizonyosodnak arról, hogy a változók és függvények nem férnek hozzá más fájlokhoz.

E művelet nélkül olyan lenne, mintha az importált fájl kódját másolnánk és beillesztenénk, és ennek a fájlnak ugyanaz lenne a hatóköre.

A Webpack sok más speciális dolgot végez a színfalak mögött, de ez elég az alapok megértéséhez.

Bónusz - ESLint

A kódminőség fontos, és elősegíti a projektek karbantarthatóságát és könnyen bővíthetőségét. Míg a legtöbb fejlesztő felismeri a tiszta kódolás jelentőségét, időnként hajlamosak vagyunk figyelmen kívül hagyni a hosszú távú következményeket a határidők nyomására.

Sok vállalat dönt a kódolási szabványokról, és arra ösztönzi a fejlesztőket, hogy tartsák be ezeket a szabványokat. De hogyan lehet megbizonyosodni arról, hogy kódja megfelel-e a szabványoknak?

Nos, használhat olyan eszközt, mint az ESLint, a szabályok betartatására a kódban. Például létrehozhat egy szabályt a pontosvesszők használatának kikényszerítésére vagy letiltására a JavaScript-kódjában. Ha megszegi a szabályt, az ESLint hibát mutat, és a kód nem is fordul le - így ezt nem lehet figyelmen kívül hagyni, hacsak nem tiltja le a szabályt.

A lint felhasználható a szabályok betartatására egyedi szabályok megírásával. De felhasználhatja a nagy technológiai vállalatok által létrehozott, előre elkészített ESLint konfigurációkat is, hogy a fejlesztők megszokhassák a tiszta kód írását.

Itt megnézheti a Google ESLint konfigurációját - ezt szeretem.

Az ESLint segít megszokni a bevált gyakorlatokat, de ez nem csak az előnye. Az ESLint figyelmeztet a kód hibáira és hibáira is, így elkerülheti a gyakori hibákat.

Bónusz - CI / CD (CircleCI)

A folyamatos integráció / fejlesztés nagy népszerűségre tett szert az elmúlt években, mivel sok vállalat elfogadta az agilis elveket.

Az olyan eszközök, mint a Jenkins és a CircleCI, lehetővé teszik a szoftver telepítésének és tesztelésének automatizálását, így gyakrabban és megbízhatóbban telepítheti magát anélkül, hogy egyedül át kellene mennie a nehéz és hibára hajlamos építési folyamatokon.

Termékként a CircleCI-t említem, mert ingyenes és gyakran használják a JavaScript projektekben. Használata is elég egyszerű.

Nézzünk át egy példát: Tegyük fel, hogy van telepítési / minőségbiztosítási kiszolgálója és Git-tárolója. A változtatásokat telepítési / minőségbiztosítási kiszolgálóra kívánja telepíteni, ezért itt van egy példa:

  1. Tolja a változtatásokat Git-re
  2. Csatlakozzon a szerverhez
  3. Hozzon létre egy Docker-tárolót, és futtassa azt
  4. Húzza a változásokat a szerverre, töltse le az összes függőséget (npm install)
  5. Futtassa a teszteket, hogy megbizonyosodjon arról, hogy semmi sem sérült meg
  6. Használjon olyan eszközt, mint az ESLint / Sonar a kódminőség biztosításához
  7. Egyesítse a kódot, ha minden rendben van

A CircleCI segítségével ezeket a műveleteket automatikusan elvégezheti. Beállíthatja és konfigurálhatja a fenti műveletek elvégzésére, amikor Git-re változtat. Elutasítja a lökést, ha valami rosszul megy, például egy sikertelen teszt.

Nem térek ki a CircleCI konfigurálásának részleteire, mert ez a cikk inkább a "Miért?" minden eszköz. De ha érdekel többet megtudni és működés közben látni, akkor megnézheti ezt az oktatósorozatot.

Következtetés

A JavaScript világa gyorsan fejlődik, és az új eszközök minden évben egyre népszerűbbek.

Könnyű reagálni erre a változásra, ha csak megtanuljuk használni az eszközt - gyakran túl elfoglaltak vagyunk ahhoz, hogy időt szánjunk rá, és átgondoljuk, miért vált népszerűvé az eszköz, vagy hogy milyen problémát old meg.

Ebben a cikkben azokat az eszközöket választottam, amelyek szerintem a legnépszerűbbek, és megosztottam a gondolataikat a jelentőségükről. Szerettem volna arra is gondolni, hogy gondoljanak az általuk megoldott problémákra, és ne csak azok használatának részleteire.

Ha tetszett a cikk, megnézheted és feliratkozhatsz a blogomra, ahol megpróbálok gyakran írni. Ezenkívül tudassa velem véleményét kommentárral, hogy ötletelhessünk, vagy elmondhatja, milyen egyéb eszközöket szeret még használni :)