Dzisiejszy wpis poświęcony jest wtyczce języka JavaScript: RequireJS.

RequireJS to framework upraszczający ładowanie plików i modułów. Pozwala tworzyć kod szybszy i lepszy jakościowo. Umożliwia ładowanie dynamiczne plików, które są w danej chwili potrzebne, a nie wszystkich. Jest to zgodne ze specyfikacją AMD (Asynchronous Module Definition).

Ogólnie RequireJS sprowadza się do definicji modułu i jego wykorzystania. Jeżeli moduł/plik nie został jeszcze załadowany, to zostanie on dynamicznie wczytany zanim zostanie wykonana pierwsza linijka modułu/pliku wykorzystującego dany moduł/plik.

W najprostszej postaci nasza aplikacja, wykorzystująca RequireJS będzie wyglądała tak:

// index.html
<script scr="js/lib/require.js" data-main="js/engine"></script>

// engine.js
requirejs(['app']);

// app.js
define(function () {
    console.log('załadowany!');
});

W kodzie html strony odwołujemy się tylko i jedynie do skryptu RequireJS. On natomiast na podstawie atrybutu data-main ładuje dany plik i zależność tam zdefiniowaną – czyli tylko te pliki, które są niezbędne do działania strony. W tym przypadku zostanie załadowany i odpalony plik app.js .

Domyślnie RequireJS nazywa nasze moduły w postaci NAZWA_PLIKU z pominięciem jego rozszerzenia. Więc app.js to app. Oczywiście możemy dodawać rozszerzenia, ale wtedy RequireJS traktuje naszą referencję relatywną ścieżkę od adresu pod którym nasz dokument został załadowany – czyli pomija opcję konfiguracyjną baseUrl. Podobnie stanie się gdy nazwę rozpoczniemy od znaku \ albo od http

Opcji konfiguracyjnych wtyczki RequireJS jest naprawdę sporo. Dlatego warto zapoznać się z jego dokumentacją. W najprostszej postaci plik konfiguracyjny wygląda tak:

require.config({
    baseUrl: '/my/app/path'
});

Kolejną rzeczą, na którą pozwala nam ta wtyczka jest możliwość ładowania plików min. Ogólnie, wbudowanej opcji nie ma. Istnieje zaś narzędzie RequireJS optimizer które odpowiedzialne jest za grupowanie współzależnych plików w jeden. To znaczy, jeżeli strona A wymaga  X i Y, to te dwa zostaną połączone w jeden plik, zaś moduł Z zostanie pominięty – gdyż nie był wymagany. Na stronie B zaś zostaną jedynie załączone moduły X i Z gdyż tylko takie są wymagane.

Napisz w komentarzu swoje zdanie o requireJS!