Populāri priekšgala izstrādes rīki, kas jums jāzina

Ja jūs tikai sākat darbu ar JavaScript, rīku un tehnoloģiju skaits, par kuriem jūs dzirdēsiet, var būt milzīgs. Un jums var būt grūti izlemt, kuri rīki jums patiešām ir nepieciešami.

Vai varbūt jūs esat iepazinies ar rīkiem, taču neesat daudz domājis, kādas problēmas tie risina un cik nožēlojama būtu jūsu dzīve bez viņu palīdzības.

Es uzskatu, ka programmatūras inženieriem un izstrādātājiem ir svarīgi saprast katru dienu izmantoto rīku mērķi.

Tāpēc šajā rakstā es aplūkoju NPM, Babel, Webpack, ESLint un CircleCI un mēģinu noskaidrot problēmas, kuras viņi risina, un to, kā tās risina.

NPM

NPM ir noklusējuma pakotņu pārvaldnieks JavaScript izstrādei. Tas palīdz atrast un instalēt paketes (programmas), kuras varat izmantot savās programmās.

Jūs varat pievienot npm projektam, vienkārši izmantojot komandu " npm init ". Palaidot šo komandu, tā pašreizējā direktorijā izveido failu " package.json ". Šis ir fails, kurā ir norādītas jūsu atkarības, un npm to skata kā projekta ID karti.

Atkarību varat pievienot ar komandu " npm install (package_name) ".

Palaidot šo komandu, npm pāriet uz attālo reģistru un pārbauda, ​​vai ir pakete, kas identificēta ar šo pakotnes nosaukumu. Ja tas tiek atrasts, jūsu package.json tiek pievienots jauns atkarības ieraksts un pakotne ar iekšējām atkarībām tiek lejupielādēta no reģistra.

Lejupielādētās paketes vai atkarības varat atrast mapē "mezglu_moduļi" . Vienkārši paturiet prātā, ka tas parasti kļūst diezgan liels - tāpēc noteikti pievienojiet to .gitignore .

Kā atjaunināt JavaScript bibliotēkas - LogRocket emuārs

NPM ne tikai atvieglo pakotņu atrašanas un lejupielādes procesu, bet arī atvieglo kopīgu darbu pie projekta.

Bez NPM būtu grūti pārvaldīt ārējās atkarības. Pievienojoties esošam projektam, jums būs jālejupielādē katras atkarības pareizās versijas. Un tas būtu īsts apgrūtinājums.

Ar npm palīdzību jūs varat vienkārši palaist "npm install", un tas jums instalēs visas ārējās atkarības. Tad jūs varat to vienkārši palaist vēlreiz, kad kāds no jūsu komandas pievieno jaunu.

Bābele

Babel ir JavaScript kompilators vai transpilers, kas ECMAScript 2015+ kodu pārveido kodā, kuru var saprast vecāki JavaScript dzinēji.

Bābele ir vispopulārākais Javascript kompilators, un tādi ietvari kā Vue un React to izmanto pēc noklusējuma. Tas nozīmē, ka jēdzieni, par kuriem mēs šeit runāsim, nav saistīti tikai ar Bābeli un tie tiks piemēroti jebkuram JavaScript kompilatoram.

Kāpēc jums ir nepieciešams kompilators?

"Kāpēc mums vajadzīgs kompilators, vai JavaScript nav interpretēta valoda?" jūs varat jautāt, vai esat iepazinies ar apkopoto un interpretēto valodu jēdzieniem.

Ir taisnība, ka mēs parasti kaut ko saucam par "kompilatoru", ja tas pārveido mūsu lasāmo kodu izpildāmā binārā formātā, kuru var saprast CPU. Bet tas tā nav šajā gadījumā.

Termins transpiler var būt piemērotāks, jo tas ir kompilatora apakškopa: Transpileri ir kompilatori, kas tulko kodu no programmēšanas valodas uz citu valodu (šajā piemērā no mūsdienu JS uz vecāku versiju).

JavaScript ir pārlūkprogrammu valoda. Bet ir problēma ar pārlūkiem: savstarpēja savietojamība. JavaScript rīki un pati valoda strauji attīstās, un daudzas pārlūkprogrammas nespēj sasniegt šo tempu. Tā rezultātā rodas saderības problēmas.

