Parcel i narzędzia graficzne

Parcel

Panuje ogólnie przeświadczenie, że konfiguracja Webpacka nie należy do najprostszych. Jeżeli przebrnąłeś przez poprzedni rozdział możliwe, że masz podobne zdanie. Oczywiście - proste ustawienia napiszemy dość szybko, a nawet jeżeli dany projekt zbyt wiele nie wymaga, możemy się obejść bez żadnych plików konfiguracyjnych. Jedna komenda w terminalu i działamy.
Jednak wraz z rozrastaniem sie wymagań naszych i naszego projektu, konfiguracja taka może się dość mocno rozrosnąć. Czasami wręcz do absurdalnych rozmiarów...

Ale i na to jest rozwiązanie. Parcel, bo o nim mowa - to poniekąd rywal Webpacka, a jego główną cechą jest... brak konfiguracji.

Po wejściu na stronę https://parceljs.org/ wystarczy kliknąć przycisk "Get Starded" by przejść do instrukcji odpalenia. Nas interesuje zastosowanie tego narzędzia przy klasycznych webowych aplikajach. Przechodzimy wiec do https://parceljs.org/getting-started/webapp/

Uruchomienie

Zgodnie z instrukcją z powyższej strony, wpierw instalujemy parcela poleceniem npm install parcel -D.

Aby Parcel rozpoczął swoje działanie, musimy mu wskazań "punkt startowy". Tworzymy więc plik html, w którym dołączymy nasz skrypt (wraz z atrybutem type="module"), a od którego zacznie się bundlowanie.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <link rel="stylesheet" href="style.css">
    <script type="module" src="app.js"></script>
</body>
</html>

Jeżeli w projekcie chcielibyśmy używać Sass, wtedy ścieżkę do odpowiedniego pliku możemy dodać bezpośrednio w HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <link rel="stylesheet" href="style.scss">
    <script type="module" src="app.js"></script>
</body>
</html>

lub zaimportować go bezpośrednio w JS:


//app.js
import "style.scss";

Kolejnym krokiem jest dodanie do package.json odpowiednich skryptów odpalających parcela, oraz pliku, od wskazać plik html, od którego ma zacząć się praca:


{
  "name": "my-project",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

I w zasadzie tyle. Od tej pory odpalenie polecenia npm start uruchomi tryb developerki parcela, a my możemy zacząć swoją pracę. Na zakończenie odpalimy polecenie npm run build, które do katalogu dist zapisze zminimalizowane pliki naszego projektu. Tak właśnie powinien wyglądać nowoczesny development.

Działanie tego narzędzia dobrze obrazują poniższe filmy:

Ja osobiście używałem tego narzędzia w kilku projektach i muszę przyznać, że pracowało się z nim bardzo fajnie. Jedyna rzecz, jaka rzucała mi się w oczy to fakt, że wszystkie pliki lądowały w jednym wspólnym folderze. Jeżeli i tobie to przeszkadza, można to bardzo łatwo naprawić. Wystarczy zainstalować pakiet parcel-plugin-custom-dist-structure, a następnie zgodnie z opisem dodać do pliku package.json odpowiednią konfigurację. Tyle.


{
    ...
    "customDistStructure": {
        "config": {
            ".css": "css",
            ".js": "js",
            "images": [
                ".jpg",
                ".svg",
                ".png"
            ]
        }
    },
    ...
}

Przy okazji warto też zwrócić uwagę na pluginy, które dają dodatkowe funkcjonalności dla Parcela. Jak ich użyć? Wystarczy dany pakiet zainstalować lokalnie, a parcel czytając nasz plik package.json, gdy znajdzie pakiet z przedrostkiem parcel, automatycznie go aktywuje. Prościej się po prostu nie da...

Inne programy z interfejsem graficznym

Jeżeli nie jesteś programistą miłującym się w terminalu, możesz sięgnąć też po programy pokroju Prepros lub Codekit.

Po zainstalowaniu i dodaniu folderu z projektem w zasadzie będziesz gotów do pracy. A warto spróbować, bo programy te udostępniają większość funkcjonalności, jakie nam się przydadzą. I tak można tutaj zamieniać SCSS na CSS, minimalizować kod, odświeżać automatycznie widok, scalać pliki, korzystać z ftp, konwertować Javascript, bundlować, optymalizować grafiki itp.

Osobiście gdy w danym projekcie nie chce mi się bawić z konfiguracjami, po prostu odpalam sobie Preprosa i cieszę się jego prostotą. Jedynym mankamentem jest to, że trzeba za nie zapłacić (chociaż jest też wersja darmowa, która podobnie do Sublime Text co jakiś czas wspomina, że fajnie byłoby ją kupić).

Bundlery i Webpack Gulp