Почетак рада са Вебпацком [са пројектом примера]

Вебпацк је модуле бундлер што олакшава изградњу сложених ЈаваСцрипт апликација. Постигла је озбиљну снагу јер је заједница Реацт изабрала то као свој главни алат за изградњу. Вебпацк је нити менаџер пакета нити тркач задатака јер користи другачији (напреднији) приступ, али и његов циљ поставити динамички процес изградње.

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

Нећете требати Вебпацк-у да бисте креирали једноставну апликацију или веб-сајт, на пример онај који има само један ЈаваСцрипт и један ЦСС фајл и неколико слика, али то може да спаси живот за сложенију примену са неколико средстава и зависности.

Вебпацк вс. таск руннерс вс. Бровсерифи

Дакле, како се Вебпацк слаже у поређењу са другим алатима за изградњу као што су Грунт, Гулп или Бровсерифи?

Грунт и Гулп су тркачи задатака. У њиховом конфигурационом фајлу, ви одредите задатке, и тркач задатака их извршава. Тхе радног тока тркача задатака у основи изгледа овако:

Међутим, Вебпацк је модуле бундлер који анализира цео пројекат, поставља стабло зависности, и креира приложену ЈаваСцрипт датотеку који служи за прегледач.

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

Ако желите да знате више о томе како се Вебпацк може поредити са другим алатима за изградњу, Препоручујем вам два чланка:

Андрев Раи Вебпацк: Када користити и зашто на свом блогу
Цори Хоусе'с Бровсерифи вс Вебпацк на фрееЦодеЦамп (са одличним илустрацијама)

Две горе приказане илустрације су из Вебпацк материјали из Про Реацт приручника, још један ресурс који вреди погледати.

Четири основна концепта Вебпацк-а

Вебпацк хас називају се четири главне опције конфигурације “цоре цонцептс” које ћете морати да дефинишете у процесу развоја:

Ентри - тхе полазна тачка графа зависности (један или више ЈаваСцрипт датотека).
Оутпут - датотеку где желите излаз који ће бити у пакету (један ЈаваСцрипт фајл).
Лоадерс - трансформације имовине претворите их у Вебпацк модуле тако да могу бити додан графу зависности. На пример, цсс-лоадер се користи за увоз ЦСС датотека.
Додаци - прилагођене акције и функционалности извршена на снопу. На пример, и18н-вебпацк-плугин уграђује локализацију у сноп.

Утоваривачи раде по датотеци пре компилације. Додаци се извршавају у пакету кода, на крају процеса компилације.

Инсталл Вебпацк

До инсталл Вебпацк, отворите командну линију, идите до фасцикле пројекта и покрените следећу команду:

 нпм инит

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

 нпм инит -и

Затим инсталирајте Вебпацк:

 нпм инсталл вебпацк --саве-дев

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

 "наме": "_тестс", "версион": "1.0.0", "десцриптион": "", "маин": "вебпацк.цонфиг.јс", "депенденциес": "вебпацк": "^ 3.6 .0 "," девДепенденциес ": " вебпацк ":" ^ 3.6.0 "," скрипте ": " тест ":" ецхо "Грешка: није наведен тест" && екит 1 "," кључне речи " ": []," аутхор ":" "," лиценца ":" ИСЦ "

Креирајте конфигурациони фајл

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

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

1. Креирајте улазне тачке

Можете имати једну или више улазних тачака. Морате их дефинисати у ентри својство.

Уметните следећи исјечак кода у вебпацк.цонфиг.јс филе. То одређује једну улазну тачку:

 модуле.екпортс = ентри: "./срц/сцрипт.јс";

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

У директоријуму пројекта, створити нова срц фолдер и а сцрипт.јс фајл унутар њега. Ово ће бити ваш улазна тачка. За потребе тестирања, само ставите низ унутар тога. Користио сам следећу (међутим, можете користити и занимљивију):

 цонст греетинг = "Здраво. Ја сам Вебпацк стартер пројекат."; доцумент.врите (поздрав);

2. Дефинишите излаз

Можете имати само један излазни фајл. Вебпацк спаја сву имовину у овај фајл. Морате да конфигуришете оутпут на следећи начин:

 цонст патх = рекуире ("патх"); модуле.екпортс = ентри: "./срц/сцрипт.јс", оутпут: филенаме: "бундле.јс", путь: патх.ресолве (__ дирнаме, 'дист');

Тхе назив документа својство дефинише име датотеке у пакету, док путања својство наводи име директоријума. Горњи пример ће креирати /дист/бундле.јс филе.

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

3. Додајте утовариваче

До додајте утовариваче, морате дефинисати модул својство. Испод смо додали бабел-лоадер то вам омогућава безбедно користите ЕЦМАСцрипт 6 функције у ЈС датотекама:

 цонст патх = рекуире ("патх"); модуле.екпортс = ентри: "./срц/сцрипт.јс", оутпут: филенаме: "бундле.јс", путања: патх.ресолве (__ дирнаме, 'дист'), модуле: рулес: [тест : / јс$/, екцлуде: / (ноде_модулес | бовер_цомпонентс) /, користите: лоадер: "бабел-лоадер", опције: пресетс: ["енв"]]];

Конфигурација може изгледати тешка, али је само копирана Бабелова документација. Већина утоваривача долази са реадме фајлом или неком врстом документације, тако да можете (скоро) увек знати како да их правилно конфигуришете. Документи Вебпацк-а имају и страницу која објашњава како да конфигуришете модуле.рулес.

Можеш додати онолико утоваривача колико вам је потребно, ево пуне листе. Имајте на уму да и ви морате инсталирајте сваки пуњач са нпм да их натерају да раде. За Бабел лоадер, морате инсталирати потребне Ноде пакете са нпм:

 нпм инсталл --саве-дев бабел-цоре бабел-цоре бабел-пресет-енв вебпацк

Ако погледате пацкаге.јсон датотеку, видећете да је нпм додао три пакета везана за Бабел девДепенденциес својство, они ће се побринути за компилацију ЕС6.

4. Додајте додатке

До адд тхе плугинс, морате да наведете плугинс својство. Плус, такође морате захтевати плугинс један по један, пошто су то спољни модули.

У нашем примеру, додамо два Вебпацк плугина: ХТМЛ Вебпацк плугин анд тхе Прелоад Вебпацк плугин. Вебпацк има а нице плугин ецосистем, можете прегледати комплетну листу овде.

За захтевање додатака као Ноде модула, створите две нове константе: ХтмлВебпацкПлугин и ПрелоадВебпацкПлугин и користити захтевај () функције.

 цонст патх = рекуире ("патх"); цонст ХтмлВебпацкПлугин = рекуире ("хтмл-вебпацк-плугин"); цонст ПрелоадВебпацкПлугин = рекуире ("прелоад-вебпацк-плугин"); модуле.екпортс = ентри: "./срц/сцрипт.јс", оутпут: филенаме: "бундле.јс", путања: патх.ресолве (__ дирнаме, 'дист'), модуле: рулес: [тест : / јс$/, екцлуде: / (ноде_модулес | бовер_цомпонентс) /, користите: лоадер: "бабел-лоадер", опције: пресетс: ["енв"]]], плугинс: [нев ХтмлВебпацкПлугин] (), нев ПрелоадВебпацкПлугин ()];

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

 нпм инсталирај хтмл-вебпацк-плугин --саве-дев нпм инсталл --саве-дев прелоад-вебпацк-плугин

Ако погледате пацкаге.јсон сада, видећете да је нпм додао два додатка у девДепенденциес својство.

Рун Вебпацк

До креирајте стабло зависности и излазни пакет, покрените следећу команду у командној линији:

 вебпацк

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

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

Гитхуб репо

Ако желите да проверите, преузмете или подигнете цео пројекат, погледајте наш Гитхуб репо.