Végül értelmet nyertem a front end build eszközökkel. Te is.

A front end build eszközök még a hozzám hasonló tapasztalt fejlesztők számára is zavaróak lehetnek. A megoldás az, hogy megértsük, hogyan működnek - és működnek együtt - fogalmi szinten.

Ez a cikk bemutatja véleményemet a front end build eszközök értelmezéséhez. Ahelyett, hogy belemerülnék a kódba, végigvezetem a mentális modellemen, hogy hogyan működnek ezek az eszközök és mit teljesítenek.

Ne ijedjen meg a technika állásától

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch ... annyi front-end build eszköz van ott, hogy lehetetlennek tűnik a lépést tartani.

A kulcs nem félelmetes. Mindezeket a projekteket úgy tervezték, hogy megkönnyítsék az életedet.

Ahhoz, hogy megértse, mit, miért és hogyan használnak ezek az eszközök, csak meg kell értenie néhány fogalmat.

1. koncepció - Az építőeszközök alapvető kettőssége a „telepítés és csinálás”

A Build eszközök két dolgot tesznek:

  1. Telepítse a dolgokat
  2. Dolgokat csinálni

Az első kérdés, amelyet feltesz magának, amikor szembesül egy új építési eszközzel:

Az olyan eszközök „telepítése”, mint az npm, a Bower és a Yeoman, nagyjából bármit telepíthet. Telepíthetnek olyan front-end könyvtárakat, mint az Angular.js vagy a React.js. Telepíthetnek szervereket a fejlesztői környezethez. Telepíthetnek tesztkönyvtárakat. Sőt, segítenek más elülső felépítő eszközök telepítésében is.

Röviden: a legtöbb olyan kóddal kapcsolatos dolgot telepítenek, amelyekre gondolhat.

Az olyan „csináló” eszközök, mint a Grunt, a Webpack, a Require.js, a Brunch és a Gulp, sokkal bonyolultabbak. A „csinálás” eszközök célja a webes fejlesztés összes menial és hibára hajlamos feladatának automatizálása. A tetteket néha „feladatoknak” nevezik.

E „feladatok” elvégzéséhez gyakran saját csomagok és beépülő modulok ökoszisztémáját használják. Minden eszköz különböző módon írja a feladatokat. Ezek az eszközök szintén nem ugyanazt csinálják. Egyes „csináló” eszközök megpróbálnak kezelni minden feladatot (Grunt, Gulp stb.). Mások egy dologra koncentrálnak, például a Javascript-függőségek kezelésére (Browserify, Require.js stb.).

Néha végül ezek közül az eszközök közül többet használ ugyanabban a projektben.

Íme egy rövid lista azokról a „feladatokról”, amelyeket automatizáltam az alábbi „csinálási” eszközökkel:

  1. Szöveg szövegének cseréje egy fájlban
  2. Mappák létrehozása és fájlok áthelyezése ezekbe a mappákba
  3. Az egység tesztjeinek futtatása egyetlen parancs segítségével
  4. A böngészőm frissítése fájl mentésekor
  5. Az összes JavaScript-fájlomat egybe, az összes CSS-fájlt pedig egybe egyesítem
  6. Összeillesztett JavaScript és CSS fájljaim kicsinyítése
  7. A címkék elhelyezésének módosítása egy html oldalon

Miután megértette, hogy az eszközök telepítenek vagy csinálnak dolgokat, kategorizálásuk sokkal könnyebbé válik:

2. koncepció - Az összes építési eszköz nagyszüle a Node és az npm

A Node és az npm telepíti és futtatja ezeket a buildeszközöket, így mindig van nyomuk a projektben. Emiatt sok fejlesztő megpróbálja a lehető legtöbbet használni ezt a két eszközt, mielőtt további eszköz telepítéséhez folyamodna.

A csomópont és az NPM a „felépítés” és a „megcsinálás” kettősségébe esik. A csomópont a „do” eszköz, az npm pedig a „install” eszköz.

Az npm olyan könyvtárakat telepíthet, mint az Angular.js vagy a React.js. Szervert is telepíthet az alkalmazás helyi futtatásához fejlesztés céljából. Még eszközöket is telepíthet olyan dolgok végrehajtására, mint a kód tömörítése.

