Bevezetés a Parcel.js-hez, a No-Config Web Application Bundler-hez

Ez a bejegyzés a saját bejelentőjének Parcel.js bevezetése "gyorsan látszó, nulla konfigurációs webes alkalmazás-kötegelő." Itt van minden, amit tudnod kell az induláshoz:


Számos front-end fejlesztő csalódott a webes alkalmazások építésével járó néhány összetettség miatt. Elég szokásos gyakorlat, ha valamilyen összeállítási vagy kötegelő eszközt beépítünk egy kezelőfelület munkafolyamatába, így sok fejlesztő fontolóra vette egy front-end eszköz, például a webpack használatát..

Webpack a legnépszerűbb csomagológép, amelyet követte a Require.js, a Rollup és hasonló megoldások sarkában. De egy olyan eszköz, mint a webpack, a tanulási görbe meredek. A webpack használatának megkezdése az összetett konfigurációk miatt nem könnyű. Ennek eredményeként az utóbbi években újabb megoldás merült fel. Ez az eszköz nem feltétlenül elsőrendű futó, hanem könnyebben emészthető alternatíva a front-end modul kötegelő tájában. Bemutatjuk a Parcel.js oldalt.

Bevezetés a Parcel.js-be

Parcel.js (parceljs.org) pontosan azt akarják, amit sok kezdő és középszintű fejlesztő igényel: Egy egyszerű, alacsony konfigurációjú köteg, amelyet gyorsan létrehozhat és futtathat.

Remélem, hogy ez a Parcel oktatóanyag könnyen követhető bevezetést nyújt ennek az eszköznek. Lefedi az alapokat, majd megmutatom, hogyan lehet a Parcel segítségével összekapcsolni egy egyszerű webes alkalmazást, amely magában foglalja a Bábel és a Sass elemet..

Of Tartalomjegyzék:

  1. Miért érdemes használni a webalkalmazást? #
  2. A Parcel.js telepítése #
  3. Fájlbeviteli pont létrehozása #
  4. A dist / mappa száma
  5. A Parcel.js használata a Babel # segítségével
  6. A Parcel.js használata Sass # -val
  7. Több szkript csomagolása a Parcel # segítségével
  8. Kódfelosztás a Parcel.js segítségével #
  9. A termelés a Parcel.js segítségével épül #
  10. Van hátránya a Parcel használatának? #

Parcel.js webhely

Miért érdemes használni egy webalkalmazás-csomagolót??

Nem fogok túl sok időt megvitatni egy olyan csomag csomag használatának okairól, mint a Parcel.js, mert ezt a témát minden bizonnyal korábban tárgyalták. De itt van egy alapvető tudnivaló az ilyen eszköz használatának előnyeiről:

  • Az alkalmazásának kevesebb HTTP-kérése lesz a szkriptek vagy a stíluslapok kombinálása miatt
  • A szkriptek és a stíluslapok igény szerint betölthetők, ezáltal tovább javítva a teljesítményt
  • A szkriptek és a stíluslapok automatikusan kiszerelhetők, hogy kevesebb kilobájtot szállítsanak a felhasználó számára
  • Az egyesítési és aprítási munkákat az eszköz automatikusan elvégzi, minimalizálva a kézi munkát
  • A fejlesztési fájlok modulárisan vannak elrendezve, így a kódot sokkal könnyebben karbantartható és hibakereshető

Mint láthatja, az előnyök sokféleek, és főleg a teljesítményhez és a projekt karbantartásához kapcsolódnak. Természetesen sok oka van a köteg használatának, ha ez még olyan, amit még nem gondoltál.

Ezzel az útvonalon kezdjük el a Parcel.js felállításának és futtatásának alapjaival. Lassan áttekintem az oktatóanyag funkcióit néhány egyszerű példa segítségével, amelyeket könnyen követhetsz.

A Parcel.js telepítése

A Parcel.js telepíthető a terminálon a fonal vagy az npm használatával. Ehhez az oktatóanyaghoz az npm értéket fogom használni. Íme a parancs a globális telepítéshez, így bármilyen projekten használható:

npm telepítse a csomagot -g

A -g zászló telepíti globálisan. Ha csak egy projekthez szeretné telepíteni, és hozzáadni a projekt devDependencies-hez a package.json fájlban, akkor ugyanazt a parancsot a projekt gyökérmappájában futtathatja a -sa helyett a –save-dev zászló használatával:

npm telepítse a csomagkezelőt – save-dev

A globális telepítéssel (amely a leggyakoribb használati eset) bármilyen projektet elindíthat az init paranccsal. A terminál segítségével keresse meg azt a mappát, amelyet használni szeretne az alkalmazás gyökérként, és futtassa:

npm init -y

A -y zászló megakadályozza, hogy az npm bármilyen kérdést feltegyen, az alapértelmezett beállításokkal. Feltételezve, hogy a projektem neve parcel-demo, ez a csomagban létrehoz egy csomag.json fájlt a gyökérben, amely így néz ki:

{
"név": "parcella-demo",
"változat": "1.0.0",
"leírás": "",
"fő-": "index.js",
"szkriptek": {
"teszt": "visszhang \"Hiba: nincs megadva teszt \" && 1. kijárat"
},
"kulcsszavak": [],
"szerző": "",
"engedély": "ISC"
}

Ha a fentiek bármelyikét zavarba veszi az npm ismeretének hiánya miatt, akkor nézd meg az átfogó könyvemet bemutató npm-en. Arra összpontosít, hogy elősegítse a webfejlesztők számára az eszköz megértését.

Fájlbeviteli pont létrehozása

A projekt alapvető beállításához a Parcel.js fájlt használja egy index.html fájlban, amely egy index.js nevű elsődleges JavaScript fájlra mutat (lásd a package.json fájlt). Ez a HTML fájl szolgál majd Parcel belépési pontként. A HTML-fájlomban lesz egy szkript elem, amely a JavaScript-fájlra mutat, tehát így néz ki:

html>
<html>
<fej>
<cím>Parcel Demotitle>
fej>
<test>
<src ="./js/index.js">forgatókönyv>
test>
html>

Amint a helyes HTML-fájl és a JavaScript-fájl van a helyén, elindíthatom a Parcel beépített fejlesztő-kiszolgálóját a következő lépések futtatásával a terminálomban a projekt mappájában:

csomag index.html

Ez elindítja a szervert, és megmondja, hogy melyik fájlt kell használni belépési pontként. Ennek eredményeként a következő üzenetet kapom a terminál ülésemben:

Szerver fut a http: // localhost: 1234 webhelyen
√ 887 ms-ban épült.

Most megnyithatom a böngészőmet a http: // localhost: 1234 / webhelyen, hogy megnézhessem, amit eddig építettem. Az élő szerver az élő újratöltést és az úgynevezett oldalt használja forró modul cseréje. Ez automatikusan frissíti az oldalak moduljait anélkül, hogy teljes oldalra kellene frissíteni. Így gyorsabban láthatom az építkezés előrehaladását, ahogy dolgozom.

Amint a Parcel.js aktív szerverrel fut, a fájlban végrehajtott minden változtatás automatikusan újraépíti az alkalmazásomat, amikor a fájl mentésre kerül. Ennek működése érdekében egy egyszerű konzolnapló sort fogok hozzáadni a szkriptemhez. Ez a következő üzenetet fogja megjeleníteni a terminálomban:

$ parcella index.html
Szerver fut a http: // localhost: 1234 webhelyen
√ Beépítve 1.08s.
√ Beépített 28 ms.

Minden „Beépített…” sor egy összeállítást képvisel, amelyet a tartalom megváltoztatása és a mentés vált ki.

Ha a saját szerveremet akarom használni, nem pedig a Parcel beépített fejlesztőszerverét, használhatom a watch parancsot:

csomagmegfigyelő index.html

Ugyanezt az eredményt kapom a terminál ülésem során, amikor a Parcel.js felépíti az alkalmazásomat, majd vár a változásokra:

$ parcella néző index.html
√ Beépített 855 ms.

A dist / mappa

Miután megfigyelési módban vagy a beépített kiszolgálón keresztül elindítottam a Parcel.js-t, ha a projekt mappájába nézem, a következő mappát és fájlszerkezetet fogom látni:

index.html
package.json
js /
└───── index.js
dist /
└───── index.html
└───── js.00a46daa.js
└───── js.00a46daa.js.map

Figyelem: automatikusan létrehozott dist mappa. Itt vannak a termelési fájlok; Nem érzem meg a fájlok egyikét sem. Vegye figyelembe, hogy a Parcel build automatikusan átalakította az index.js fájlt egy egyedi gyorsítótár-barát verzióval (felülvizsgált vagy “revved” fájlnévvel). Hozzáadott egy forrástérkép-fájlt is (elolvashatja a forrástérképeket ebben a posztban).

