Parcel.js: Rychlý bundler s nulovou konfigurací. Seznamte se

Tomáš Smetka, Pobo Page Builder – 9. 9. 2020

Parcel.js slouží k vytváření balíčků (bundle) používaných na frontendu při vývoji webů a webových aplikací. Jde o nástroj podobné kategorie jako Webpack, Gulp nebo kdysi Grunt.

Jde o nástroj podobné kategorie jako Webpack. Pokud hledáte alternativu ke Gruntu nebo Gulpu, zkuste raději NPM skripty.

Velkou výhodou Parcelu je rychlost, nulová konfigurace a široká škála podporovaných souborů.

Proč Parcel.js a kam s ním?

Parcel se hodí pro jakýkoliv typ projektů – jak klasické statické weby postavené na čistém HTML nebo např. na šablonách Pug, ale samozřejmě také pro projekty využívající React.js, Vue.js či Angular.

Parcel

Díky tomu, že Parcel nevyžaduje složitou konfiguraci (díváme se na tebe, Webpacku), je ideální je pro začínající frontendisty, což ale neznamená, že jej neocení pokročilí.

Poslední rok jej bez problémů používám v aplikaci Pobo Page Builder, která využívá mix Vue.js a Latte, a nenarazil jsem větší potíže.

Parcel.js nativně podporuje zdrojové mapy (source maps) pro snadnější ladění kódu ve vývojářských nástrojích prohlížečů a umožní rychlejší vyhledání problematického kódu při ladění např. blackboxového zdrojáku.

Součástí Parcel.js je podobně jako u Webpacku automatická obnova stránky v prohlížeči při úpravách (hot reloading, obdoba Browsersync), který nám umožní opravdu rychlý vývoj.

Velkou výhodou je také automatický content hashing, který řeší problémy s invalidací cache. Parcel.js po buildu dynamicky mění názvy souborů, proto se vyvarujeme problémům, kdy návštěvník stránky vidí např. týden staré ikony. Konkrétně – Parcel.js při buildu místo názvu ikony car.svg použije formát abcd123.svg, přičemž číselný hash se mění při každém sestavení.

Pojďme to zkusit – instalace

Pro ukázku budeme stylovat standardní HTML, pro stylování použijeme Sass a trochu JavaScriptu. Nainstalujeme si nejprve s pomocí NPM Parcel.js:

npm install parcel@next

Než se podíváme na konfiguraci, do .gitignore si přidáme adresář .parcel-cache, který Parcel.js používá jako interní mezipaměť.

Nyní si vytvoříme v rootu projektu soubor index.html a vložíme do něj základní HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Parcel.js demo</title>
    <link rel="stylesheet" href="dist/sass/app.css">
    <script src="dist/javascript/app.js"></script>
  </head>
  <body>
  </body>
</html>

V adresáři assets/javascript si vytvoříme testovací soubor app.js. Parcel.js používá ve výchozím nastavení @babel/preset-env, což je balíček doplňků, které umožňují kompilovat novější JS (ES6+) pro prohlížeč uvedený v konfiguraci, lze tedy v základu psát v ES6, CommonJS atd.

Dále si v adresáři assets/sass vytvoříme soubor app.scss, který se bude starat o stylování dokumentu.

Konfigurace package.json

Do [package.json](package-json.md) vložíme:

 "scripts": {
    "dev": "parcel watch ./assets/sass/*.scss ./assets/javascript/*.js",
    "serve": "parcel serve index.html",
    "build": "parcel build ./assets/sass/*.scss ./assets/javascript/*.js --no-source-maps"
  },

Na první pohled je asi zřejmé, co v těchto příkazech bude Parcel.js dělat.

parcel watch sleduje změny v *.sass a *.js souborech umístěných v adresářích. Při změně dojde ke kompilaci a hot reloading propíše změny do souboru bez nového načtení stránky.
parcel serve nastartuje lokální server pro vývoj.
parcel build zkompiluje kód do produkčního sestavení.

Související

Parcel.js ve výchozím nastavení zapisuje soubory do adresáře dist, nicméně jej můžeme změnit připsáním direktivy --out-dir. Celý zápis poté bude vypadat např. následovně:

 "scripts": {
    "dev": "parcel watch ./assets/sass/*.scss ./assets/javascript/*.js --out-dir public/www"
  },

Parcel poté soubory zapíše do adresáře public/www. Pro naše účely nám tato základní konfigurace postačí.

Pojďme to nastartovat

Nyní si spustíme příklad příkazem npm run serve, v terminálu se zobrazí informace o nastartovaném serveru pro vývoj a čas buildu:

ℹ️ Server running at http://localhost:1234
✨ Built in 2.64s

V prohlížeči otevřeme URL http://localhost:1234 a můžeme začít pracovat. Pokud uložíme změny v Sass, JavaScriptu či samotném index.html, hot reloading téměř ihned promítne změny.

Proměnné s hesly nebo konfiguracemi

S velkou pravděpodobností budeme v kódu chtít pracovat s proměnnými (API klíče, hesla, konfigurace, …). Parcel.js používá rozšířenou knihovnu dotenv. Nastíníme si použití. V kořenovém adresáři si vytvoříme soubory:

.env a přidáme do něj EXAMPLE=foo
.env.local a tam přidám EXAMPLE=bar

V JavaScriptu si poté můžeme zavolat process.env.EXAMPLE a s hodnotou dále pracovat.

A to je všechno. Základní práce s Parcelem je snadná a to potěší všechny, kteří například zápasili s Webpackem. Nenechte se ale mýlit – Parcel.js je mocný nástroj. Ukázali jsme vám základy, ale doporučujeme pokračovat v oficiální dokumentaci.