A Node viszont olyan dolgokat „csinál” helyetted, mint a JavaScript-fájlok, a szerverek futtatása és még sok minden más.

Ha szüksége van egy helyre a tanulás megkezdéséhez, kezdje a Node + npm paranccsal, és maradjon ott egy ideig. Amikor a projekt elég nagy lesz, eléri azokat a határokat, amelyeket a Node és az npm automatizálhat az Ön számára. Ezen a ponton szervesen beépíthet egy másik építési eszközt.

3. koncepció - A build csak az alkalmazás gyártásra kész verziója

A fejlesztők gyakran külön fájlokra bontják a JavaScriptet és a CSS-t. A különálló fájlok lehetővé teszik, hogy több moduláris kóddarabot írjon, amelyek egyetlen dolgot végeznek. Az egy dolgot végrehajtó fájlok csökkentik a kognitív terhelést. (Ha úgy gondolja, hogy a különálló fájlok zavaróbbak, mint egy nagy fájl, próbáljon 5000 soros fájlban dolgozni, és gyorsan meggondolja magát?)

De amikor eljött az ideje, hogy az alkalmazást éles verzióba helyezze, több JavaScript vagy CSS fájl birtoklása nem ideális. Amikor egy felhasználó meglátogatja az Ön webhelyét, minden fájljához további HTTP-kérésekre lesz szükség, ami lassabbá teszi a webhely betöltését.

Tehát ennek orvoslásához létrehozhat egy „buildet” az alkalmazásunkból, amely az összes CSS-fájlt egy fájlba egyesíti, és ugyanezt teszi a JavaScript-szel. Így minimalizálja a felhasználó által megszerzett fájlok számát és méretét. A „build” létrehozásához használjon egy „build eszközt”.

Az alábbiakban egy fejlesztés alatt álló alkalmazás képernyőképe látható. Figyelje meg, hogy van 5 címke és 3 címke? Ha a bal oldalra néz, észreveszi, hogy a FEJLESZTÉS mappa 10 fájlt tartalmaz?

Az alábbiakban ugyanaz az alkalmazás található, miután egy építő eszköz beváltotta varázsát.

Figyelje meg, hogy van csak egyetlen szkriptcímkénk és egyetlen linkcímkénk? És most a PRODUCTION mappának csak 4 fájlja van, a DEVELOPMENT mappa 10-jéhez képest.

Az alkalmazás ugyanaz a vonal. Éppen most egy tömör kis csomagba tömörítettük, amit „buildnek” hívunk.

Lehet, hogy vajon miért éri meg egy build egyáltalán, ha csak annyit tesz, hogy néhány millimásodpercnyi töltési időt spórol meg a felhasználóival. Nos, ha csak magának vagy néhány embernek készít egy oldalt, akkor nem kell ezzel bajlódnia. A projekt felépítésének létrehozása csak nagy forgalmú webhelyek (vagy olyan webhelyek esetében szükséges, amelyek remélhetőleg hamarosan nagy forgalmat fognak elérni?).

Ha csak fejlesztést tanul, vagy csak nagyon alacsony forgalmú webhelyeket készít, akkor a verzió létrehozása nem éri meg az Ön idejét.

4. koncepció - A „telepítés” és a „megtétel” közötti vonalak elmosódhatnak

Egyetlen eszköz sem csak az egyiket végzi, a másikat nem. Mindannyian csinálják a „telepítés” és a „megtétel” keverékét. De általában egy eszköz általában többet csinál az egyikből, mint a másik.

Néha egy „telepítés” eszköz futtatja a fájlokat. npm gyakran teszi ezt. Az npm parancsokat és parancsfájlokat is képes futtatni - nem csak fájlokat telepíteni. Egy olyan eszköz, mint a Yeoman, előre beépített kazánalkalmazásokat telepít a számítógépére, de szükség szerint dinamikusan generál új fájlokat is, elhomályosítva a telepítés és elvégzés közötti határt.

5. koncepció - Nincs egyetlen megfelelő eszközkombináció

A használt eszközök kombinációja teljesen rajtad múlik.

Dönthet úgy, hogy semmilyen eszközt nem használ. Csak ne feledje, hogy a szerverek másolása, beillesztése, tömörítése, indítása és minden egyéb dolog gyorsan elsöprővé válhat.

Vagy egyszerűen használhatja a Node-ot és az npm-et további eszközök nélkül. Ez nagyszerű kezdőknek, de amint növekszik a projekted, túlságosan kézikönyvszerűnek tűnik egy folyamatnak.

Vagy dönthet úgy, hogy használ néhány más eszközt a Node és az npm tetején a projektben. Tehát az alkalmazás a Node + npm-et fogja használni, mint a magját, majd a Grunt + Bower vagy a Webpack vagy a Gulp + Bower alkalmazást.

Ilyen eszközök kombinációjának használatával a Node + npm tetején számos feladatot automatizálhat a projektben. Az Ön által fizetett ár az, hogy ezeknek az eszközöknek meredek a tanulási görbéje.

6. koncepció - A Build eszközök meredek tanulási görbével rendelkeznek, ezért csak azt tanulja meg, ami szükséges

Az alkalmazás létrehozása elég nehéz. Lehet, hogy új nyelvvel vagy új keretrendszerrel dolgozik. Vagy valóban trükkös üzleti logikája van. Tehát egy építési eszköz beépítése további bonyolultsági réteget adhat a projektjének. Különösen igaz ez akkor, amikor egy projektről valaki más írta a build eszközhöz társított kódot.

Azt tanácsolom, hogy csak azt tanulja meg, amire szüksége van a munkája elvégzéséhez, és semmi mást.

A legjobb módja az új dolgok megtanulásának az, ha van egy valós feladata, amelyet teljesítenie kell. Például ne tanulja meg, hogyan kell fájlokat másolni a Grunt alkalmazásával. Ehelyett várja meg, amíg a projektjének valóban szüksége van erre, majd találja ki.

Ne feledje: az idő előtti bonyolultság lelassít.

7. koncepció - Az összes építőeszköznek ugyanaz a célja: boldoggá tenni sok alányos feladat automatizálásával

Teljes mértékben kihasználja a build eszközét, amikor eléri az úgynevezett „build tool nirvana” -ot. Ekkor egy fájl mentése vagy egyetlen parancs futtatása után rengeteg feladat történik „automatikusan” az Ön számára.

Ha a buildeszköz még mindig megköveteli, hogy manuálisan áthelyezze a fájlokat, megváltoztassa az értékeket vagy parancsokat futtasson egy új build létrehozásához, akkor még nem érte el a build eszköz nirvanáját.

A build eszközök egyik legnagyobb előnye, hogy csak egy fájl mentésével kiválthatja az alkalmazás új verzióját, és elküldheti azt a böngészőjének. Ez drámai módon felgyorsíthatja a kezelőfelület fejlesztési munkafolyamatát.

Tehát mennyi erőfeszítést kell tennie a build eszköz konfigurálásához és beállításához? Egyszerű: hagyd abba, amikor elégedett vagy azzal, amit érted tesz.

8. koncepció - Nem csak te. A dokumentáció gyakran szörnyű.

Nem te vagy, ígérem. Sok ilyen eszköz esetében a dokumentáció elég hiányos. Néha nehéz kitalálni, hogyan kell elvégezni az alapvető feladatokat.

Ne feledje, hogy nagyon kevés előre definiált recept van a build eszközökhöz. Látni fogja, hogy az emberek ugyanazon eredményeket kapják, nagyon különböző módon - néha mind ugyanazon StackOverflow kérdésre adott válaszként!

Bár ez bosszantó, egyúttal lehetőséget kínál arra, hogy hajlítsa meg a kódoló izmait, és megvalósítson valami kreatív megoldást.

Végül is nem ezért csináljuk ezt?

Köszönöm, hogy elolvasta ezt! Remélhetőleg ez a néhány pont kevésbé zavaró élményt nyújt a megközelítő építőeszközök számára. Ha nem, örömmel tisztázok minden kérdést (vagy kijavítom az itt található hibákat), tweeteljen nekem @Roneesh!

És természetesen, ha tetszett, amit olvastál, kérlek, mindenképp kattints alább és oszd meg barátaiddal. Íróként ez számomra a világot jelenti!