MerixGames

24 listopada 2015

/ code & tools

Jak pracować z Browserify?

Mateusz Anioła

Dopiero od niedawna, wraz z nadejściem nowego standardu ECMAScript 6 (ES2015) otrzymaliśmy do dyspozycji system modułów w JavaScript. Niestety, żeby móc korzystać z najnowszych funkcjonalności języka trzeba poczekać na natywną implementację najnowszego standardu w przeglądarkach lub korzystać z takich narzędzi jak Babel.js. Babel.js to transpiler, który przekłada nasz kod pisany w ES6 na kod, który będzie rozumiany przez wszystkie przeglądarki. Projekt jest aktualnie mocno rozwijany i ciągle pojawia się wiele zmian, więc decyzja o jego używaniu wymaga dobrego zaplanowania przyszłości projektu.

Zanim jednak w ogóle mogliśmy rozważać korzystanie z natywnego systemu modułów, społeczność skupiona wokół JavaScriptu stworzyła dwa rozwiązania:

  • CommonJS – głównie zaimplementowany w Node.js
  • AMD (Asynchronous Module Definition) – zastosowany w narzędziu Require.js

Obydwa rozwiązania opisują jak powinna wyglądać implementacja oraz składanie systemu modułów, ale podchodzą do tematu w nieco odmienny sposób.

Co ma CommonJS do Browserify?

Browserify to jedna z najpopularniejszych implementacji CommonJS API, pozwalająca definiować moduły w kodzie JavaScript wysyłanym do przeglądarki. Narzędzie to udostępnia nam funkcję require() służącą do sczytywania zależności oraz zmienną module.exports, do której przypisujemy wynik zwracany przez moduł lub fragment kodu po zaczytaniu pliku. 

W momencie uruchomienia, Browerify sprawdza wszystkie moduły zaczytywane poprzez require i buduje całe drzewo zależności. Jako argument do require podajemy ścieżkę do pliku js (lub nazwę paczki z npm – o tym później), który zawiera sczytywany moduł. Wszystkie pliki są łączone w pojedynczy plik JS, a z  poszczególnych funkcji są tworzone powiązane ze sobą obiekty modułów. To oznacza, że wygenerowany plik jest jedyną rzeczą , jaką należy dołączyć poprzez element script w HTML.

Od czego zacząć?

Aby rozpocząć pracę z tym narzędziem, należy posiadać NodeJS oraz npm zainstalowane na komputerze. Kilka słów ten temat pojawiło się w artykule na temat Gulp'a – jeżeli nie jesteście zaznajomieni z używaniem npm'a polecam zajrzeć najpierw tutaj. Browserify instalujemy komendą:

npm install browserify -g

Następnie tworzymy w naszym projekcie w folderze modules nowy plik module.js, który zawiera poniższy kod:

function getArray() {
    return ['foo', 'bar'];
}

module.exports = getArray;

teraz w głównym pliku możemy załadować kod z osobnego pliku:

var getArray = require('./modules/module.js');

var table = getArray();

Następnie należy uruchomić Browserify, które stworzy dla nas boundle, czyli plik wynikowy. W konsoli wpisujemy:

browserify main.js -o build/main.js -d

W poleceniu wprowadzamy nasz plik startowy oraz - za flaga -o, oznaczającą output - miejsce gdzie nasz plik wynikowy ma się znaleźć. Jeżeli chcemy również wygenerować sourcemapy, dzięki którym podczas debugowania narzędzia deweloperskie będą odnosić się do kodu źródłowego a nie wynikowego, należy dodać flagę -d.

Wszystko co następnie wystarczy zrobić, to podlinkować nasz plik wynikowy w HTML:

<script src=”build/main.js”></script>

Bardzo wiele paczek umieszczonych npm są dostosowane do korzystania z nich za pomocą Browserify i bardzo dobrze ze sobą współpracują. Jeżeli chcemy w naszym projekcie korzystać z jQuery, wystarczy, że zainstalujemy najnowszą wersję z npm:

npm install jquery --save

Wszystkie pliki ściągane w ten sposób znajdują się w folderze node_modules. Teraz, aby mieć dostęp do jQuery w naszych skryptach, wystarczy użyć funkcji require, gdzie zamiast ścieżki do pliku podajemy nazwę paczki z npm. 

var $ = require('jquery');

Niestety nie każda biblioteka znajduje się na npm lub  jest dostosowana do składni CommonJS -  w takim wypadku należy skorzystać z Browserify-shim.

Browserify w parze z Gulp'em

Wpisywanie w konsoli polecenia do stworzenia paczki za każdym razem kiedy dokonamy zmian w kodzie i chcemy je podejrzeć w przeglądarce, jest z pewnością uciążliwe. Aby ułatwić sobie pracę z  Browserify, warto wykorzystać wcześniej opisane narzędzie Gulp i stworzyć sobie specjalne zadanie, które przy każdej zmianie będzie taką paczkę dla nas kreować.

Podstawowy task dla Gulpa wygląda następująco:

var gulp = require('gulp');

var browserify = require('browserify');

var source = require('vinyl-source-stream');

 

gulp.task('browserify', function() {

  return browserify().bundle()

    .pipe(source('main.js'))

    .pipe(gulp.dest('build'));

});

Jest to najprostsza implementacja, która nie reaguje na zmiany w plikach – aby taką funkcjonalność uzyskać, należy dodatkowo skorzystać z modułu watchify.

Browserify vs. RequireJS

RequireJS, największa alternatywa dla Browserify, daje nam do dyspozycji podobną funkcjonalność z nieco inną składnią. Moduły definiujemy używając funkcji define(). Jako argumenty podajemy, w kolejności:

  • nazwę naszego modułu,
  • tablicę z nazwami modułów, do których chcemy mieć dostęp wewnątrz aktualnie definiowanego modułu
  • funkcję, która jako własne argumenty otrzyma moduły zdefiniowane w tablicy. 

Dla rozjaśnienia sytuacji, tak wyglądałby przykładowy moduł, z przykładu powyżej:

//modules/module.js

define('getArray', function() {

  return ['foo', 'bar'];

});

 

//main.js

define('main', ['getArray'], function() {

  var table = getArray();

});

Preferowana składnia jest oczywiście kwestią subiektywną lecz ja zdecydowanie skłaniam się bardziej w kierunku CommonJS, ponieważ jest w moim odczuciu dużo bardziej ekspresywna. Dodatkowo składnia zastosowana jest nie tylko w Browserify, ale także -  jak wspomnialem na początku – w NodeJS. Poza tym atutem Browserify jest fakt bardzo łatwej integracji z paczkami z npm oraz automatyczne łączenie paczek w jeden plik. W przypadku RequireJS, jeżeli chcemy powiązać wszystkie pliki w jeden, należy to zrobić we własnym zakresie. Plusem jest również fakt, że moduły możemy ładować asynchronicznie.

Podsumowanie – dlaczego Browserify?

Browserify jest idealnym narzędziem do różnej wielkości projektów. Niewątpliwie jest dobrym wyborem dla tych, którzy chcą utrzymać porządek w projekcie i łatwo poruszać się pomiędzy skryptami. Równocześnie dobrze napisany kod modułu można w łatwy sposób przenosić pomiędzy projektami. Łatwa integracja z Gulpem oraz automatyczne uruchamianie taska do tworzenia paczki wynikowej czyni to narzędzie bardzo przyjemnym w użyciu.

Myślisz o realizacji projektu?

Skontaktuj się z nami. Przygotujemy wycenę, opowiemy o szczegółach i procesie wdrożenia.

Napisz do nas

Strona używa plików cookies. Wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.