Jūs, iespējams, vēlaties rakstīt kodu jaunākajās JavaScript versijās, lai varētu izmantot tā jaunās funkcijas. Bet, ja pārlūks, kurā darbojas jūsu kods, nav ieviesis dažas jaunās funkcijas savā JavaScript dzinējā, kods šajā pārlūkprogrammā netiks pareizi izpildīts.

Šī ir sarežģīta problēma, jo katrs pārlūks funkcijas ievieš atšķirīgā ātrumā. Pat ja viņi ievieš šīs jaunās funkcijas, vienmēr būs cilvēki, kuri izmanto vecāku sava pārlūka versiju.

Ko darīt, ja vēlaties izmantot jaunākās funkcijas, bet arī vēlaties, lai lietotāji bez problēmām skatītu šīs lapas?

Pirms Bābeles mēs izmantojām vairāku aizpildījumu, lai palaistu vecākas noteikta koda versijas, ja pārlūks neatbalsta mūsdienu funkcijas. Un, kad jūs izmantojat Bābeli, tas aizkulisēs izmanto polifilmas un neprasa neko darīt.

Kā darbojas transpileri / kompilatori?

Bābele darbojas līdzīgi citiem sastādītājiem. Tam ir parsēšanas, pārveidošanas un kodu ģenerēšanas posmi.

Mēs šeit neiedziļināsimies, kā tas darbojas, jo kompilatori ir sarežģītas lietas. Bet, lai saprastu kompilatoru darbības pamatus, varat apskatīt kompilatora-super-tiny-compiler projektu. Tas ir minēts arī Bābeles oficiālajā dokumentācijā kā noderīgs, lai izprastu Bābeles darbību.

Parasti mēs varam atbrīvoties, zinot par Bābeles spraudņiem un sākotnējiem iestatījumiem. Spraudņi ir fragmenti, kurus Bābele izmanto aizkulisēs, lai apkopotu jūsu kodu vecākām JavaScript versijām. Katru mūsdienu funkciju varat uzskatīt par spraudni. Jūs varat doties uz šo saiti, lai pārbaudītu pilnu spraudņu sarakstu.

Presets ir spraudņu kolekcijas. Ja vēlaties izmantot Babel React projektam, varat izmantot iepriekš sagatavoto @ babel / preset-react, kurā ir nepieciešamie spraudņi.

Spraudņus var pievienot, rediģējot Bābeles konfigurācijas failu.

Vai jūsu React lietotnei ir nepieciešama Bābele?

Lai reaģētu, jums ir nepieciešams kompilators, jo React kods parasti izmanto JSX un JSX ir jāapkopo. Arī bibliotēka ir veidota pēc ES6 sintakses izmantošanas koncepcijas.

Par laimi, izveidojot projektu ar create-reaģēt-app , tam ir jau konfigurēts Bābelis, un konfigurācija parasti nav jāmaina.

Sastādītāja darbības piemēri

Bābeles vietnē ir tiešsaistes kompilators, un ir ļoti noderīgi saprast, kā tā darbojas. Vienkārši pievienojiet kodu un analizējiet izvadi.

Webpack

Webpack ir statiskā moduļa pakete. Kad izveidojat jaunu projektu, lielākā daļa JavaScript ietvaru / bibliotēku mūsdienās to izmanto ārpus kastes.

Ja frāze "statiskā moduļa komplektētājs" izklausās mulsinoši, turpiniet lasīt, jo man ir daži lieliski piemēri, kas jums palīdzēs saprast.

Kāpēc jums ir nepieciešams saiņotājs?

Tīmekļa lietotnēs jums būs daudz failu. Tas jo īpaši attiecas uz vienas lapas lietojumprogrammām (React, Vue, Angular), no kurām katrai ir savas atkarības.

Tas, ko es domāju ar atkarību, ir paziņojums par importu - ja failam A ir nepieciešams importēt failu B, lai tas darbotos pareizi, tad mēs sakām, ka A ir atkarīgs no B.

Mazos projektos moduļu atkarības var apstrādāt ar tagiem. Bet, kad projekts kļūst lielāks, atkarības ātri kļūst grūti pārvaldāmas.

