Популарни развојни алати који бисте требали знати

Ако тек започињете са ЈаваСцриптом, број алата и технологија о којима ћете чути може бити огроман. И можда ћете имати потешкоћа да одлучите који вам алати заправо требају.

Или сте можда упознати са алатима, али нисте превише размишљали о томе које проблеме решавају и колико би вам живот био јадан без њихове помоћи.

Верујем да је важно да софтверски инжењери и програмери схвате сврху алата које свакодневно користимо.

Зато у овом чланку гледам на НПМ, Бабел, Вебпацк, ЕСЛинт и ЦирцлеЦИ и покушавам да разјасним проблеме које они решавају и како их решавају.

НПМ

НПМ је задати менаџер пакета за развој ЈаваСцрипт-а. Помаже вам да пронађете и инсталирате пакете (програме) које можете користити у својим програмима.

Можете додати нпм пројекту једноставно помоћу команде „ нпм инит “. Када покренете ову наредбу, она креира датотеку " пацкаге.јсон " у тренутном директоријуму. Ово је датотека у којој су наведене ваше зависности, а нпм је види као личну карту пројекта.

Зависност можете додати помоћу наредбе „ нпм инсталл (име_пакета) “.

Када покренете ову наредбу, нпм иде у удаљени регистар и проверава да ли постоји пакет идентификован овим именом пакета. Ако га пронађе, у ваш пакет.јсон се додаје нови унос зависности и пакет се, са својим унутрашњим зависностима, преузима из регистра.

Преузете пакете или зависности можете пронаћи у фасцикли „ноде_модулес“ . Имајте на уму да обично постане прилично велик - па га обавезно додајте у .гитигноре .

Како редовно ажурирати своје ЈаваСцрипт библиотеке - ЛогРоцкет Блог

НПМ не само да олакшава процес проналажења и преузимања пакета, већ и олакшава заједнички рад на пројекту.

Без НПМ-а било би тешко управљати спољним зависностима. Кад се придружите постојећем пројекту, требаћете ручно да преузмете тачне верзије сваке зависности. А то би била права гњаважа.

Уз помоћ нпм-а можете само покренути „нпм инсталл“ и он ће инсталирати све спољне зависности за вас. Тада га можете поново покренути кад год неко из вашег тима дода нови.

Бабел

Бабел је ЈаваСцрипт компајлер или транспилер који преводи ЕЦМАСцрипт 2015+ код у код који могу да разумеју старији ЈаваСцрипт мотори.

Бабел је најпопуларнији Јавасцрипт компајлер, а оквири попут Вуе и Реацт користе га подразумевано. Упркос томе, концепти о којима ћемо овде говорити нису повезани само са Бабелом и примењиваће се на било који ЈаваСцрипт компајлер.

Зашто вам је потребан компајлер?

„Зашто нам је потребан компајлер, зар ЈаваСцрипт није интерпретирани језик?“ можете питати да ли сте упознати са концептима компајлираних и протумачених језика.

Истина је да обично нешто називамо „компајлером“ ако преводи наш човеку читљив код у извршну бинарну датотеку која ЦПУ може да разуме. Али овде није случај.

Израз транспилер може бити прикладнији јер је подскуп компајлера: Транспилери су компајлери који преводе код са програмског језика на други језик (у овом примеру са модерног ЈС-а на старију верзију).

ЈаваСцрипт је језик прегледача. Али постоји проблем са прегледачима: унакрсна компатибилност. ЈаваСцрипт алати и сам језик се брзо развијају и многи прегледачи не успевају да се подударају с тим темпом. То резултира проблемима са компатибилношћу.

Вероватно желите да напишете код у најновијим верзијама ЈаваСцрипт-а како бисте могли да користите његове нове функције. Али ако прегледач на којем је покренут ваш код није применио неке од нових функција у свом ЈаваСцрипт механизму, код се неће правилно извршити у том прегледачу.

Ово је сложен проблем јер сваки прегледач примењује функције различитом брзином. Па чак и ако примене те нове функције, увек ће бити људи који користе старију верзију свог прегледача.

Па шта ако желите да можете да користите најновије функције, али желите и да корисници без проблема гледају те странице?

Пре Бабела користили смо полифил за покретање старијих верзија одређеног кода ако прегледач није подржавао модерне функције. А када користите Бабел, он користи полифил иза кулиса и не захтева да урадите било шта.

Како раде транспилери / компајлери?

