Úvod do Parcel.js, Bundler webových aplikací bez konfigurace

Tento příspěvek je vaším úvodem do Parcel.js, samozvaného "hořící rychlý, nulový konfigurátor webových aplikací." Zde je vše, co potřebujete vědět, abyste s tím mohli začít:


Mnoho vývojářů front-end frustrovalo některé složitosti spojené s vytvářením webových aplikací dnes. Je běžnou praxí zahrnout nějaký nástroj pro sestavení nebo seskupení do front-end workflow, takže mnoho vývojářů se zabývalo použitím front-end nástroje, jako je webpack.

Webpack je nejoblíbenějším bundlerem a následovalo to na patách Require.js, Rollup a podobných řešení. Ale křivka učení nástroje jako webpack je strmá. Začínáme s webpackem není snadné kvůli jeho složitým konfiguracím. V důsledku toho se v posledních letech objevilo jiné řešení. Tento nástroj není nutně front-runner, ale jednodušší stravitelnou alternativou na front-end modulu bundler krajiny. Představujeme Parcel.js.

Úvod do Parcel.js

Parcel.js (parceljs.org) je přesně to, co mnoho začínajících vývojářů vyžaduje: Jednoduchý, nízko konfigurační balíček, se kterým můžete rychle začít pracovat.

Doufám, že tento tutoriál Parcel poskytne snadno úvodní úvod k tomuto nástroji. Podívám se na základy a pak vám ukážu, jak používat Parcel k sestavení jednoduché webové aplikace, která zahrnuje Babel a Sass..

�� Obsah:

  1. Proč používat balíček webových aplikací? #
  2. Instalace Parcel.js #
  3. Vytvoření vstupního bodu souboru #
  4. Dist / folder #
  5. Používání Parcel.js s Babel #
  6. Používání Parcel.js s Sass #
  7. Seskupení více skriptů s číslem Parcel #
  8. Rozdělení kódu pomocí Parcel.js #
  9. Výroba se staví s Parcel.js #
  10. Nějaké nevýhody používání Parcelu? #

Web Parcel.js

Proč používat balíček webových aplikací?

Nebudu trávit příliš mnoho času diskutováním o důvodech použití balíčku aplikací, jako je Parcel.js, protože toto téma bylo určitě již pokryto. Zde je však základní přehled výhod, které používání takového nástroje přináší:

  • Vaše aplikace bude mít méně požadavků HTTP kvůli kombinování skriptů nebo stylů
  • Skripty a šablony stylů lze načíst na vyžádání, což dále zvyšuje výkon
  • Skripty a šablony stylů lze automaticky minifikovat, aby uživateli poskytly méně kilobajtů
  • Svazování a minifikace se provádí automaticky pomocí nástroje, což minimalizuje ruční práci
  • Vývojové soubory jsou uspořádány modulárně, což usnadňuje údržbu a ladění vašeho kódu

Jak vidíte, výhody mají mnoho a většinou se týkají výkonu a údržby projektu. Určitě existuje spousta důvodů, proč použít bundler, pokud je to něco, o čem jste dosud neuvažovali.

Když to z cesty uděláme, začněme se základy pro vstávání a běh s Parcel.js. Pomalu přejdu funkcemi v tomto tutoriálu pomocí několika jednoduchých příkladů, které budete moci snadno sledovat spolu s nimi.

Instalace Parcel.js

Parcel.js můžete do svého terminálu nainstalovat pomocí příze nebo npm. Pro tento tutoriál použiju npm. Zde je příkaz nainstalovat jej globálně, abyste jej mohli použít na jakýkoli projekt:

npm install parcel-bundler -g

Příznak -g jej nainstaluje globálně. Pokud jej chcete nainstalovat pouze pro jeden projekt a přidat jej do devDependencies vašeho projektu v package.json, můžete stejný příkaz spustit v kořenové složce projektu pomocí příznaku –save-dev místo -g:

npm install parcel-bundler –save-dev