Varbūt, vēl svarīgāk, koda sadalīšana vairākos failos padara jūsu vietnes ielādi lēnāku. Tas ir tāpēc, ka pārlūkprogrammai ir jānosūta vairāk pieprasījumu, salīdzinot ar vienu lielu failu, un jūsu vietne HTTP galvenes dēļ sāk patērēt daudz joslas platuma.

Mēs kā izstrādātāji vēlamies, lai mūsu kods būtu modulārs. Mēs to sadalām vairākos failos, jo mēs nevēlamies strādāt ar vienu failu ar tūkstošiem līniju. Tomēr mēs vēlamies, lai mūsu vietnes būtu efektīvas, izmantotu mazāku joslas platumu un ātri ielādētos.

Tātad tagad mēs redzēsim, kā Webpack atrisina šo problēmu.

Kā darbojas Webpack

Kad mēs runājām par Bābeli, mēs pieminējām, ka pirms izvietošanas JavaScript kods ir jāpārpilda.

Bet kompilēšana ar Bābeli nav vienīgā operācija, kas jums nepieciešama pirms projekta ieviešanas.

Parasti jums tas ir jāsaskaņo, jāpārpapilē, jāapkopo SASS vai SCSS CSS, ja izmantojat jebkādus priekšapstrādes procesorus, jāapkopo TypeScript, ja to izmantojat ... un, kā redzat, šis saraksts var viegli kļūt garš.

Pirms katras izvietošanas nevēlaties tikt galā ar visām šīm komandām un darbībām. Būtu lieliski, ja būtu kāds rīks, kas visu izdarītu jūsu vietā pareizā secībā un pareizi.

Labās ziņas - ir: Webpack.

Webpack piedāvā arī tādas funkcijas kā vietējais serveris ar karstu pārlādi (viņi to sauc par karstā moduļa nomaiņu), lai uzlabotu jūsu attīstības pieredzi.

Tātad, kas ir karsts pārkraušana? Tas nozīmē, ka ikreiz, kad saglabājat kodu, tas tiek apkopots un izvietots vietējā HTTP serverī, kas darbojas jūsu datorā. Ikreiz, kad fails mainās, tas nosūta ziņojumu jūsu pārlūkprogrammai, tāpēc jums pat nav nepieciešams atsvaidzināt lapu.

Ja esat kādreiz izmantojis “npm run serve”, “npm start” vai “npm run dev”, šīs komandas arī aizkadrā palaiž Webpack dev serveri.

Webpack sākas ar jūsu projekta (rādītāja) ieejas punktu un ģenerē faila abstraktās sintakses koku. Jūs to varat uzskatīt par koda parsēšanu. Šī darbība tiek veikta arī kompilatoros, kuri rekursīvi meklē importēšanas priekšrakstus, lai ģenerētu atkarību diagrammu.

Pēc tam tas pārveido failus IIFE, lai tos modulētu (atcerieties, ka, ievietojot kodu funkcijas iekšpusē, tiek ierobežota tā darbības joma). To darot, viņi modulē failus un pārliecinās, ka mainīgie un funkcijas nav pieejami citiem failiem.

Bez šīs darbības tas būtu tāpat kā kopēt un ielīmēt importētā faila kodu, un šim failam būtu tāda pati darbības joma.

Webpack aizkulisēs veic daudzas citas uzlabotas lietas, taču ar to pietiek, lai saprastu pamatus.

Bonuss - ESLint

Kodu kvalitāte ir svarīga un palīdz uzturēt jūsu projektus uzturējamus un viegli paplašināmus. Lai gan lielākā daļa no mums, izstrādātāji, atzīst tīras kodēšanas nozīmi, mēs dažreiz mēdzam ignorēt ilgtermiņa sekas, pakļaujoties termiņiem.

Daudzi uzņēmumi pieņem lēmumu par kodēšanas standartiem un mudina izstrādātājus ievērot šos standartus. Bet kā jūs varat pārliecināties, ka jūsu kods atbilst standartiem?

