Parcel - idealne narzędzie do małych projektów

Kamil Powroźnik

2019-04-25 | 3 min

Słowem wstępu

Hej, ten artykuł skierowany jest do początkujących programistów, jednak musisz wiedzieć czym jest npm oraz plik package.json

Parcel jako no-config bundler

Jak często zmagałeś się z konfiguracją gulpa lub webpacka, tak aby jednocześnie kompilował kod .scss, minifikował pliki JavaScript lub tworzył serwer deweloperski z HMR?

Pamiętam, gdy zaczynałem naukę front-endu, kompilacja SCSS odbywała sie poprzez program Koala 🐨 lub odpowiednie skrypty w task runnerze, a później w webpacku.

Dzięki tej serii będziesz wiedzieć jak szybko i sprawnie stworzyć wygodne środowisko pracy w projekcie. Dowiesz się jak kompilować pliki SCSS, minifikować obrazy oraz skrypty JavaScript, a także zobaczysz jak używać systemu szablonów handlebars.js.

Z pomocą przyszedł bohater dzisiejszego postu - Parcel Bundler.

Śmiem twierdzić, że parcel jest najprostszym i najbardziej przyjaznym bundlerem dla początkujących developerów. I tak - naprawdę jest no-config, chyba, że sam plugin wymaga takowej konfiguracji. Zatem co tak na prawdę jest nam potrzebne do stworzenia prostego projektu? Wystarczy, że na naszym komputerze zainstalowane będzie środowisko node.js wraz z npm.

Sam bundler zainstalujemy poleceniem:

npm install -g parcel-bundler

Teraz możemy przejść do działania. Następnym krokiem jest dodanie odpowiednich skryptów w pliku package.json.

"development": "parcel [entry_point_file]",
"build": "parcel build [entry_point_file]",

Sedno sprawy

Po takim przygotowaniu projektu, możemy dojść do sedna postu, czyli dlaczego parcel jest no-config. Przedstawię to na jednym prostym przykładzie, czyli kompilacji plików .scss. W moim projekcie entry pointem podanym w konsolowym poleceniu będzie plik index.html o podstawowej stukturze.

Co zrobić aby doszło do kompilacji plików .scss?

Prosta sprawa, wystarczy że zainstalujemy kompilator scss poleceniem

npm i node-sass

i w naszym entry poincie (index.html) zaimportujemy plik uwaga, plik SCSS.

W naszym prostym projekcie będzie to wyglądać tak:

<link rel="stylesheet" href="./styles/main.scss" />

To tyle. Od teraz plik main.scss będzie kompilowany przy każdej zmianie dzięki wbudowanemu devserverowi.

Podsumowanie

Jak widzisz, używanie parcela jest bardzo proste. W następnym poście pokażę Ci jak skonfigurować system szablonów handlebars tak, aby móc stworzyć pełnoprawną stronę WWW. Do usłyszenia!

PS. kod źródłowy znajdziesz w tym repozytorium


Hej, ta strona wykorzysuje pliki cookies, localStorage, sessionStorage oraz dane osobowe do celów analitycznych.