Ha az index.html fájlomban a dist mappában keressem, a következőket látom:

html>
<html>
<fej>
<cím>Parcel Demotitle>
fej>
<test>

<src ="/js.00a46daa.js">forgatókönyv>
test>
html>

Figyelem: az index.html fájl dist verziója helyesen és kényelmesen mutat az én .js fájlom dist verziójára.

Ha a webhelyem több fájlt tartalmaz, amelyek ugyanazon szkriptekre mutatnak (például about.html, contact.html stb.), Használhatom a következő parancsot:

csomag index.html about.html contact.html

Ez azt mondja a Parcel-nek, hogy több belépési pontot akarok használni az építéshez. Azt is használhatom a következő paranccsal, hogy megmondjam a Parcel.js-nek, hogy az összes HTML-fájlt belépési pontként használja:

csomag * .html

A Parcel.js használata a Bábel segítségével

A Parcel.js beépített támogatást nyújt különböző kódátültetőkhöz, ideértve a Babel, a népszerű eszköz a modern új generációs JavaScript konvertálásához egyenértékű kódmá, amely minden böngésző számára érthető. Mivel a Bábel be van építve a Parcel.js fájlba, használatához nincs szüksége külön beépülő modulra, csak működik. Nézzünk meg egy példát.

A következő kódot fogom hozzáadni az index.js fájlomhoz:

getInfo függvény (név, év = 2018, szín = ‘kék’) {
console.log (név, év, szín);
}

getInfo (‘Chevy’, 1957, ‘zöld’);
getInfo (‘Benz’, 1975);
getinfo ( ‘Honda’);

Ez a kód egy ES6 funkciót hív alapértelmezett paraméterek, amelyet kifejezetten láthat a funkciófejben. A régebbi böngészők nem támogatják a funkciók alapértelmezett paramétereit. Annak biztosítása érdekében, hogy a kód ne okozzon hibát, Babelnek át kell ültetnem a kódot egyenértékű kódba, amely minden böngészőben működik. Miután elmentettem az index.js fájlt, a Parcel.js újratelepíti az alkalmazásomat, és a következőt állítja elő az én írt ES6 kód helyett:

getInfo (név) függvény {
var év = argumentumok.hossz > 1 && érvek [1]! == meghatározatlan? érvek [1]: 2018;
var color = argumentumok.hossz > 2 && érvek [2]! == meghatározatlan? érvek [2]: „kék”;
console.log (név, év, szín);
}

getInfo (‘Chevy’, 1957, ‘zöld’);
getInfo (‘Benz’, 1975);
getinfo ( ‘Honda’);

Használhatja a Babel online repl címét tesztelje ezt.

És vegye figyelembe a legfontosabb tényezőt: nem tettem semmit a Bábel telepítéséhez vagy konfigurálásához – ez csak a dobozból működik, a Parcel alapértelmezett beállításának részeként! Természetesen érdemes felvennie néhány konfigurációs opciót is, hogy megváltoztassa a Bábelot, hogy tegye azt, amit akar. Ebben az esetben hozzáadhat .babelrc fájlt a projekt gyökérmappájába, a konfigurációs beállításokkal együtt. Tudod többet olvasni a .babelrc fájl használatával a Parcel.js honlapon.

A Parcel.js használata a Sass-szal

A Babelhez hasonlóan a Parcel alapértelmezés szerint automatikusan lefordítja az SCSS (Sass) fájljaimat is érvényes CSS-re. Ennek igazolására hozzá fogok adni egy „css” nevű mappát a példaprojekt gyökérzetéhez. A mappába hozzáadok egy style.scss fájlt a következő Sass-kóddal:

test {
fekete szín;

.modul {
piros szín;
}
}

Sass választó fészkelő funkcióját használom. A következő sort fogom hozzáadni a HTML-fájljaim szakaszához:

<link rel ="stylesheet" href ="./css/style.scss">

Az összes fájl elmentése után a Parcel friss összeállítást készít a dist / mappámba egy összeállított CSS-fájllal, amely az SCSS-t a következőre konvertálta:

test {
fekete szín;
}
test .modul {
piros szín;
}

Mindaddig, amíg globálisan telepítettem a Sass-ot a rendszeremre, a Parcel ezt automatikusan megteszi, konfiguráció nélkül. Ha nincs telepítve a Sass globális telepítése, akkor ez nem jelent gondot. Csak el tudom írni az SCSS-t, majd a Parcel elindul, és a Parcel automatikusan telepíti a Sass-ot projektfüggő függőségként. Nagyon kényelmes! És ismét ez különösen akkor hasznos, mert nem igényel semmilyen konfigurálást.

Csakúgy, mint a Babel esetében, dönthetek úgy is, hogy az alapértelmezett konfigurációs beállításokat a Sass-szal végezzem. Vagy létrehozhatom .sassrc fájlt a projekt gyökérkönyvtárában, és hozzáadhatom saját konfigurációim.

Több szkript csomagolása a Parcel segítségével

Az eddig bemutatott példák csak arra szólnak, hogy felkészítsék Önt és működjenek a Parcel segítségével, így alapvető ötletet kaphat a működéséről. Mint korábban említettem, bármely kötegelőkészüléknek az a képessége, hogy több fájlt automatikusan egyesítsen egyetlen fájlba. Ez elősegíti a HTTP-kérelmek csökkentését és a webhely vagy alkalmazás sebességének javítását.

Minden, amit eddig demonstráltam, több szkripttel is elvégezhető, amelyeket az ES6 modul szolgáltatásával vonzunk be. Ez lehetővé teszi számomra a szkriptek moduláris létrehozását és importálását. Ez megkönnyíti a kódom karbantartását, miközben csak egyetlen csomagban lévő szkriptet szolgál a termelésben.

Ennek igazolására külön modulot fogok hozzáadni, amely a következő JavaScriptet fogja tartalmazni:

export legyen színes = ‘zöld’;

export funkció hozzáadása (n1, n2) {
visszatérés n1 + n2;
}

Ez csak néhány alapkód két objektum exportálásához: egy változó és egy függvény. Az index.js fájlban ezeket az erőforrásokat a következő kóddal importálom:

importáljon {color, add} a ‘../js/module.js’ könyvtárból;

console.log (szín); // "zöld"
console.log (add (20, 40)); // 60

Ismét, ez csak az alapvető ES6 modul szintaxis. Nem fogok belemenni a működés részleteibe. A gyönyörű rész az a tény, hogy nem kellett HTML-fájlban megadnom, hogy egy modult használtam. Általában a szkriptcímkém így néz ki, a type attribútumot a modulra állítva:

<src ="./js/index.js" type ="modul">forgatókönyv>

De erre nincs szükség. A Parcel felismeri az importált modult, és a két parancsfájlomat egyetlen teljesítménybarát erőforrásba köti. Ez különösebb konfiguráció vagy beépülő modul nélkül történik. És ugyanúgy, mint a korábbi példákban, a kódot a Babel segítségével ES5-ekvivalens kódba ültettük át, amely a legtöbb böngésző támogatást fogja nyújtani nekem..

Kódfelosztás a Parcel.js segítségével

A Parcel még egy olyan szolgáltatás, amely konfiguráció nélkül működik kód felosztás. Bizonyos esetekben szeretném, ha az összes modulom bekerülne az összes oldalra. De más esetekben csak bizonyos modulokat szeretnék betölteni bizonyos oldalakra, bizonyos összefüggésekben. Ez az, amit a kóddarabolás lehetővé tesz.

Korábban megemlítettem, hogy a példaprojekt három oldalból áll: index.html, about.html és contact.html. Tegyük fel, hogy ugyanazt a JavaScript-köteget szeretném futtatni mind a három oldalon, de a about.html oldalon van egy gombom, amely valami konkrétot aktivál. De csak azt akarom, hogy a kód betöltődjön, amikor ezt a gombot megnyomják.

Így néz ki a kód a kódrészlet használatával:

if (document.querySelector (‘. about’)) {
document.querySelector (‘. about’). addEventListener (‘click’, () => {
import (”../ js / about.js). majd (
document.body.innerHTML + = ‘Az oldal frissítve’;
);
});
}

Figyelem: ez magában foglal egy új JavaScript funkciót, dinamikus import az import () függvény használatával. Ez lehetővé teszi, hogy dinamikusan betöltsem a kívánt kódot egy adott példányban. Ebben az esetben azt csinálok, amikor egy gombot megnyomnak a kb. Oldalon. Az import () szolgáltatás ígérettel tér vissza, tehát bármit megtehetek a .then () záradékon belül, amely az importált szkript betöltésekor aktiválódik. A about.js szkript igény szerint betöltődik, és ezt a kódot a Babel áthelyezi az ES5 kereszt-böngészőbe, hogy mindenütt működjön. Amikor a köteg elkészül, a about.js részt a saját fájlba helyezzük a dist / mappába, hogy ezt a fájlt igény szerint lehessen betölteni..

Más, már tárgyalt funkciókhoz hasonlóan, az import () szolgáltatás a Parcelben is működik, konfiguráció nélkül.

A termelés a Parcel.js segítségével épül fel

Mostanáig az összes parcelem repülésre épül, a Parcelhez tartozó beépített szerver segítségével, amely tartalmazza az élő újratöltést. Minden alkalommal, amikor mentem a projektem, a csomagom felépül. A kódot mindig a folyamatos fejlesztéshez csomagolták. Ily módon megvizsgálhatom vagy megvizsgálhatom a forrást, ha szükséges, néhány hibakereséshez.

Amint a projektem befejeződik és készen áll arra, hogy egy élő szerverre továbbítsam, megállíthatom a Parcel figyelését a projektemmel. A terminálon található CTRL-C sok platformon ezt teszi. Aztán futtatom a következő parancsot, hogy megmondjam Parcel-nek, hogy készítsen egy utolsó összeállítást:

parcel build index.html about.html contact.html

Ebben az esetben mind a három bejegyzésemből építek. Amint ez megtörtént, a Parcel már nem vár a változásokra; a végső köteg fel van készülve és ennyi. A befejeződő építkezésen kívül a kódomat előkészíti a Parcel gyártása. A HTML, a CSS és a JavaScript mindegyikére optimalizált teljesítmény elérése érdekében a lehető legkisebb fájlokat készítik.

A Parcel használatának hátrányai?

A csomagot mindenképpen választani kell azok számára, akiknek kevés vagy nincs tapasztalata az építőszerszámokkal. De a saját kutatásom során találtam néhány dolgot, amelyek megemlíthetők, és amelyeket a jövőben javítani kell.

Mindenekelőtt észreveszi, hogy a Parcel mindig a csomagban szereplő szkripteket és stíluslapokat ugyanabba a könyvtárba helyezi, mint a belépési pont HTML fájljait. Ez akkor is megtörténik, ha a CSS és a JavaScript fájlok külön mappákban vannak. Mivel ezek termelési fájlok, lehet, hogy nem számít. De ezt szem előtt kell tartani. A jó hír ez úgy tűnik, hogy javításra került a közelgő Parcel 2. verzióban (még mindig Alpha-ban). Tehát legyen mód arra, hogy felülbíráljuk ezt a viselkedést, ha a Parcel verziója stabil (a jelenlegi stabil verzió 1.12.4).

További hátrány, hogy a Parcel dokumentációja elég minimális volt, amikor a különböző szolgáltatások konfigurációs lehetőségeinek testreszabásáról van szó. Igaz, hogy a Parcel egyik hatalmas előnye, hogy jól működik-e a dobozból. De szerintem hasznos lenne néhány szélesebb körű dokumentáció a testreszabásához. Például, hogyan tilthatom le a HTML-tömörítést az építéseimben, miközben megőrzem a CSS és a JavaScript tömörítést? Nem látom ennek leírását a dokumentumokban. Amikor átnéztem a GitHub zárt kérdéseit, ott van egy megoldás (azt hittem, hogy nem túl kényelmes).

Következtetés

Az utolsó dolog, amelyet megemlítek, az úgynevezett eszköz App létrehozása, amely segítségével automatikusan elkészítheti a Parcel konfigurációs fájljait. Ez lehetővé teszi a JavaScript könyvtár, az átültető, a linter stb. Kiválasztását, és ezeket mind hozzáadja a package.json fájlhoz, készen áll az inicializálásra..

Hozzon létre alkalmazást a Parcel.js alkalmazásban

Erről szól ez a Parcel bemutató kezdőknek. Remélem, hogy felhasználhatja ezeket az információkat, hogy gyorsan felálljon és működjön együtt a Parceltel, és felhasználhatja azokat a jövőbeli projektek során. És ha még nem ismeri az alkalmazások csomagolását, vagy még soha nem próbálta meg egy projekten, akkor talán ez a bevezetés arra ösztönzi Önt, hogy próbálja ki a Parcelt.

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

Elrendezés és előadás: K Karol.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map