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.

Uruchomienie

Parcela możemy zainstalować globalnie, lokalnie, a możemy też tak jak w poprzednich rozdziałach odpalać go bez instalacji za pomocą npx.


npm i parcel -g //instalujemy globalnie
//lub
npm i parcel -D //instalujemy lokalnie

Aby Parcel rozpoczął swoje działanie, musimy stworzyć plik html, w którym dołączymy skrypt (wraz z atrybutem type="module"), od którego zacznie się bundlowanie.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>

    <script type="module" src="src/app.js"></script>
</body>
</html>

Gdy już taki plik mamy, wystarczy w terminalu wpisać:


//gdy mamy zainstalowane lokalnie
npx parcel --watch index.html
//gdy globalnie
parcel --watch index.html

Oczywiście warto tutaj dodać odpowiedni skrypt npm.

I w zasadzie tyle. 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ło by ją kupić).

Bundlery i Webpack Gulp