Przygotowanie narzędzi do pracy – Browserify. Daj się poznać 2016.

W dzisiejszym poście opiszę jak przygotowuję projekt, wykorzystujący narzędzie Browserify. Jest mi ono potrzebne ponieważ, jak wspominałem w poprzednim poście, chcę wykorzystać moduły node.js. O modułach w node też już pisałem co nieco.

Teraz chcę wykorzystać moduły w autentycznym projekcie. Problem polega na tym, że mechanizmy je obsługujące działają tylko w środowisku uruchomieniowym node. Niestety, środowiska tego nie ma w przeglądarkach. I tu z pomocą przychodzi Browserify.

Browserify dla początkujących

Tak naprawdę post ten mógłbym zatytułować: „Browserify dla początkujących”. Będzie tu, jak działa to narzędzie, jak je zainstalować oraz jak z niego korzystać.

Na początku jednak napiszę trochę więcej dlaczego potrzebuję Browserify. Dzięki wykorzystaniu modułów node mogę uporządkować swój kod. Program podzielony będzie na moduły, każdy zawierający niezależną logikę, i każdy będący w osobnym pliku. Na przykład, wszystkie stany gry, będą teraz osobnymi modułami. Osobnym modułem może być na przykład też funkcja sprawdzająca wystąpienie kolizji.

Aby wykorzystać większą ilość plików w przeglądarce, musiałbym w elemencie head dodać je wszystkie w tagach script. Każdy kto robił coś takiego, wie jakie to męczące i przy okazji jak łatwo się pomylić dodając pliki w złej kolejności.

Na szczęście jest Browserify. Narzędzie samo stwierdzi jaka powinna być kolejność ładowania modułów i stworzy jeden wielki plik (zwany często „bundle” czyli pakiet), w którym wszystkie require oraz exports zostaną zamienione w odpowiednie przypisania i wywołania. Do pliku html w tagu script wystarczy dodać tylko bundle i gotowe. Czary 🙂 .

Tak samo ‚bundlować’ można kod zewnętrznych modułów, takich jak jQuery czy underscore. Wystarczy dołączyć je do projektu tak jak opisałem to w poprzednim poście. Według mnie jest to znacznie wygodniejsze niż ‚standardowe’ podejście.

Czas na konkrety, jak to zainstalować i jak z tego korzystać. Na początek oczywiście potrzebne będzie node.js. Kolejny krok to instalacja Browserify. Można to zrobić za pomocą npma. W konsoli wpisuję odpowiednie polecenie:

Browserify dla początkujących

Ponieważ, jest to instalacja globalna, polecenie należy wywołać jako administrator. Dlaczego globalnie a nie do projektu? Ponieważ, Browserify używać będę tylko podczas tworzenia programu, nie jest ono jego częścią. Wydaje mi się też, że będę sporo go używał w przyszłości więc przyda mi się łatwy dostęp do tego narzędzia 🙂 .

Instalacja chwilę trwa, więc cierpliwie czekam aż znów zobaczę odpowiedni prompt konsoli. Minutka albo dwie i gotowe, Browserify zainstalowane 🙂 .

Zanim przejdę do przykładów wykorzystania, zainstaluję jeszcze jedno bardzo przydatne narzędzie – Watchify.

watchify

Watchify pomoże w automatyzacji procesu ‚bundlowania’. Ale o tym za chwilę

Kolejny krok to utworzenie katalogu projektowego, w którym przetestuję to narzędzie. Katalog otrzyma piękną nazwę ‚TEST. W katalogu inicjalizuję NPM (komenda npm init), tworząc plik package.json o takiej treści:

Do projektu dodam jeszcze bibliotekę jQuery (komenda npm install jQuery). Następnie tworzę plik „app.js”, będzie to plik wejściowy dla moich modułów:

Najpierw przy pomocy require dodaje do modułu jQuery, które przypisuję do znaku dolara. Następnie tworzę nagłówek HTML, który dodaje do elementu body. Nagłówek otrzymuje tekst oraz styl, powodujący, że po najechaniu kursor zamieni się w ‚łapkę’.

W katalogu testowym tworzę też plik index.html, który będę uruchamiał w przeglądarce. Zawiera od podstawowy kod:

Struktura katalogu wygląda teraz tak:

Dodanie teraz skryptu do pliku html nie zadziała. Przeglądarka nie rozpozna wywołania require. Czas na użycie Browserify. Narzędzie jest już zainstalowane, muszę tylko zmienić ustawienia projektu tak, aby je wykorzystywał. Robię to w pliku package.json. Trzeba dodać odpowiednie pole do obiektu scripts. Nazwa pola, to polecenie, którym uruchamiać będę skrypt, jego zawartość to treść skryptu. Treść package.json po zmianach wygląda tak:

Jak widać polecenie to ‚build‚ a jego ‚skrypt’ to po prostu polecenie dla konsoli. komenda browserify najpierw przyjmuje plik wejściowy czyli app.js, następnie wskazuje działanie atrybutem -o (od output, czyli plik wyjściowy) a po nim nazwa pliku wyjściowego, w moim wypadku pakiet.js.

Teraz mogę wywołać polecenie npm run build aby zbudować mój nowy pakiet.

browserify