S globální instalací (což bude nejběžnější případ použití) můžete zahájit jakýkoli daný projekt pomocí příkazu init. Pomocí terminálu přejděte do složky, kterou chcete použít jako kořen vaší aplikace, a spusťte:

npm init -y

Parametr -y zabraňuje npm v kladení otázek pomocí výchozího nastavení. Za předpokladu, že se můj projekt nazývá parcel-demo, vytvoří se v kořenovém souboru soubor.jpg, který vypadá takto:

{
"název": "demonstrační balíček",
"verze": "1.0.0",
"popis": "",
"hlavní": "index.js",
"skripty": {
"test": "echo \"Chyba: nebyl zadán žádný test \" && výjezd 1"
},
"klíčová slova": [],
"autor": "",
"licence": "ISC"
}

Pokud shledáte některou z výše uvedených záměn kvůli vaší nedostatečné znalosti npm, můžete se podívat na můj komplexní návod na npm. Zaměřuje se na pomoc vývojářům front-end webových stránek porozumět tomuto nástroji.

Vytvoření vstupního bodu souboru

Pro základní nastavení projektu budu používat soubor Parcel.js v souboru index.html, který odkazuje na primární soubor JavaScript nazvaný index.js (jak je vidět v souboru package.json). Tento soubor HTML bude sloužit jako můj vstupní bod zásilky. Můj soubor HTML bude obsahovat prvek skriptu, který odkazuje na můj soubor JavaScript, takže bude vypadat asi takto:

html>
<html>
<hlava>
<titul>Balíček Demotitle>
hlava>
<tělo>
<skript src ="./js/index.js">skript>
tělo>
html>

Jakmile budu mít správný soubor HTML a soubor JavaScript, mohu spustit vestavěný vývojový server Parcel spuštěním následujícího v terminálu ve složce projektu:

parcel index.html

Tím se spustí server a řekne mu, jaký soubor použít jako vstupní bod. Výsledkem je, že v mé relaci terminálu dostanu následující zprávu:

Server běží na http: // localhost: 1234
√ Vestavěný v 887ms.

Nyní si v prohlížeči mohu otevřít http: // localhost: 1234 / a podívat se na to, co jsem dosud postavil. Živý server používá živé opětovné načtení a něco zvaného výměna horkého modulu. To automaticky aktualizuje moduly na stránce, aniž by došlo k úplnému obnovení stránky. Tímto způsobem vidím postup své výstavby v rychlejších krocích, jak pracuji.

Jakmile spustím server Parcel.js s aktivním serverem, všechny změny provedené v souboru automaticky znovu vytvoří mou aplikaci při každém uložení souboru. Abych to viděl v akci, přidám do svého skriptu jednoduchý řádek protokolu konzoly. V mém terminálu se spustí následující zpráva:

$ parcel index.html
Server běží na http: // localhost: 1234
√ Vestavěné za 1,08 s.
√ Vestavěný 28ms.

Každý řádek „Built…“ představuje jedno sestavení, vyvolané změnou obsahu a uložením.

Pokud chci použít vlastní server, místo vestavěného vývojového serveru Parcel, mohu použít příkaz watch:

sledovat balíčky index.html

Stejný výsledek dostanu v mé terminálové relaci, s tím, že aplikace Parcel.js buduje mou aplikaci a poté čeká na změny:

$ parcel sledovat index.html
√ Vestavěný 855ms.

Dist / složka

Jakmile spustím Parcel.js v režimu sledování nebo prostřednictvím vestavěného serveru, podívám-li se do složky projektu, uvidím složku a strukturu souborů, jako je následující:

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

Všimněte si automaticky vytvořené složky dist. Tady jsou moje produkční soubory; Nedotýkám se žádného z těchto souborů. Všimněte si, že moje sestavení Parcel automaticky převedlo můj soubor index.js na soubor s jedinečnou verzí vhodnou pro mezipaměť (s revidovaným nebo „revvovaným“ názvem souboru). Přidal se také zdrojový mapový soubor (o zdrojových mapách si můžete přečíst) v tomto příspěvku).

Pokud se podívám do svého souboru index.html uvnitř složky dist, zobrazí se následující:

html>
<html>
<hlava>
<titul>Balíček Demotitle>
hlava>
<tělo>

<skript src ="/js.00a46daa.js">skript>
tělo>
html>

Všimněte si dist verze mého souboru index.html správně a pohodlně odkazuje na dist verzi mého souboru .js.

Pokud můj web obsahuje více souborů, které ukazují na stejné skripty (například about.html, contact.html atd.), Mohu použít následující příkaz:

index zásilky.html about.html contact.html

Toto říká Parcelovi, že chci použít více vstupních bodů, ze kterých budovat. Také mohu použít následující příkaz k tomu, abych Parcel.js řekl, aby používal všechny mé HTML soubory jako vstupní body:

balíček * .html

Používání Parcel.js s Babel

Parcel.js má vestavěnou podporu pro různé kódové překladače, včetně Babel, oblíbený nástroj pro převod moderního kódu JavaScript nové generace na ekvivalentní kód, kterému rozumějí všechny prohlížeče. Protože je Babel zabudován do Parcel.js, pro jeho použití nepotřebujete speciální plug-in, prostě to funguje. Podívejme se na příklad.

Do svého souboru index.js přidám následující kód:

funkce getInfo (jméno, rok = 2018, barva = ‘modrá’) {
console.log (jméno, rok, barva);
}

getInfo (‘Chevy’, 1957, ‘Green’);
getInfo (‘Benz’, 1975);
getInfo (‘Honda’);

Tento kód používá funkci nazvanou ES6 výchozí parametry, které můžete vidět konkrétně ve funkční hlavě. Starší prohlížeče nepodporují výchozí parametry funkcí. Aby se zajistilo, že kód nevyhodí chybu, potřebuji, aby Babel převedl kód do ekvivalentního kódu, který funguje ve všech prohlížečích. Po uložení souboru index.js Parcel.js znovu sestaví mou aplikaci a místo kódu ES6, který jsem napsal, vytvoří následující:

funkce getInfo (jméno) {
var year = argumenty.length > 1 && argumenty [1]! == nedefinované? argumenty [1]: 2018;
var color = argumenty.length > 2 && argumenty [2]! == nedefinované? argumenty [2]: ‘modrá’;
console.log (jméno, rok, barva);
}

getInfo (‘Chevy’, 1957, ‘Green’);
getInfo (‘Benz’, 1975);
getInfo (‘Honda’);

Můžete použít online odpověď Babela vyzkoušejte to.

A všimněte si tu nejdůležitějšího faktoru: Neudělal jsem nic, abych nainstaloval nebo nakonfiguroval Babela – funguje to hned jako součást výchozího nastavení Parcelu! Samozřejmě můžete chtít přidat některé možnosti konfigurace, které Babella změní tak, aby dělal, co chcete. V takovém případě můžete do kořenové složky projektu přidat soubor .babelrc včetně vašich konfiguračních preferencí. Můžete si přečíst více o pomocí souboru .babelrc na webových stránkách Parcel.js.

Používání Parcel.js se Sassem

Podobně jako Babel bude Parcel ve výchozím nastavení automaticky kompilovat mé SCSS (Sass) soubory do platných CSS. Abych to dokázal, přidám do kořenového adresáře mého příkladu projekt složku s názvem „css“. Do této složky přidám soubor style.scss s následujícím kódem Sass:

tělo {
Černá barva;

.modul {
červená barva;
}
}

Používám funkci vnoření selektoru Sass. Do části svých souborů HTML přidám následující řádek:

<link rel ="šablony stylů" href ="./css/style.scss">

Jakmile jsou všechny mé soubory uloženy, Parcel vytvoří nové sestavení v mé dist / složce s kompilovaným souborem CSS, který převedl můj SCSS na následující:

tělo {
Černá barva;
}
body .module {
červená barva;
}

Dokud budu mít Sass nainstalován na celém světě, Parcel to bude dělat automaticky, bez nutnosti konfigurace. Pokud nemám globální instalaci Sassu, žádný problém. Mohu jen napsat svůj SCSS, pak spustit Parcel a Parcel nainstaluje Sass automaticky jako závislost na projektu. Velmi pohodlné! A to je zvláště užitečné, protože nevyžaduje žádnou konfiguraci.

A stejně jako u Babela, i já si mohu vybrat, zda půjdu s jakýmkoli výchozím konfiguračním nastavením, které přichází se Sassem. Nebo mohu vytvořit soubor .sassrc v kořenovém adresáři svého projektu a přidat moje vlastní konfigurace.

Balíček více skriptů s balíčkem

Příklady, které jsem vám zatím ukázal, jsou jen proto, abyste vás seznámili a provozovali s Parcelem, abyste získali základní představu o tom, jak to funguje. Jak již bylo zmíněno dříve, síla jakéhokoli svazku je schopnost automaticky kombinovat více souborů do jednoho souboru. Pomáhá to snížit požadavky HTTP a zvýšit rychlost vašeho webu nebo aplikace.

Všechno, co jsem doposud demonstroval, lze provést pomocí více skriptů, které jsou vtaženy pomocí funkce modulu ES6. To mi umožňuje vytvářet a importovat skripty modulárním způsobem. Díky tomu je můj kód snadno udržovatelný a zároveň se produkuje pouze jeden skript ve svazku.

Abych to dokázal, přidám samostatný soubor s názvem module.js, který bude obsahovat následující JavaScript:

export let color = ‘green’;

export funkce add (n1, n2) {
návrat n1 + n2;
}

Toto je jen základní kód pro export dvou objektů: Proměnná a funkce. V souboru index.js budu tyto zdroje importovat s následujícím kódem:

importovat {color, add} from ‘../js/module.js’;

console.log (color); // "zelený"
console.log (přidat (20, 40)); // 60

To je opět jen základní syntaxe modulu ES6. Nebudu se zabývat podrobnostmi o tom, jak to tady funguje. Krásná část o tom je skutečnost, že jsem nemusel v mém HTML souboru specifikovat, že jsem používal modul. Normálně bude moje značka skriptu vypadat takto s atributem type nastaveným na modul:

<skript src ="./js/index.js" type ="modul">skript>

Ale to není nutné. Parcel rozpozná importovaný modul a seskupí mé dva skripty do jediného zdroje příznivého pro výkon. To se děje bez zvláštní konfigurace nebo pluginů. A stejně jako předchozí příklady je kód převeden pomocí kódu Babel do kódu ekvivalentu ES5, který mi poskytne největší podporu prohlížeče.

Rozdělení kódu pomocí Parcel.js

Ještě jedna funkce v Parcelu, která funguje bez jakékoli konfigurace, je rozdělení kódu. V některých případech chci všechny své moduly načíst na všech mých stránkách. Ale v jiných případech bych mohl chtít načíst pouze určité moduly na určitých stránkách, v určitých kontextech. To mi umožňuje rozdělení kódu.

Dříve jsem se zmínil, že můj příklad projektu zahrnuje tři stránky: index.html, about.html a contact.html. Řekněme, že chci spustit stejný balíček JavaScriptu na všech třech stránkách, ale na stránce about.html mám tlačítko, které spouští něco konkrétního. Ale já chci, aby se tento kód nahrál pouze po stisknutí tohoto tlačítka.

Takto může vypadat tento kód pomocí funkce rozdělení kódu:

if (document.querySelector (‘. about’)) {
document.querySelector (‘. about’). addEventListener (‘click’, () => {
import (‘../ js / about.js’).
document.body.innerHTML + = ‘O stránce aktualizováno’;
);
});
}

Všimněte si, že to zahrnuje novou funkci JavaScriptu, dynamický import pomocí funkce import (). To mi umožňuje dynamicky načíst kód, který chci v konkrétní instanci. V tomto případě to dělám, když stisknu tlačítko na stránce o stránce. Funkce import () vrací slib, takže mohu dělat, co chci, v klauzuli .then (), která se spustí po načtení importovaného skriptu. Skript about.js se načte na požádání a Babel tento kód převede do křížového prohlížeče ES5, aby se zajistilo, že bude fungovat všude. Když se vytvoří můj svazek, část about.js se vloží do svého vlastního souboru uvnitř složky dist / folder, aby bylo možné tento soubor načíst na vyžádání.

Stejně jako další funkce, o nichž jsem hovořil, funguje funkce import () v Parcelu bez jakékoli konfigurace.

Výroba se staví s Parcel.js

Až dosud jsem vyráběl všechny své sestavy Parcel za chodu pomocí vestavěného serveru, který je součástí Parcel a který zahrnuje živé opětovné načtení. Při každém uložení projektu je vytvořen můj balíček. Ale kód byl vždy spojen pro pokračující vývoj. Tímto způsobem mohu zobrazit nebo zkontrolovat zdroj podle potřeby k provedení nějakého ladění.

Jakmile je můj projekt dokončen a připraven k odeslání na živý server, mohu zastavit Parcel v sledování mého projektu. CTRL-C v terminálu to dělá na mnoha platformách. Pak spustím následující příkaz a řeknu Parcelovi, aby vytvořil jednu konečnou sestavu:

vytvoření balíčku index.html about.html contact.html

V tomto případě stavím ze všech tří svých vstupních souborů. Jakmile je hotovo, Parcel již nečeká na změny; je vytvořen konečný balíček a to je vše. Kromě dokončení stavby je můj kód připraven k výrobě společností Parcel. HTML, CSS a JavaScript jsou minifikovány, aby vytvořily co nejmenší možné soubory pro optimalizovaný výkon.

Jakékoli nevýhody používání Parcelu?

Zásilka by rozhodně měla být volbou pro ty, kteří mají malé nebo žádné zkušenosti s nástroji pro stavbu. Ve svém vlastním výzkumu jsem však našel několik věcí, které mohu zmínit a které by se v budoucnu měly zlepšit.

Nejprve si všimnete, že Parcel vždy umístí vaše sbalené skripty a šablony stylů do stejného adresáře jako soubory HTML vstupního bodu. K tomu dochází, i když máte soubory CSS a JavaScript v samostatných složkách. Protože se jedná o produkční soubory, nemusí na tom moc záležet. Ale je třeba mít na paměti. Dobrou zprávou je, že Zdá se, že byl opraven v nadcházející verzi Parcel 2 (stále v Alpha). Proto by měl existovat způsob, jak toto chování potlačit, když je tato verze Parcel stabilní (aktuální stabilní verze je 1.12.4).

Další nevýhodou je, že jsem zjistil, že dokumentace Parcel je dost minimální, pokud jde o informace o přizpůsobení možností konfigurace pro různé funkce. Je pravda, že jednou z obrovských výhod Parcelu je to, jak dobře to funguje hned po vybalení. Myslím si však, že by byla užitečná nějaká rozsáhlejší dokumentace o přizpůsobení. Jak například mohu zakázat minifikaci HTML ve svých sestavách při zachování minifikace CSS a JavaScript? V dokumentech to nevidím. Když jsem se podíval skrz uzavřené problémy na GitHubu, existuje řešení (myslel si, že to není příliš pohodlné).

Závěr

Poslední věcí, kterou zmíním, je nástroj nazvaný Vytvořit aplikaci, které můžete použít k automatické tvorbě konfiguračních souborů pro Parcel. To vám umožní vybrat vaši knihovnu JavaScriptu, transpiler, linter atd., A všechny budou přidány do vašeho souboru package.json, připraveny k inicializaci..

Vytvořte aplikaci v Parcel.js

To je pro tento Parcel tutoriál pro začátečníky. Doufám, že tyto informace budete moci použít k rychlému uvedení do provozu a používání Parcel a jejich použití v budoucích projektech. A pokud jste novým balíčkem aplikací nebo jste jej nikdy nezkoušeli na žádném projektu, možná vás tento úvod inspiruje k vyzkoušení Parcelu.

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Rozvržení a prezentace Karol K.

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