Varat izmantot kodu, piemēram, ESLint, lai ieviestu likumā noteiktos noteikumus. Piemēram, varat izveidot kārtulu, lai ieviestu vai neatļautu semikolu lietošanu jūsu JavaScript kodā. Ja jūs pārkāpjat kārtulu, ESLint parāda kļūdu, un kods pat netiek apkopots - tāpēc to nav iespējams ignorēt, ja vien neesat atspējojis kārtulu.

Linters var tikt izmantots, lai ieviestu standartus, rakstot pielāgotus noteikumus. Bet jūs varat arī izmantot iepriekš izveidotas ESLint konfigurācijas, kuras izveidojuši lieli tehnoloģiju uzņēmumi, lai palīdzētu izstrādātājiem pierast rakstīt tīru kodu.

Šeit jūs varat apskatīt Google ESLint konfigurāciju - es dodu priekšroku.

ESLint palīdz jums pierast pie labākās prakses, taču tas nav vienīgais ieguvums. ESLint arī brīdina par iespējamām kļūdām / kļūdām jūsu kodā, lai jūs varētu izvairīties no biežāk pieļautajām kļūdām.

Bonuss - CI / CD (CircleCI)

Pastāvīgā integrācija / attīstība pēdējos gados ir ieguvusi lielu popularitāti, jo daudzi uzņēmumi ir pieņēmuši Agile principus.

Tādi rīki kā Jenkins un CircleCI ļauj automatizēt programmatūras izvietošanu un testēšanu, lai jūs varētu izvietot biežāk un uzticamāk, paši neveicot sarežģītus un kļūdām raksturīgus būvniecības procesus.

Es šeit minēju CircleCI kā produktu, jo tas ir bezmaksas un bieži tiek izmantots JavaScript projektos. Tas ir arī diezgan viegli lietojams.

Apskatīsim piemēru: pieņemsim, ka jums ir izvietošanas / kvalitātes nodrošināšanas serveris un jūsu Git repozitorijs. Jūs vēlaties izvietot izmaiņas izvietošanas / kvalitātes nodrošināšanas serverī, tāpēc šeit ir procesa piemērs:

  1. Pārvietojiet izmaiņas uz Git
  2. Izveidojiet savienojumu ar serveri
  3. Izveidojiet Docker konteineru un palaidiet to
  4. Izvelciet izmaiņas serverī, lejupielādējiet visas atkarības (instalēt npm)
  5. Veiciet testus, lai pārliecinātos, ka nekas nav salauzts
  6. Lai nodrošinātu koda kvalitāti, izmantojiet tādu rīku kā ESLint / Sonar
  7. Apvienojiet kodu, ja viss ir kārtībā

Ar CircleCI palīdzību jūs varat automātiski veikt visas šīs darbības. Jūs varat to iestatīt un konfigurēt, lai veiktu visas iepriekš minētās darbības, kad vien nospiežat izmaiņas Git. Tas noraidīs grūdienu, ja kaut kas noiet greizi, piemēram, neveiksmīgs tests.

Es neiedziļināšos sīkāk par to, kā konfigurēt CircleCI, jo šis raksts ir vairāk par "Kāpēc?" katra rīka. Bet, ja jūs interesē uzzināt vairāk un redzēt to darbībā, varat apskatīt šo apmācību sēriju.

Secinājums

JavaScript pasaule strauji attīstās, un jauni rīki katru gadu iegūst popularitāti.

Uz šīm izmaiņām ir viegli reaģēt, vienkārši iemācoties izmantot rīku - mēs bieži esam pārāk aizņemti, lai veltītu laiku un domātu par iemeslu, kāpēc šis rīks kļuva populārs vai kādu problēmu tas atrisina.

Šajā rakstā es izvēlējos rīkus, kuri, manuprāt, ir vispopulārākie, un dalījos pārdomās par to nozīmi. Es arī gribēju likt jums padomāt par problēmām, kuras viņi risina, nevis tikai par sīkāku informāciju par to izmantošanu.

Ja jums patika raksts, varat pārbaudīt un abonēt manu emuāru, kurā es mēģinu rakstīt bieži. Turklāt ļaujiet man zināt, ko jūs domājat, komentējot, lai mēs varētu domāt par prātu vai arī jūs varētu man pateikt, kādus citus rīkus jums patīk izmantot :)