„Sudėtis vs„ Webpack “(„ JavaScript “grupavimas 2018 m.)

Nors įrankių standartai „JavaScript“ srityje pradėjo stabilizuotis, vis dar yra šiek tiek painiavos dėl tinkamo darbo įrankio. Tai yra šiek tiek detalus „Rollup“ ir „Webpack“ palyginimas. Pradėkime nuo jų atitinkamų konfigūracijos failų palyginimo.

Konfigūracija

rollup.config.js

webpack.config.js

Greiti skirtumai, į kuriuos reikia atkreipti dėmesį:

Sudėtiniame rinkinyje yra mazgų užpildymai, skirti importuoti / eksportuoti, o internetinėje pakuotėje nėra

Sudėtinis paketas palaiko santykinius kelius, o internetinė pakuotė ne, todėl naudojame arba path.resolve, arba path.join.

Apibendrinimas reikalauja, kad „es2015“ išankstiniuose nustatymuose būtų nustatyti moduliai, nes jie bus apdorojami kaip ES2015, jei prieš perkėldami modulį gali ir padaryti mastelio kėlimo magiją.

Paimkime labai paprastą pavyzdį:

some-file.js

rodyklė.js

Ko galėtumėte tikėtis, kad tai bus?

Neabejotinai tai, kur „Rollup“ šviečia. Paprastesniems moduliams jis grąžina labai efektyviai pakeistą, minimalų paketą, tuo tarpu „Webpack“ turi daug magijos ™.

„bundle.rollup.js“ - ~ 245 baitai

„bundle.webpack.js“ - ~ 4108 baitai

„Webpack“ pakete faktinis importas vykdomas maždaug 100 eilutėje. Jei pateksite į šį tašką, pamatysite, kad tikrasis modulio kodas dažniausiai yra tas pats (žemiau), o didžiausias skirtumas yra tas, kad „Webpack“ pakete kiekvienas modulis yra suvyniotas į funkciją, kurią galima naudoti iš vidaus. Štai kodėl „Webpack“ paketai laikomi „saugesniais“ didesnėms / sudėtingesnėms programoms.

Gaminant gaminio režimą ir paketo dydį pašalinama daug netvarkos.

Taigi, kaip pasakyti, kuris jums tinka? Naujausioje istorijoje įprasta išmintis buvo:

„Naudokite internetinę pakuotę programoms ir rinkinį bibliotekoms“

Tačiau tai paaiškinti paprastai tampa sunkiau. „Webpack“ patobulinimai išties išlygino konkurencijos sąlygas bendro rinkinio efektyvumo prasme, o „Rollup“ neseniai pridėjo kodo padalijimą (pagrindinius, kuriems trūksta dviejų funkcijų).

Kad realus gyvenimas būtų lygiagretus, aš šį lygintuvo mūšį palyginčiau su gaminio projektavimo teorija, vadinama „Kano modeliu“. „Kano“ modelis iš esmės teigia, kad „laikui bėgant žavios naujovės tampa dar vienu pagrindiniu poreikiu“.

Pavyzdžiui, paimkite rodyklę ant automobilio degalų matuoklio, kad nurodytumėte, į kurią pusę reikia nukreipti degalų siurblį (1 pav.). Kai idėja buvo sumanyta, ji buvo laikoma didele naujove, tačiau dabar jos tiesiog tikisi vartotojai.

1 pav.: Kuro bako dangtelio indikatorius

Norėdami pamatyti tikras skirtingas savybes, turime grįžti į laukinius vakarus 2016 m.

Apibendrinimas (maždaug 2016 m.)

Argumentai už:

  • Medžių purtymas (tiesioginio kodo įtraukimas / negyvo kodo pašalinimas)
  • esnext: pagrindinis įrašas į paketą.json norint importuoti es2015 + (pervadintas į „modulis“)
  • Taikymo srities kėlimas
  • Paprasta API

Minusai:

  • Ribotas alternatyvaus failo tipo įkėlimo palaikymas (CSS, vaizdai ir tt)
  • Jokio kodo skaidymo

„Webpack“ (maždaug 2016 m.)

Argumentai už:

  • Išplėstinis CSS / HTML / vaizdo įkėlimo palaikymas
  • Kodo padalijimas
  • Karšto modulio pakeitimas ypač greitam kūrimui

Minusai:

  • Jokio medžio drebėjimo
  • Nėra taikymo srities kėlimo
  • Nėra vietinio palaikymo ES2015 + moduliams
  • Sudėtingas API

Nuo to laiko daug kas pasikeitė (aukščiau pateiktas sąrašas nėra baigtinis ir abi bibliotekos turi papildomų privalumų ir trūkumų, kurių negalėčiau išvardyti), ir abi bibliotekos paėmė nuorodas viena nuo kitos. Taip pat išaugo abiejų bibliotekų aplinka, kuri padėjo paspartinti naujų bruožų įgyvendinimą.

Apibendrinimas (dabar) - kas pasikeitė?

  • Turtinga priedų ekosistema failų įkėlimui / dev serveriams
  • Kodo padalijimas (pridėta 2018 m. Vasario 8 d. Po 2 metų laukimo! )

„Webpack“ (dabar) - kas pasikeitė?

  • Medžių kratymas ir ES2015 + modulio palaikymas (pridėta „Webpack 2“)
  • Apimties kėlimas (pridėta 3 „Webpack“)
  • Esteksto palaikymas: pagrindinis / modulis

Mano manymu, jūs vis tiek turėtumėte teikti pirmenybę bibliotekoms, naudodami „Rollup“, tačiau galimybė naudoti „Rollup“ didelėms programoms dabar yra daug realesnė. Aišku viena - „Webpack“ ir „Rollup“ yra čia. Sakyčiau, pagrindinė šių dviejų bibliotekų išliekamosios galios priežastis yra nuostabios vidinės komandos ir begalinės pastangos, kurias jos stengiasi išlaikyti, atsakyti į problemas ir „StackOverflow“ klausimus.

Norėdami gauti išsamesnį abiejų bibliotekų vidaus palyginimą, Rich Harrisas („Rollup“ kūrėjas) čia puikiai parašė.

BONUSAS: artėja iššūkio ieškotojas

„Sklypas“ yra naujas ir įdomus paketų kaupiklis, turintis daug tų pačių funkcijų, kaip ir „Rinkinys“ ir „Webpack“ (pvz., Kodo padalijimas ir turto įkėlimas), tačiau didžiausia funkcija, kurią jis naudoja, yra nulinės konfigūracijos „pakilkite ir išeikite“ sprendimas, susijęs su grupavimu. Jei 2015 m. Būtumėte buvę bendruomenės nariais, prisimintumėte liūdnai pagarsėjusį tinklaraščio įrašą „JavaScript nuovargis“. Vienas iš autoriaus pastebėjimų yra tas, kad mūsų įrankiai buvo tik nepatogumai, ir taip buvo. Pasaulis nenusprendė, kokius įrankius turime naudoti, todėl dauguma mano projektų buvo „Gulp“, „browserify“ (su „babelify“) mišinys ir pradėti niekada nebuvo lengva.

„Parcel“ atveju pardavimo taškas yra tas, kad turite failą index.html, kuris nukreipia į „JavaScript“ įrašą, ir jūs galite tiesiog paleisti parcel index.html ir turėti išgalvotą dev serverį, veikiantį akimirkomis. Jis taip pat gąsdina, kad turi greitai pūslių pluoštus (nors jų palyginimo lentelėje nėra Rinkinio palyginimo, todėl galiu tik manyti, kad jie yra panašūs).

Jei paaiškės, kad „Parcel“ turi išliekamąją galią kaip „Webpack“ / „Apdorojimo rinkinys“, esu tikras, kad tose bibliotekose pamatysime daugybę nulio konfigūracijos funkcijų, kurios burbuliuos į paviršių.