RequireJS – co to takiego?

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

Jest to framework upraszczający ładowanie plików i modułów. Pozwala tworzyć kod szybszy i lepszy jakościowo. Umożliwia on ładowanie dynamiczne plików, które są w danej chwili potrzebne, a nie wszystkich – zgodnie 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.

Podsumowując: RequireJS nie jest jedynym narzędziem, które spełnia specyfikację AMD, ale chyba jednym z najbardziej popularnych i to nawet pomimo upływu lat. Dlatego warto wiedzieć do czego służy.

 

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close