Бабел ради слично осталим компајлерима. Има фазе рашчлањивања, трансформације и генерације кода.

Овде нећемо детаљно залазити у то како то функционише, јер су компајлери сложене ствари. Али да бисте разумели основе како компајлери раде, можете погледати пројекат-супер-ситни-компајлер. Такође се помиње у Бабеловој службеној документацији као корисно за разумевање како Бабел ради.

Обично се можемо извући из сазнања о додацима и унапред подешеним програмима Бабел. Додаци су исечци које Бабел користи иза кулиса за компајлирање вашег кода у старије верзије ЈаваСцрипт-а. Сваку модерну функцију можете сматрати додатком. Можете да одете на ову везу да бисте видели комплетну листу додатака.

Пресетови су колекције додатака. Ако желите да користите Бабел за Реацт пројекат, можете да користите унапред направљени @ бабел / пресет-респонсе који садржи потребне додатке.

Додатке можете додати уређивањем конфигурационе датотеке Бабел.

Да ли вам треба Бабел за вашу Реацт апликацију?

За Реацт вам је потребан компајлер јер Реацт код обично користи ЈСКС и ЈСКС га треба компајлирати. Такође, библиотека је заснована на концепту употребе синтаксе ЕС6.

Срећом, када креирате пројекат са цреате-респонсе-апп , он долази са Бабел-ом који је већ конфигурисан и обично не морате да мењате цонфиг.

Примери компајлера у акцији

Бабелова веб локација има мрежни компајлер и заиста је корисно разумети како то функционише. Само укључите неки код и анализирајте излаз.

Вебпацк

Вебпацк је статички пакет модула. Када креирате нови пројекат, већина ЈаваСцрипт оквира / библиотека данас га користи ван оквира.

Ако фраза „пакет статичког модула“ звучи збуњујуће, наставите да читате јер имам неколико сјајних примера који ће вам помоћи да разумете.

Зашто вам је потребан пакет?

У веб апликацијама ћете имати пуно датотека. То је посебно случај са апликацијама са једном страницом (Реацт, Вуе, Ангулар), при чему свака има своје зависности.

Оно што подразумевам под зависношћу је изјава о увозу - ако датотека А треба да увезе датотеку Б да би се правилно покренула, тада кажемо да А зависи од Б.

У малим пројектима, зависности модула можете да решите таговима. Али када пројекат постане већи, зависностима брзо постаје тешко управљати.

Можда, што је још важније, поделом кода на више датотека ваша веб локација се спорије учитава. То је зато што прегледач мора да пошаље више захтева у поређењу са једном великом датотеком, а ваша веб локација почиње да троши тону пропусног опсега због ХТТП заглавља.

Ми као програмери желимо да наш код буде модуларан. Поделимо га на више датотека јер не желимо да радимо са једном датотеком са хиљадама редова. Ипак, такође желимо да наше веб странице буду ефикасне, да користе мање пропусног опсега и да се брзо учитавају.

Дакле, сада ћемо видети како Вебпацк решава овај проблем.

Како Вебпацк ради

Када смо говорили о Бабелу, споменули смо да ЈаваСцрипт код треба превести пре примене.

Али компајлирање са Бабелом није једина операција која вам је потребна пре примене вашег пројекта.

Обично га требате углифирати, транспиловати, компајлирати САСС или СЦСС у ЦСС ако користите било који претпроцесор, саставити ТипеСцрипт ако га користите ... и као што видите, ова листа може лако да се продужи.

Не желите да се бавите свим тим наредбама и операцијама пре сваког постављања. Било би сјајно када би постојао алат који би све то учинио уместо вас у исправном редоследу и на исправан начин.

Добра вест - постоји: Вебпацк.

Вебпацк такође нуди функције попут локалног сервера са врућим поновним учитавањем (они то зову врућа замена модула) ради побољшања вашег развојног искуства.

Па шта је вруће поновно пуњење? То значи да се сваки пут када сачувате свој код компајлира и распоређује на локални ХТТП сервер покренут на вашем рачунару. А кад год се датотека промени, она пошаље поруку вашем прегледачу, тако да не морате ни да освежавате страницу.

Ако сте икада користили „нпм рун серве“, „нпм старт“ или „нпм рун дев“, те наредбе такође покрећу Вебпацк-ов дев сервер иза сцене.

Вебпацк започиње од улазне тачке вашег пројекта (индекса) и генерише дрво апстрактне синтаксе датотеке. Можете то схватити као рашчлањивање кода. Ова операција се такође ради у компајлерима, који затим рекурзивно траже наредбе за увоз да би генерисали графикон зависности.

Затим датотеке претвара у ИИФЕ да би их модуларизирао (не заборавите, стављање кода унутар функције ограничава њен опсег). Радећи ово, они модулирају датотеке и осигуравају да променљиве и функције нису доступне другим датотекама.

Без ове операције то би било попут копирања и лепљења кода увезене датотеке и та датотека би имала исти опсег.

Вебпацк ради многе друге напредне ствари иза кулиса, али ово је довољно за разумевање основа.

Бонус - ЕСЛинт

Квалитет кода је важан и помаже да ваши пројекти буду одрживи и лако се могу проширити. Иако већина нас програмера препознаје значај чистог кодирања, понекад под притиском рокова занемарујемо дугорочне последице.

Многе компаније се одлучују за стандарде кодирања и подстичу програмере да их поштују. Али како можете бити сигурни да ваш код испуњава стандарде?

Па, можете користити алат као што је ЕСЛинт да примените правила у коду. На пример, можете створити правило за наметање или забрану употребе тачака и зареза у вашем ЈаваСцрипт коду. Ако прекршите правило, ЕСЛинт приказује грешку и код се чак ни не компајлира - па то није могуће занемарити ако не онемогућите правило.

Линтери се могу користити за спровођење стандарда писањем прилагођених правила. Али такође можете да користите унапред направљене ЕСЛинт конфигурације које су успоставиле велике технолошке компаније да помогну развојним програмерима да стекну навику писања чистог кода.

Овде можете погледати Гоогле-ову ЕСЛинт конфигурацију - она ​​је она коју више волим.

ЕСЛинт вам помаже да се навикнете на најбоље праксе, али то није једина његова предност. ЕСЛинт вас такође упозорава на могуће грешке / грешке у вашем коду, тако да можете избећи уобичајене грешке.

Бонус - ЦИ / ЦД (ЦирцлеЦИ)

Континуирана интеграција / развој стекла је велику популарност последњих година јер су многе компаније усвојиле агилне принципе.

Алати попут Јенкинс-а и ЦирцлеЦИ омогућавају вам аутоматизацију примене и тестирања вашег софтвера, тако да можете чешће и поузданије да их примените, а да сами не пролазите кроз тешке процесе израде склони грешкама.

Овде спомињем ЦирцлеЦИ као производ, јер је бесплатан и често се користи у ЈаваСцрипт пројектима. Такође је прилично једноставан за употребу.

Пређимо на пример: Рецимо да имате имплементациони / КА сервер и ваше Гит спремиште. Желите да примените промене на вашем серверу за размештање / КА, па је овде пример процеса:

  1. Притисните промене на Гит
  2. Повежите се са сервером
  3. Направите Доцкер контејнер и покрените га
  4. Повуците промене на сервер, преузмите све зависности (нпм инсталл)
  5. Покрените тестове како бисте били сигурни да ништа није сломљено
  6. Користите алатку попут ЕСЛинт / Сонар да бисте осигурали квалитет кода
  7. Спојите код ако је све у реду

Уз помоћ ЦирцлеЦИ можете аутоматски извршити све ове операције. Можете га подесити и конфигурисати да ради све горе наведене операције кад год притиснете промену на Гит. Одбациће гурање ако нешто пође по злу, на пример неуспели тест.

Нећу улазити у детаље како да конфигуришем ЦирцлеЦИ јер је овај чланак више о томе „Зашто?“ сваког алата. Али ако сте заинтересовани да научите више и видите то на делу, можете погледати ову серију водича.

Закључак

Свет ЈаваСцрипт-а се брзо развија и нове алате добијају на популарности сваке године.

Лако је реаговати на ову промену само научећи како се користи алат - често смо презаузети да бисмо одвојили време и размислили о разлогу зашто је тај алат постао популаран или који проблем решава.

У овом чланку сам изабрао алате за које мислим да су најпопуларнији и поделио своја размишљања о њиховом значају. Такође сам желео да те натерам да размишљаш о проблемима које они решавају, а не само о детаљима како их користити.

Ако вам се свидео чланак, можете погледати и претплатити се на мој блог на којем покушавам често да пишем. Такође, обавестите ме шта мислите коментаришући како бисмо могли да мозжемо или ми можете рећи које друге алате волите да користите :)