Taka komenda spowoduje, że w katalogu pojawi się plik pakiet.js (chyba, że już istnieje to wtedy się zaktualizuje), zawierający wszystkie używane w app.js moduły.

pakiet.js mogę dodać już do mojego pliku html. Poniewż manipuluję DOMem, dodaję element script na końcu body. Dzięki temu mam pewność, że wszystkie elementy będą już załadowane gdy skrypt się odpali. Trzeba o tym pamiętać, mimo wszystkich czarów to wciąż środowisko przeglądarki 🙂 .

Kiedy otwieram stronę index.html wszystko działa! Sukces!

Ale czy za każdym razem, kiedy zmienię coś w pliku app.js, lub podlegających mu modułach, będę musiał wywoływać w konsoli komendę build? Na szczęście nie, mogę tu sobie pomóc wspomnianym wcześniej Watchify.

Aby skorzystać z tego narzędzie muszę dodać nową komendę do obiektu scripts w pliku package.json:

Nowa komenda to watch i działa prawie identycznie jak build. Oczywiście zamiast browserify, wywołuję watchify. Do tego na końcu dodaję jeszcze atrybut -v, dzięki któremu w konsoli będą pojawiać się szczegółowe informacje na temat aktualizowania pakietów. Wystarczy teraz, że odpalę ten skrypt wpisując komendę npm run watch:

watchify

Na obrazku widać też parę informacji o aktualizacjach pliku pakiet.js. Będzie on teraz (dopóki działa npm run watch) aktualizował ‚się sam’, za każdym razem, gdy zapiszę plik app.js lub podległe mu moduły.

Aby ostatecznie przetestować działanie tych narzędzi, dodam jeszcze swój własny moduł. Nazwę go header i umieszczę w nim kod odpowiedzialny za obsługę elementu nagłówka. Do projektu dodam nowy plik header.js. Tak wygląda nowa treść obu moich modułów:

app.js:

header.js:

W głównym pliku do zmiennej header ‚requieruję’ zawartość modułu header, który znajduje się w tym samym katalogu, gdyby był na przykład w pod-katalogu elems, wywołanie require wyglądało by tak:

Nie muszę dopisywać rozszerzenia pliku, żadne inne niż .js i tak nie zadziała.

W module header tworzę odpowiedni element przy pomocy jQuery. Następnie dodaje do niego odpowiednie właściwości. Gdy kliknie się w nagłówek zacznie on rosnąć.

A wszystkie te zmiany dodałem bez jednego wywołania komendy browserify 🙂 .

Idealnie! wszystko działa, Browserify działa, Watchify działa moduły node’a działają 🙂 . Można zabierać się za właściwy projekt. Ale to już w kolejnych postach.

Jak zawsze zachęcam do polubienia mojej strony na facebooku. Można tam znaleźć wszystkie informacje o wszystkich nowościach na blogu. Do tego jest to dobre miejsce na kontakt ze mną. Tymczasem do zobaczenia w kolejnych postach konkursowych.

4 przemyślenia nt. „Przygotowanie narzędzi do pracy – Browserify. Daj się poznać 2016.”

  1. Co do broweserify, nodejs i ogólnie „bundlowania” natknąłem się na pewien problem i nie wiem jak najbardziej elegancko go rozwiązać 🙂

    Browserify świetnie sprawdza się w przypadku plików JS, ale np. instalując przez npm framework bootstrap, mamy tam poza JS najistotniejsze pliki CSS. Jak je wtedy dołączać do projektu? Czy pliki JS pozostawić dla broweserify do zbundlowania a css wrzucić do innej lokalizacji (np. css/vendor) i linkować tradycyjnie lub bundlowac gulpem?

      1. Hej Piter, browserify służy wyłącznie do łączenia modułów w jeden plik, który można podać przeglądarce, nic więcej. Trzeba to zrobić bo przeglądarka nie rozumie wywołań ‚require’. Mógłbyś pobrać moduł jQuery i połączyć go z resztą swoich modułów ale to nie jest najlepszy pomysł. Zresztą, z CSSami tego nie zrobisz. Tobie chodzi nie tyle o bundlowanie kodu co o buildowanie całego projektu. Do tego lepiej służy Gulp, który może „przerzucać” pliki po projekcie i „injectować” je do dokumentu html. Na blogu jest post lub dwa o gulpie. Poszukaj przez wyszukiwarkę, to powinno Ci pomóc.

        Jest jeszcze jedno bardzo fajne narzędzie, które może Ci jeszcze bardziej podpasować – Webpack. Można powiedzieć, że on łączy w sobie właściwości browserify i gulp. W tym mc powinien pojawić się wpis lub dwa na temat webpacku więc zachęcam do śledzenia 🙂

        1. Dzięki wielkie za odpowiedź. Tak właśnie zrobiłem to gulpem gdzie concat’em złączam wszystkie pliki css, do których ścieżki hardocoduję do katalogu node_modules. Z Browserify bardziej mi chodziło o analogiczne narzędzie do CSSów, ale chyba nie ma mozliwości robienia tego w tak elegancki sposób jak robi to Browserify z plikami/modułami js (podając w required nazwę modułu). Webpacka jeszcze nie znam, więc czekam na wpis 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *