Най-накрая разбрах инструментите за изграждане отпред. Можете също.

Инструментите за изграждане отпред могат да объркат дори за опитни разработчици като мен. Решението е да се разбере как работят - и работят заедно - на концептуално ниво.

Тази статия представя моя мнителен подход към осмислянето на инструментите за изграждане отпред. Вместо да се гмуркам в кода, ще ви преведа през моя мисловен модел за това как работят тези инструменти и какво постигат.

Не се плашете от състоянието на техниката

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch ... има толкова много инструменти за изграждане отпред, че може да изглежда невъзможно да се справи.

Ключът не е в сплашването. Всички тези проекти са предназначени да улеснят живота ви.

За да разберете какво, защо и как от тези инструменти, просто трябва да разберете няколко концепции.

Концепция №1 - Основната дихотомия на инструментите за изграждане е „инсталиране срещу правене“

Инструментите за изграждане правят две неща:

  1. Инсталирайте нещата
  2. Правете неща

Първият въпрос, който трябва да си зададете, когато се сблъсквате с нов инструмент за изграждане, е: „Този ​​инструмент предназначен ли е да инсталира неща за мен или да прави неща за мен?“

Инсталиращи инструменти като npm, Bower и Yeoman могат да инсталират почти всичко. Те могат да инсталират външни библиотеки като Angular.js или React.js. Те могат да инсталират сървъри за вашата Dev среда. Те могат да инсталират тестови библиотеки. Те дори ви помагат да инсталирате други инструменти за изграждане отпред.

Накратко, те инсталират повечето неща, свързани с кода, за които можете да се сетите.

Инструментите за „правене“ като Grunt, Webpack, Require.js, Brunch и Gulp са много по-сложни. Целта на инструментите за „правене“ е да автоматизират всички задачи, които са склонни към грешки и грешки при уеб разработката. Нещата, които правят, понякога се наричат ​​„задачи“.

За да изпълняват тези „задачи“, те често използват собствената си екосистема от пакети и приставки. Всеки инструмент пише задачи по различни начини. Тези инструменти също не правят едно и също нещо. Някои инструменти за „правене“ се опитват да се справят с всяка задача, която му хвърлите (Grunt, Gulp и т.н.). Други се фокусират върху едно нещо, като например обработка на зависимости на Javascript (Browserify, Require.js и т.н.).

Понякога в крайна сметка използвате няколко от тези инструменти в един и същ проект.

Ето кратък списък от „задачи“, които автоматизирах с тези инструменти за „извършване“:

  1. Замяна на низ от текст във файл
  2. Създаване на папки и преместване на файлове в тези папки
  3. Изпълнение на модулните тестове с една команда
  4. Опресняване на браузъра ми, когато запазя файл
  5. Комбиниране на всичките ми JavaScript файлове в едно и всичките ми CSS файлове в едно
  6. Минимизиране на моите конкатенирани JavaScript и CSS файлове
  7. Промяна на разположението на тагове на html страница

След като разберете, че инструментите инсталират неща или правят неща, категоризирането им става много по-лесно:

Концепция # 2 - Бабата и дядото на всички инструменти за изграждане са Node и npm

Node и npm инсталират и изпълняват всички тези инструменти за изграждане, така че във вашия проект винаги има следа от тях. Поради това много разработчици се опитват да използват тези два инструмента колкото е възможно повече, преди да прибегнат до инсталиране на допълнителен инструмент.

Node и NPM попадат в нашата дихотомия „изграждане“ и „изпълнение“. Node е инструментът „направи“, а npm е инструментът „инсталиране“.

npm може да инсталира библиотеки като Angular.js или React.js. Той може също да инсталира сървър, за да стартира приложението ви локално за разработка. Той дори може да инсталира инструменти за извършване на неща като минимизиране на вашия код.

Node, от друга страна, „прави“ неща за вас, като например стартиране на JavaScript файлове, сървъри и много други.

Ако имате нужда от място, където да започнете да учите, започнете с Node + npm и останете там известно време. Когато вашият проект стане достатъчно голям, ще достигнете границите на това, което Node и npm могат да автоматизират за вас. В този момент можете органично да включите друг инструмент за изграждане.

Концепция # 3 - Компилацията е просто готова за производство версия на вашето приложение

Разработчиците често разбиват JavaScript и CSS на отделни файлове. Отделните файлове ви позволяват да се съсредоточите върху писането на повече модулни парчета код, които правят едно единствено нещо. Файловете, които правят едно нещо, намаляват вашето когнитивно натоварване. (Ако смятате, че отделни файлове са по-объркващи от един голям файл, опитайте да работите във файл с 5000 реда и бързо ще промените решението си?)

Но когато дойде време да преместите приложението си в работна версия, наличието на множество JavaScript или CSS файлове не е идеално. Когато потребител посети вашия сайт, всеки от вашите файлове ще изисква допълнителни HTTP заявки, което прави сайта ви по-бавен за зареждане.

Така че, за да коригирате това, можете да създадете „компилация“ на нашето приложение, което обединява всичките ви CSS файлове в един файл и прави същото с вашия JavaScript. По този начин минимизирате броя и размера на файловете, които потребителят получава. За да създадете тази „компилация“, използвате „инструмент за изграждане“.

По-долу е екранна снимка на приложение в процес на разработка. Забележете как има 5 маркера и 3 маркера? Ако погледнете отляво, забележете, че папката РАЗВИТИЕ има 10 файла вътре?

И по-долу е същото приложение, след като инструментът за изграждане е направил своята магия.

Забележете как имаме само един таг за скрипт и един таг за връзка? И сега папката ПРОИЗВОДСТВО има само 4 файла, в сравнение с папката РАЗВИТИЕ 10.

Приложението е ред за ред същото. Току-що го уплътнихме в чист малък пакет, който наричаме „компилация“.

Може би се чудите защо една компилация изобщо си заслужава, ако всичко, което прави, е да спести на вашите потребители няколко милисекунди време за зареждане. Е, ако правите сайт само за себе си или за няколко други хора, не е нужно да се занимавате с това. Генерирането на компилация на вашия проект е необходимо само за сайтове с голям трафик (или сайтове, които се надявате скоро да бъдат с голям трафик?).

Ако просто изучавате разработка или създавате само сайтове с много нисък трафик, генерирането на компилация може да не си струва времето

Концепция # 4 - Редовете между „инсталиране“ и „направете“ могат да бъдат размити

Нито един инструмент не прави само едното, а не другият. Всички те правят някаква комбинация от „инсталиране“ и „правене“. Но обикновено инструментът има тенденция да прави повече от едното от другото.

Понякога инструмент за „инсталиране“ ще стартира файлове. npm често прави това. npm може да изпълнява команди и скриптове - не само да инсталира файлове. Инструмент като Yeoman инсталира предварително изградени приложения на вашия компютър, но също така динамично генерира нови файлове, ако е необходимо, размивайки границата между инсталиране и изпълнение.

Концепция №5 - Няма една правилна комбинация от инструменти

Комбинацията от инструменти, които използвате, може да зависи изцяло от вас.

Можете да изберете да не използвате никакви инструменти. Само имайте предвид, че копирането, поставянето, минимизирането, стартирането на сървъри и всичко останало, което може да стане, може бързо да стане поразително.

Или можете просто да използвате Node и npm заедно без допълнителни инструменти. Това е чудесно за начинаещи, но тъй като вашият проект расте, може да започне да се чувства като твърде ръчен процес.

Или можете да изберете да използвате няколко други инструмента върху Node и npm във вашия проект. Така че приложението ви ще използва Node + npm като ядро ​​и след това може би Grunt + Bower или Webpack или Gulp + Bower.

Използването на комбинация от инструменти като тези на Node + npm ви позволява да автоматизирате много задачи във вашия проект. Цената, която плащате, е, че тези инструменти имат стръмна крива на обучение.

Концепция №6 - Инструментите за изграждане имат стръмна крива на обучение, така че научете само това, което е необходимо

Изграждането на приложение е достатъчно трудно. Възможно е да работите с нов език или нова рамка. Или може би имате наистина сложна бизнес логика. Така че включването на инструмент за изграждане може да добави цял допълнителен слой сложност към вашия проект. Това е особено вярно, когато става въпрос за проект, при който някой друг е написал кода, свързан с инструмента за изграждане.

Моят съвет е да научите само какво точно ви трябва, за да си вършите работата и нищо друго.

Най-добрият начин да научите нови неща е, когато имате задача от реалния свят, която трябва да изпълните. Например, не се научете как да копирате файлове с Grunt заради това. Вместо това изчакайте, докато вашият проект действително се нуждае от това, и след това го разберете.

Не забравяйте: преждевременната сложност ще ви забави.

Концепция №7 - Всички инструменти за изграждане имат една и съща цел: да ви направят щастливи чрез автоматизиране на много мъжки задачи

Използвате пълния си потенциал на инструмента за изграждане, когато достигнете това, което нарекох „инструмент за изграждане на нирвана“. Това е, когато след като запазите файл или изпълните една команда, и множество задачи се случват „автоматично“ за вас.

Ако вашият инструмент за изграждане все още изисква ръчно да премествате файлове, да променяте стойности или да изпълнявате команди, за да получите нова компилация, тогава все още не сте достигнали nirvana на инструмента за изграждане.

Едно от най-големите предимства на инструментите за изграждане е, че само като запазите файл, можете да задействате ново изграждане на приложението си и да го изпратите на браузъра си. Това може драстично да ускори работния процес на вашия преден край.

И така, колко усилия трябва да положите за конфигуриране и настройка на вашия инструмент за изграждане? Просто: спрете, когато сте доволни от това, което прави за вас.

Концепция 8 - Не сте само вие. Документацията често е ужасна.

Не си ти, обещавам. За много от тези инструменти документацията доста липсва. Понякога разбирането как да се изпълняват основни задачи може да бъде трудно.

Имайте предвид, че има много малко предварително дефинирани рецепти за инструменти за изграждане. Ще видите как хората получават едни и същи резултати по диво различни начини - понякога всички като отговори на един и същ въпрос за StackOverflow!

Макар че това е досадно, ви предоставя и възможност да разгънете кодерните си мускули и да приложите нещо креативно.

В края на краищата, нали затова правим това?

Благодаря, че прочетохте това! Надяваме се, че тези няколко точки правят приближаващите инструменти за изграждане по-малко объркващо преживяване. Ако не, ще се радвам да изчистя всички въпроси (или да коригирам грешките, които откриете тук), чуруликайте ми @Roneesh!

И разбира се, ако харесате прочетеното, моля, не забравяйте да го below по-долу и да споделите с приятелите си. Като писател това означава свят за мен!